Ajax异步验证登陆或者注册-阿里云开发者社区

首先介绍一个不错的学习Ajax的中文网站：http://www.w3school.com.cn/ajax/index.asp

AJAX = 异步 JavaScript 和 XML。详细介绍见上面的网址即可；

1：首先介绍一下使用Javascript写的异步验证，然而在实际开发过程中很少用这种的，太过繁琐，但是依旧写一个吧！至少懂其原理哦！

　　1.1：第一种方式：先说使用get方法向服务器发送请求的方法吧；

　　　　首先创建一个页面，如register.jsp,代码如下所示：

 1 <%@ page language="java" contentType="text/html; charset=UTF-8"
 2     pageEncoding="UTF-8"%>
 3 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 4 <html>
 5 <head>
 6 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 7 <title>注册的页面</title>
 8 <script type="text/javascript">
 9     //onblur失去焦点的值
10     
11     //定义一个变量用于存放XMLHttpRequest对象
12     var xmlHttp;
13     function checkIt(){
14         //获取文本框的值    
15         var account=document.getElementById("account").value;
16         //alert("测试获取文本框的值："+account);
17         //先创建XMLHttpRequest对象
18         // code for IE7+, Firefox, Chrome, Opera, Safari
19         if (window.XMLHttpRequest) {
20             xmlHttp = new XMLHttpRequest();
21         } else {// code for IE6, IE5
22             xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
23         }
24         //服务器地址和数据
25         var url="system/usercheck?account="+account;
26         //规定请求的类型、URL 以及是否异步处理请求。
27         xmlHttp.open("GET",url,true);
28         //将请求发送到服务器
29         xmlHttp.send();
30         //回调函数
31         xmlHttp.onreadystatechange=function(){
32             if (xmlHttp.readyState==4 && xmlHttp.status==200){
33                 //给div设置内容
34                 document.getElementById("errorAccount").innerHTML = xmlHttp.responseText;
35             }
36         }
37         //给div设置内容
38         //document.getElementById("errorAccount").innerHTML=account;
39     }
40 </script>
41 </head>
42 <body  bgcolor="#CCFF00">
43 
44 <center>
45     <form action="" method="post">
46         <table>
47             <caption>注册的页面</caption>
48             <tr>
49                 <td>账号：</td>
50                 <td>
51                     <input type="text" name="account" id="account" onblur="checkIt()"/>
52                     <div id="errorAccount" style="color:red;display:inline;"></div>    
53                 </td>
54             </tr>
55             <tr>
56                 <td>密码：</td>
57                 <td><input type="password" name="password"/></td>
58             </tr>
59             <tr>
60                 <td>姓名：</td>
61                 <td><input type="text" name="username"/></td>
62             </tr>
63             <tr>
64                 <td>性别：</td>
65                 <td><input type="text" name="sex"/></td>
66             </tr>
67             <tr>
68                 <td></td>
69                 <td>
70                     <input type="submit" value="注册">
71                     <input type="reset" value="重置">
72                 </td>
73             </tr>
74         </table>    
75     </form>
76 </center>
77 </body>
78 </html>

　　　 1.2：实现后台模拟数据库登陆的Servlet页面，源码如下，类名是UserCheckServlet.java

 1 package com.bie;
 2 
 3 import java.io.IOException;
 4 import java.io.PrintWriter;
 5 
 6 import javax.servlet.ServletException;
 7 import javax.servlet.annotation.WebServlet;
 8 import javax.servlet.http.HttpServlet;
 9 import javax.servlet.http.HttpServletRequest;
10 import javax.servlet.http.HttpServletResponse;
11 
12 /** 
13 * @author BieHongLi 
14 * @version 创建时间：2017年3月2日 下午9:06:46 
15 * 
16 */
17 @WebServlet("/system/usercheck")
18 public class UserCheckServlet extends HttpServlet{
19 
20     private static final long serialVersionUID = 1L;
21 
22     @Override
23     protected void doGet(HttpServletRequest request, HttpServletResponse response) 
24             throws ServletException, IOException {
25         this.doPost(request, response);
26     }
27 
28     @Override
29     protected void doPost(HttpServletRequest request, HttpServletResponse response) 
30             throws ServletException, IOException {
31         //设置字符编码集
32         request.setCharacterEncoding("utf-8");
33         //模拟存在数据库里面的账号
34         String[] arr={"张三","李四","王五","admin","小别"};
35         //获取前台传来的数据
36         String account=request.getParameter("account");
37         
38         //模拟和数据库里面的信息匹配
39         boolean mark=false;
40         for(String user:arr){
41             if(user.equals(account)){
42                 mark=true;
43                 break;
44             }
45         }
46         
47         //响应前台
48         response.setCharacterEncoding("utf-8");
49         response.setContentType("text/html");
50         PrintWriter out=response.getWriter();
51         if(mark){
52             out.println("<font color='red'>该帐号已经存在，请重新输入!</font>");
53         }else{
54             out.println("<font color='green'>恭喜您，该帐号可以使用!</font>");
55         }
56         out.flush();//刷新流
57         out.close();//关闭流
58         
59     }
60     
61     
62 }

效果如下所示：

　　1.3：第二种方式，使用post方式发送服务器请求；还如上所示，先写一个jsp页面，如register2.jsp

 1 <%@ page language="java" contentType="text/html; charset=UTF-8"
 2     pageEncoding="UTF-8"%>
 3 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 4 <html>
 5 <head>
 6 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 7 <title>注册的页面</title>
 8 <script type="text/javascript">
 9     //onblur失去焦点的值
10     
11     //定义一个变量用于存放XMLHttpRequest对象
12     var xmlHttp;
13     function checkIt(){
14         //获取文本框的值    
15         var account=document.getElementById("account").value;
16         //alert("测试获取文本框的值："+account);
17         //先创建XMLHttpRequest对象
18         // code for IE7+, Firefox, Chrome, Opera, Safari
19         if (window.XMLHttpRequest) {
20             xmlHttp = new XMLHttpRequest();
21         } else {// code for IE6, IE5
22             xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
23         }
24         //服务器地址和数据
25         var url = "system/usercheck";
26         //规定请求的类型、URL 以及是否异步处理请求。
27         xmlHttp.open("POST",url,true);
28         //向请求添加 HTTP 头。这个必加，是提交到后台的方式
29         xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
30         //将请求发送到服务器
31         xmlHttp.send("account="+account);
32         //回调函数
33         xmlHttp.onreadystatechange=function(){
34             if (xmlHttp.readyState==4 && xmlHttp.status==200){
35                 //给div设置内容
36                 document.getElementById("errorAccount").innerHTML = xmlHttp.responseText;
37             }
38         }
39         //给div设置内容
40         //document.getElementById("errorAccount").innerHTML=account;
41     }
42 </script>
43 </head>
44 <body  bgcolor="#CCFF00">
45 
46 <center>
47     <form action="" method="post">
48         <table>
49             <caption>注册的页面</caption>
50             <tr>
51                 <td>账号：</td>
52                 <td>
53                     <input type="text" name="account" id="account" onblur="checkIt()"/>
54                     <div id="errorAccount" style="color:red;display:inline;"></div>    
55                 </td>
56             </tr>
57             <tr>
58                 <td>密码：</td>
59                 <td><input type="password" name="password"/></td>
60             </tr>
61             <tr>
62                 <td>姓名：</td>
63                 <td><input type="text" name="username"/></td>
64             </tr>
65             <tr>
66                 <td>性别：</td>
67                 <td><input type="text" name="sex"/></td>
68             </tr>
69             <tr>
70                 <td></td>
71                 <td>
72                     <input type="submit" value="注册">
73                     <input type="reset" value="重置">
74                 </td>
75             </tr>
76         </table>    
77     </form>
78 </center>
79 </body>
80 </html>

　　1.4:然后写后台，依旧如上所示；如UserCheckServlet.java

 1 package com.bie;
 2 
 3 import java.io.IOException;
 4 import java.io.PrintWriter;
 5 
 6 import javax.servlet.ServletException;
 7 import javax.servlet.annotation.WebServlet;
 8 import javax.servlet.http.HttpServlet;
 9 import javax.servlet.http.HttpServletRequest;
10 import javax.servlet.http.HttpServletResponse;
11 
12 /** 
13 * @author BieHongLi 
14 * @version 创建时间：2017年3月2日 下午9:06:46 
15 * 
16 */
17 @WebServlet("/system/usercheck")
18 public class UserCheckServlet extends HttpServlet{
19 
20     private static final long serialVersionUID = 1L;
21 
22     @Override
23     protected void doGet(HttpServletRequest request, HttpServletResponse response) 
24             throws ServletException, IOException {
25         this.doPost(request, response);
26     }
27 
28     @Override
29     protected void doPost(HttpServletRequest request, HttpServletResponse response) 
30             throws ServletException, IOException {
31         //设置字符编码集
32         request.setCharacterEncoding("utf-8");
33         //模拟存在数据库里面的账号
34         String[] arr={"张三","李四","王五","admin","小别"};
35         //获取前台传来的数据
36         String account=request.getParameter("account");
37         
38         //模拟和数据库里面的信息匹配
39         boolean mark=false;
40         for(String user:arr){
41             if(user.equals(account)){
42                 mark=true;
43                 break;
44             }
45         }
46         
47         //响应前台
48         response.setCharacterEncoding("utf-8");
49         response.setContentType("text/html");
50         PrintWriter out=response.getWriter();
51         if(mark){
52             out.println("<font color='red'>该帐号已经存在，请重新输入!</font>");
53         }else{
54             out.println("<font color='green'>恭喜您，该帐号可以使用!</font>");
55         }
56         out.flush();//刷新流
57         out.close();//关闭流
58         
59     }
60     
61     
62 }

演示效果如下所示：

2：使用jQuery进行异步请求验证，在开发中最常使用，实际开发过程中必须会使用的技术；

　　推荐一个jQuery在线api的网站(挺不错的在线查看api，也可以下载，我用着挺方便的)：http://jquery.cuishifeng.cn/　

　　2.1：下面介绍如何使jQuery进行开发，需要注意的是要引入一个jQuery的js，如下：

　　 2.2：如上，依旧先创建一个register3.jsp页面，如下代码所示：

 1 <%@ page language="java" contentType="text/html; charset=UTF-8"
 2     pageEncoding="UTF-8"%>
 3 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 4 <html>
 5 <head>
 6 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 7 <title>注册的页面</title>
 8 <script type="text/javascript" src="js/jquery.min.js"></script>
 9 <script type="text/javascript">
10     $(document).ready(function(){
11         //给账号文本框绑定失去焦点的事件
12         $("#account").blur(function(){
13             //alert("测试"+$(this).val());
14             $.ajax({
15                 url:"system/usercheck",//设置服务器地址，即为servlet配置的url-pattern
16                 type:"post",//提交的方式
17                 data:{account:$(this).val()},//提交到服务器的数据，多个值以逗号分割开{account:$(this).val(),...}
18                 success:function(data){//回调函数，data是返回的数据
19                     $("#errorAccount").html(data);
20                 }
21             });
22         });
23     });
24     
25 </script>
26 </head>
27 <body  bgcolor="#CCFF00">
28 
29 <center>
30     <form action="" method="post">
31         <table>
32             <caption>注册的页面</caption>
33             <tr>
34                 <td>账号：</td>
35                 <td>
36                     <input type="text" name="account" id="account" onblur="checkIt()"/>
37                     <div id="errorAccount" style="color:red;display:inline;"></div>    
38                 </td>
39             </tr>
40             <tr>
41                 <td>密码：</td>
42                 <td><input type="password" name="password"/></td>
43             </tr>
44             <tr>
45                 <td>姓名：</td>
46                 <td><input type="text" name="username"/></td>
47             </tr>
48             <tr>
49                 <td>性别：</td>
50                 <td><input type="text" name="sex"/></td>
51             </tr>
52             <tr>
53                 <td></td>
54                 <td>
55                     <input type="submit" value="注册">
56                     <input type="reset" value="重置">
57                 </td>
58             </tr>
59         </table>    
60     </form>
61 </center>
62 </body>
63 </html>

　　2.3：后台servlet代码依旧如上面的模拟数据库，代码如下所示：

 1 package com.bie;
 2 
 3 import java.io.IOException;
 4 import java.io.PrintWriter;
 5 
 6 import javax.servlet.ServletException;
 7 import javax.servlet.annotation.WebServlet;
 8 import javax.servlet.http.HttpServlet;
 9 import javax.servlet.http.HttpServletRequest;
10 import javax.servlet.http.HttpServletResponse;
11 
12 /** 
13 * @author BieHongLi 
14 * @version 创建时间：2017年3月2日 下午9:06:46 
15 * 
16 */
17 @WebServlet("/system/usercheck")
18 public class UserCheckServlet extends HttpServlet{
19 
20     private static final long serialVersionUID = 1L;
21 
22     @Override
23     protected void doGet(HttpServletRequest request, HttpServletResponse response) 
24             throws ServletException, IOException {
25         this.doPost(request, response);
26     }
27 
28     @Override
29     protected void doPost(HttpServletRequest request, HttpServletResponse response) 
30             throws ServletException, IOException {
31         //设置字符编码集
32         request.setCharacterEncoding("utf-8");
33         //模拟存在数据库里面的账号
34         String[] arr={"张三","李四","王五","admin","小别"};
35         //获取前台传来的数据
36         String account=request.getParameter("account");
37         
38         //模拟和数据库里面的信息匹配
39         boolean mark=false;
40         for(String user:arr){
41             if(user.equals(account)){
42                 mark=true;
43                 break;
44             }
45         }
46         
47         //响应前台
48         response.setCharacterEncoding("utf-8");
49         response.setContentType("text/html");
50         PrintWriter out=response.getWriter();
51         if(mark){
52             out.println("<font color='red'>该帐号已经存在，请重新输入!</font>");
53         }else{
54             out.println("<font color='green'>恭喜您，该帐号可以使用!</font>");
55         }
56         out.flush();//刷新流
57         out.close();//关闭流
58         
59     }
60     
61     
62 }

演示效果如下所示：

3:如果说还有更加适合进行异步验证的方法，那么就是下面这种，直接使用post进行异步验证，理解其原理，异步验证so easy!!!

　　3.1:首先创建一个页面register4.jsp,代码如下所示；

 1 <%@ page language="java" contentType="text/html; charset=UTF-8"
 2     pageEncoding="UTF-8"%>
 3 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 4 <html>
 5 <head>
 6 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 7 <title>注册的页面</title>
 8 <script type="text/javascript" src="js/jquery.min.js"></script>
 9 <script type="text/javascript">
10     $(document).ready(function(){
11         //异步验证
12         $("#account").blur(function(){
13             $.post("system/usercheck2",{account:$(this).val()},
14                 function(data){
15                     if(data=="true"){
16                         //如果已经存在，提示账号已经被注册
17                         $("#errorAccount").html("账号已被注册，请重新输入!");
18                     }else{
19                         //这里可以注册的可以不进行提示,清空即可
20                         $("#errorAccount").html("<font color='green'>账号可以注册哟!</font>");
21                     }
22             },"text");
23         });
24     });
25     
26 </script>
27 </head>
28 <body  bgcolor="#CCFF00">
29 
30 <center>
31     <form action="" method="post">
32         <table>
33             <caption>注册的页面</caption>
34             <tr>
35                 <td>账号：</td>
36                 <td>
37                     <input type="text" name="account" id="account" onblur="checkIt()"/>
38                     <div id="errorAccount" style="color:red;display:inline;"></div>    
39                 </td>
40             </tr>
41             <tr>
42                 <td>密码：</td>
43                 <td><input type="password" name="password"/></td>
44             </tr>
45             <tr>
46                 <td>姓名：</td>
47                 <td><input type="text" name="username"/></td>
48             </tr>
49             <tr>
50                 <td>性别：</td>
51                 <td><input type="text" name="sex"/></td>
52             </tr>
53             <tr>
54                 <td></td>
55                 <td>
56                     <input type="submit" value="注册">
57                     <input type="reset" value="重置">
58                 </td>
59             </tr>
60         </table>    
61     </form>
62 </center>
63 </body>
64 </html>

　　3.2：这次的servlet后台处理虽然依旧是模拟数据库，但是操作却不一样了。需要注意一下；

 1 package com.bie.servlet;
 2 
 3 import java.io.IOException;
 4 import java.io.PrintWriter;
 5 
 6 import javax.servlet.ServletException;
 7 import javax.servlet.annotation.WebServlet;
 8 import javax.servlet.http.HttpServlet;
 9 import javax.servlet.http.HttpServletRequest;
10 import javax.servlet.http.HttpServletResponse;
11 
12 /** 
13 * @author BieHongLi 
14 * @version 创建时间：2017年3月2日 下午9:06:46 
15 * 
16 */
17 @WebServlet("/system/usercheck2")
18 public class UserCheckServlet2 extends HttpServlet{
19 
20     private static final long serialVersionUID = 1L;
21 
22     @Override
23     protected void doGet(HttpServletRequest request, HttpServletResponse response) 
24             throws ServletException, IOException {
25         this.doPost(request, response);
26     }
27 
28     @Override
29     protected void doPost(HttpServletRequest request, HttpServletResponse response) 
30             throws ServletException, IOException {
31         //设置字符编码集
32         request.setCharacterEncoding("utf-8");
33         //模拟存在数据库里面的账号
34         String[] arr={"张三","李四","王五","admin","小别"};
35         //获取前台传来的数据
36         String account=request.getParameter("account");
37         
38         //模拟和数据库里面的信息匹配
39         boolean mark=false;
40         for(String user:arr){
41             if(user.equals(account)){
42                 mark=true;
43                 break;
44             }
45         }
46         
47         //响应前台
48         response.setCharacterEncoding("utf-8");
49         response.setContentType("text/html");
50         PrintWriter out=response.getWriter();
51         if(mark){
52             out.print("true");
53         }else{
54             out.print("false");
55         }
56         out.flush();//刷新流
57         out.close();//关闭流
58         
59     }
60     
61     
62 }

演示效果如下所示：

革命尚未成功，别同志尚需努力啊！