AJAX验证用户名是否被注册

1. 编写页面：
* register.jsp
> 给出注册表单页面
> 给用户名文本框添加onblur事件的监听
> 获取文本框的内容，通过ajax4步发送给服务器，得到响应结果
* 如果为1：在文本框后显示“用户名已被注册”
* 如果为0：什么都不做！

 1 <%@ page contentType="text/html;charset=UTF-8" language="java" %>
 2 <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
 3 <html>
 4   <head>
 5     <title>ajax1</title>
 6     <script type="text/javascript">
 7         // 创建异步对象
 8         function createXMLHttpRequest() {
 9             try {
10                 return new XMLHttpRequest();//大多数浏览器
11             } catch (e) {
12                 try {
13                     return ActvieXObject("Msxml2.XMLHTTP");//IE6.0
14                 } catch (e) {
15                     try {
16                         return ActvieXObject("Microsoft.XMLHTTP");//IE5.5及更早版本
17                     } catch (e) {
18                         alert("哥们儿，您用的是什么浏览器啊？");
19                         throw e;
20                     }
21                 }
22             }
23         }
24 
25         window.onload = function() {//文档加载完毕后执行
26             var userEle = document.getElementById("userEle");
27             userEle.onblur = function() {//给按钮的点击事件注册监听
28               /*
29                ajax四步操作，得到服务器的响应
30                把响应结果显示到h1元素中
31                */
32               /*
33                1. 得到异步对象
34                */
35                 var xmlHttp = createXMLHttpRequest();
36               /*
37                2. 打开与服务器的连接
38                * 指定请求方式
39                * 指定请求的URL
40                * 指定是否为异步请求
41                */
42                 xmlHttp.open("post", "<c:url value='/BServlet'/>", true);
43                 /*设置请求头*/
44                 xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
45               /*
46                3. 发送请求
47                */
48                 xmlHttp.send("username="+userEle.value);//GET请求没有请求体，但也要给出null，不然FireFox可能会不能发送！
49               /*
50                4. 给异步对象的onreadystatechange事件注册监听器
51                */
52                 xmlHttp.onreadystatechange = function() {//当xmlHttp的状态发生变化时执行
53                     // 双重判断：xmlHttp的状态为4（服务器响应结束），以及服务器响应的状态码为200（响应成功）
54                     if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {
55                         // 获取服务器的响应结束
56                         var text = xmlHttp.responseText;
57                         // 获取h1元素
58                         var error = document.getElementById("error");
59                         if(text == "1"){
60                             error.innerHTML="用户名已被注册";
61                         }else {
62                             error.innerHTML="";
63                         }
64                     }
65                 };
66             };
67         };
68     </script>
69   </head>
70   <body>
71  <h1>演示用户名是否被注册</h1>
72   <form action="" method="post">
73     用户名：<input type="text" name="username" id="userEle"><span id="error"></span><br/>
74     密  码：<input type="text" name="password" id="pwdEle"><br/>
75     <input type="submit" value="提交">
76 
77   </form>
78   </body>
79 </html>

2. 编写Servlet
* ValidateUsernameServlet
> 获取客户端传递的用户名参数
> 判断是否为itcast
* 是：返回1
* 否：返回0

 1 public class BServlet extends HttpServlet {
 2     protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
 3 
 4         request.setCharacterEncoding("UTF-8");
 5         response.setContentType("text/html;charset=utf-8");
 6         String username = request.getParameter("username");
 7 
 8         if(username.equalsIgnoreCase("cuibin")) {
 9             response.getWriter().print("0");
10         }else {
11             response.getWriter().print("1");
12         }
13     }
14 
15 }

 

posted @ 2017-04-27 12:36  崔布斯  阅读(410)  评论(0)  编辑  收藏  举报