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 条评论
登录 后参与评论

相关文章

来自专栏Hongten

JSP 七讲

451
来自专栏Linyb极客之路

Java常用日志框架介绍

看了上面的介绍是否会觉得比较混乱,这些日志框架之间有什么异同,都是由谁在维护? 下文会逐一介绍。

991
来自专栏拂晓风起

java web 自定义错误页面 完整jsp错误页面代码(同时写错误日志) error.jsp

975
来自专栏xingoo, 一个梦想做发明家的程序员

JQuery ztree 异步加载实践

本来要做一个文件目录浏览界面,需要遍历所有的文件和目录,很显然一次性读取时很费时费力的一件事情。 因此就需要做异步加载.... 不过网上的几篇帖子还挺坑的...

1907
来自专栏Java 技术分享

Session、Cookie 学习笔记

3415
来自专栏along的开发之旅

图解JSP运行原理和过程

下面代码通过注解来处理/hello的请求, 并在代码中将请求转发到上述hello.jsp.

411
来自专栏微信公众号:Java团长

Java常用日志框架介绍

看了上面的介绍是否会觉得比较混乱,这些日志框架之间有什么异同,都是由谁在维护? 下文会逐一介绍。

692
来自专栏Google Dart

资源读取配置 原

672
来自专栏码匠的流水账

聊聊session fixation attacks

本文主要讲一下session fixation attacks以及spring security对它的防范。

452
来自专栏ml

jsp之 ---- 页面重定向和请求转发(笔记之深度说明)

          1.    HttpServletResponse对象的sendRedirect(String location)方法称作重定向。 如果lo...

2866

扫码关注云+社区