码迷,mamicode.com
首页 > Web开发 > 详细

AJAX 练习

时间:2019-06-18 21:37:41      阅读:165      评论:0      收藏:0      [点我收藏+]

标签:app   extends   pos   equal   公众号   http请求   其他   pen   content   

主要功能介绍:

检测用户输入的用户名是否为“zhongfucheng”,只要不是“zhongfucheng”就可以使用。

jsp 代码:

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>$Title$</title>
    <script>
        var httpRequest;
        function checkUsername(){
            if(window.XMLHttpRequest){
                // 在 IE6 以上版本以及其他内核的浏览器(Mozilla)等
                httpRequest = new XMLHttpRequest();
            } else if(window.ActiveXObject){
                // 在 IE6 以下的版本
                httpRequest = new ActiveXObject();
            }

            // 创建http请求
            httpRequest.open("POST", "Servlet1", true);

            // post 提交方式需设置消息头
            httpRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

            // 指定回调函数
            httpRequest.onreadystatechange = response22;

            // 得到文本框中的数据
            var name = document.getElementById("username").value;

            // 发送http请求,把要检测的用户名传递出去
            httpRequest.send("username=" + name);
        }


        function response22(){
            // 判断请求状态码是否为4[数据接收完成]
            if(httpRequest.readyState == 4){
                // 在判断状态码是否为200
                if(httpRequest.status == 200){
                    // 得到服务端返回的文本数据
                    var text = httpRequest.responseText;

                    // 把服务端返回的数据写到div上
                    var div = document.getElementById("result");
                    div.innerText = text;
                }
            }
        }

    </script>
  </head>
  <body>
  <input type="text" id="username">
  <input type="button" onclick="checkUsername()" value="检测用户名是否合法">
  <div id="result"></div>
  </body>
</html>

后台 Servlet:

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

@WebServlet("/Servlet1")
public class AjaxTest extends HttpServlet {


    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        this.doPost(req, resp);
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        req.setCharacterEncoding("UTF-8");
        String name = req.getParameter("username");
        if(name != null && name.length() != 0){
            if(name.equals("zhongfucheng")){
                String jsonArray = "you can‘t use this name";
                resp.getWriter().print(jsonArray);
            } else {
                resp.getWriter().print("you can use this name");
            }

        }
    }

    @Override
    public void init() throws ServletException {
        super.init();
    }
}

 

最后:

参考了微信公众号“Java3y”的文章,感谢“Java3y”

AJAX 练习

标签:app   extends   pos   equal   公众号   http请求   其他   pen   content   

原文地址:https://www.cnblogs.com/peng19920430/p/11047856.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!