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,如下:

    <script type="text/javascript" src="js/jquery.min.js"></script>

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 }

演示效果如下所示:

革命尚未成功,别同志尚需努力啊!

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏iOS技术

iOS RunLoop 深入探究

RunLoop是iOS或OSX开发中很重要的一个组件,它实现了很多底层的功能,本文主要分析RunLoop的概念、结构、运行原理,文中的结论主要是基于苹果官方文档...

3417
来自专栏xx_Cc的学习总结专栏

iOS底层原理总结 - RunLoop

4737
来自专栏GIS讲堂

Openlayers2唯一值渲染

702
来自专栏hightopo

原 基于HTML5 Canvas 实现地铁

963
来自专栏软件开发 -- 分享 互助 成长

享元模式

一、简介 1、享元模式运用共享技术有效地支持大量细粒度的对象。 2、享元模式是为了减少同种类的实例化,以达到节省内存的目的。 3、类成员函数 抽象享元类(Fly...

1789
来自专栏xx_Cc的学习总结专栏

iOS-RunLoop充满灵性的死循环

3798
来自专栏iOS 开发杂谈

浅谈 NSTimer 是否精确?

NSTimer 的启动依赖 RunLoop,如果在主线程中做了耗时的操作,当前 RunLoop 持续的时间超过了定时器的间隔时间,那么下一次定时就被延后了。

932
来自专栏哈雷彗星撞地球

RunLoop总结:RunLoop基础知识

没有实际应用场景,很难理解一些抽象空洞的东西,所以前面几篇文章先介绍了RunLoop的几个使用场景。 另外AsyncDisplayKit中也有大量使用RunL...

1072
来自专栏Android点滴积累

Android Activity返回键控制的两种方式

Android Activity返回键监听的两种方式 1、覆写Activity的OnBackPressed方法 官方解释: Called when the a...

2117
来自专栏向治洪

享元模式

享元模式 如果在一个系统中存在多个相同的对象,那么只需共享一份对象的拷贝,而不必为每一次使用都创建新的对象。这里可以看出,享元模式是对象的结构模式。享元模式以共...

1629

扫码关注云+社区