首先介绍一个不错的学习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" οnblur="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 }
演示效果如下所示：
革命尚未成功，别同志尚需努力啊！
扫一扫
5861
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
