Ajax失去焦点检测用户名是否存在

不用jQuery

 

  1. 创建XMLHttpRequest对象
  2. 设置回调函数
    1. 在执行函数前先判断XMLHttpRequest对象发送的求情服务器是否以收到并作出回应,再判断响应状态码是否是正常状态
    2. 在回调函数中解析出response响应的数据
    3. 根据解析的数据做出判断
  3. 初始化XMLHttpRequest组件
  4. XMLHttpRequest发送请求

　　

  1. 在后端创建UserServlet类
  2. 重写doGet()和doPost()方法
  3. 在方法中解析出客户端发送的数据,判断用户是否存在
  4. 返回判断的结果

XMLHttpRequest对象的readyState 属性

  • readyState属性实时记录XMLHttpRequest对象的状态
  • XMLHttpRequest对象的五种状态
    • 0: 请求未初始化　　 xmlHttpRequest.readyState == 0
    • 1: 服务器连接已建立  xmlHttpRequest.readyState == 1
    • 2: 请求已接收 xmlHttpRequest.readyState == 2
    • 3: 请求处理中 xmlHttpRequest.readyState == 3
    • 4: 请求已完成，且响应已就绪 xmlHttpRequest.readyState == 4

onreadystatechange 事件

  1. 当readyState状态发生改变时会触发该事件
  2. 当readyState == 4 时表示
    • XMLHttpRequest对象请求以发送成功
    • 服务器已接受请求,并对请求做出处理并返回结果

HTTP Status Code(服务器对请求返回的状态码,表示对请求处理的结果)

  1. 200 （成功） 服务器已成功处理了请求。 通常，这表示服务器提供了请求的网页。
  2. 404 （未找到） 服务器找不到请求的网页。(服务器对客户端说:你要求的资源我在我这里找不到.通常是路径设置错误)
  3. 500 （服务器内部错误） 服务器遇到错误，无法完成请求。(浏览器发送请求,服务器对请求资源解析时出现错误,通常是资源的代码在解析时出现错误,就是代码写错了...)

 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>注册</title>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        function validate() {
            var name = $("#name").val();
            if (name == null || name == "") {
                $("#nameDiv").html("用户名不能为空");
            }else{
//创建xmlHttpRequest对象
                var xmlHttpRequest = new XMLHttpRequest();
//设置回调函数
                xmlHttpRequest.onreadystatechange = callBack;
                var url = "UserServlet";
                xmlHttpRequest.open("POST", url, true);
                xmlHttpRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
                var data = "name="+name;
                xmlHttpRequest.send(data);
                /*var url = "UserServlet?name="+name;
                xmlHttpRequest.open("GET", url, true);
                xmlHttpRequest.send(null);*/
                function callBack(){
if (xmlHttpRequest.readyState == 4
  && xmlHttpRequest.status == 200) {
  var data = xmlHttpRequest.responseText;
  if (data == "true") {
  $("#nameDiv").html("用户名已被使用！");
  } else {
  $("#nameDiv").html("用户名可以使用！");
  }
    

                }
            }
        }
    </script>
</head>
<body>
<form action="" id="form1">
    <table>
        <tr>
            <td>用 户 名：</td>
            <td><input type="text" name="name" id="name"
                       onblur="validate();"/>&nbsp;<font color="#c00fff">*</font></td>
            <td>
                <div id="nameDiv" style="display: inline"></div>
            </td>
        </tr>
    </table>
</form>
</body>
</html>

 

 

 1 @WebServlet("/UserServlet")//用注解添加Servlet的路径
 2 public class UserServlet extends HttpServlet {
 3     @Override
 4     protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
 5         System.out.println("jintu");
 6         String name = req.getParameter("name");
 7         boolean flag = false;
 8         if (name.equals("admin")) {
 9               flag = true;
10         }
11         PrintWriter out = resp.getWriter();
12         out.print(flag);
13         out.flush();
14         out.close();
15     }
16 
17     @Override
18     protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
19         this.doGet(req, resp);
20     }
21 }
用jQuery

　　

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <script src="js/jquery-1.12.4.min.js"></script>
 7     <script>
 8         $(document).ready(function () {
 9             $("#name").blur(function () {
10                 var name = this.value;
11 
12                 if (name == null || name.trim() == "") {
13                     $("#nameDiv").html("用户名不能为空");
14                 } else {
15                     $.ajax({
16                         //要提交的URL路径
17                         "url": "UserServlet",
18                         //发送请求的方式
19                         "type": "POST",
20                         //要发送到服务器的数据
21                         "data": "name=" + name,
22                         //指定返回的数据格式
23                         "dataType": "text",
24                         //响应成功后要执行的代码
25                         "success": callBack,
26                         //请求失败后要执行的代码
27                         "error": function () {
28                             alert("未知错误")
29                         }
30                     });
31 
32                     function callBack(data) {
33                         if (data == "true") {
34                             $("#nameDiv").html("用户名重复");
35 
36                         } else {
37                             $("#nameDiv").html("可以使用");
38                         }
39 
40                     }
41                 }
42             });
43         })
44     </script>
45 </head>
46 <body>
47 <form action="" id="form1">
48     <table>
49         <tr>
50             <td>用 户 名：</td>
51             <td><input type="text" name="name" id="name"
52                 />&nbsp;<font color="#c00fff">*</font></td>
53             <td>
54                 <div id="nameDiv" style="display: inline"></div>
55             </td>
56         </tr>
57     </table>
58 </form>
59 </body>
60 </html>

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

posted @ 2019-06-12 20:10  Mr.Li[0]  阅读(558)  评论(0)  编辑  收藏  举报