<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <% String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+request.getContextPath()+"https://www.jb51.net/"; %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>如何使用传统方法异步验证用户名的唯一性</title> <script type="text/javascript"> function goDemo(pageName){ window.location.href='<%=basePath%>'+pageName; } </script> </head> <body> <center><font>如何使用传统方法异步验证用户名的唯一性</font></center><br> 例子一：<input type="button" value="例子一"/><br><br> 例子二：<input type="button" value="例子二"/><br><br> 例子一与例子二的区别：两者都实现了使用传统方法异步验证用户名的唯一性的功能，区别在于使用的servlet中的的方法不同："例子一"使用的servlet中的doGet方法；"例子二"使用的servlet中的doPost方法。 </body> </html>
代码2demo1.jsp文件：
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <% String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+request.getContextPath()+"https://www.jb51.net/"; %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>使用的servlet中的doGet方法</title> <script type="text/javascript"> function checkUserName(){ var value=document.getElementById("userName").value; if(value==""){ document.getElementById("showUserName").innerHTML="<font size=\"2\" color=red>用户名不能为空！！！</font>"; }else{ var xmlHttpRequest = null; if(window.XMLHttpRequest){/*适用于IE7以上（包括IE7）的IE浏览器、火狐浏览器、谷歌浏览器和Opera浏览器*/ xmlHttpRequest = new XMLHttpRequest();//创建XMLHttpRequest }else if(window.ActiveXObject){/*适用于IE6.0以下（包括IE6.0）的IE浏览器*/ xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP"); }//第一步：创建XMLHttpRequest对象，请求未初始化 xmlHttpRequest.onreadystatechange = function (){//readyState值发生改变时XMLHttpRequest对象激发一个readystatechange事件,进而调用后面的函数 if(xmlHttpRequest.readyState==1){ xmlHttpRequest.send();//第三步：发送请求，也可以为xmlHttpRequest.send(null) } if(xmlHttpRequest.readyState==2){ console.log("send()方法已执行，请求已发送到服务器端，但是客户端还没有收到服务器端的响应。"); } if(xmlHttpRequest.readyState==3){ console.log("已经接收到HTTP响应头部信息，但是消息体部分还没有完全接收结束。"); } if(xmlHttpRequest.readyState==4){//客户端接收服务器端信息完毕。第四步：处理服务器端发回来的响应信息 if(xmlHttpRequest.status==200){//与Servlet成功交互 console.log("客户端已完全接收服务器端的处理响应。"); var responseValue=xmlHttpRequest.responseText; if(responseValue==1){ document.getElementById("showUserName").innerHTML="<font size=\"2\" color=\"red\"> 用户名已被使用！</font>"; }else if(responseValue==2){ document.getElementById("showUserName").innerHTML="<font size=\"2\" color=\"green\"> 用户名有效！！！</font>"; } }else{//与Servlet交互出现问题 document.getElementById("showUserName").innerHTML="<font size=\"2\" color=\"red\">请求发送失败！</font>"; } } }; if(xmlHttpRequest.readyState==0){ xmlHttpRequest.open("get","<%=basePath%>AjaxCheckUserNameServlet?userName="+value,true);//第二步：完成请求初始化，提出请求。open方法中的三个参数分别是：请求方式、路径、是否异步（true表示异步，false表示同步） } } } </script> </head> <body> <center><font>使用的servlet中的doGet方法</font><br><br> 用户名：<input type="text" size="27" onblur="checkUserName();"> <font size="2"> *用户名必填，具有唯一性。</font> </center> </body> </html>
代码3demo2.jsp文件：
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <% String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+request.getContextPath()+"https://www.jb51.net/"; %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>使用的servlet中的doPost方法</title> <script type="text/javascript"> function checkUserName(){ var value=document.getElementById("userName").value; if(value==""){ document.getElementById("showUserName").innerHTML="<font size=\"2\" color=red>用户名不能为空！！！</font>"; }else{ var xmlHttpRequest = null; if(window.XMLHttpRequest){/*适用于IE7以上（包括IE7）的IE浏览器、火狐浏览器、谷歌浏览器和Opera浏览器*/ xmlHttpRequest = new XMLHttpRequest();//创建XMLHttpRequest }else if(window.ActiveXObject){/*适用于IE6.0以下（包括IE6.0）的IE浏览器*/ xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP"); }//第一步：创建XMLHttpRequest对象，请求未初始化 xmlHttpRequest.onreadystatechange = function (){//readyState值发生改变时XMLHttpRequest对象激发一个readystatechange事件,进而调用后面的函数 if(xmlHttpRequest.readyState==1){ xmlHttpRequest.send();//第三步：发送请求，也可以为xmlHttpRequest.send(null) } if(xmlHttpRequest.readyState==2){ console.log("send()方法已执行，请求已发送到服务器端，但是客户端还没有收到服务器端的响应。"); } if(xmlHttpRequest.readyState==3){ console.log("已经接收到HTTP响应头部信息，但是消息体部分还没有完全接收结束。"); } if(xmlHttpRequest.readyState==4){//客户端接收服务器端信息完毕。第四步：处理服务器端发回来的响应信息 if(xmlHttpRequest.status==200){//与Servlet成功交互 console.log("客户端已完全接收服务器端的处理响应。"); var responseValue=xmlHttpRequest.responseText; if(responseValue==1){ document.getElementById("showUserName").innerHTML="<font size=\"2\" color=\"red\"> 用户名已被使用！</font>"; }else if(responseValue==2){ document.getElementById("showUserName").innerHTML="<font size=\"2\" color=\"green\"> 用户名有效！！！</font>"; } }else{//与Servlet交互出现问题 document.getElementById("showUserName").innerHTML="<font size=\"2\" color=\"red\">请求发送失败！</font>"; } } }; if(xmlHttpRequest.readyState==0){ xmlHttpRequest.open("post","<%=basePath%>AjaxCheckUserNameServlet?userName="+value,true);//第二步：完成请求初始化，提出请求。open方法中的三个参数分别是：请求方式、路径、是否异步（true表示异步，false表示同步） } } } </script> </head> <body> <center><font color="red" size="5"><strong>使用的servlet中的doPost方法</strong></font><br><br> 用户名：<input type="text" size="27" onblur="checkUserName()"> <font size=2> *用户名必填，具有唯一性。</font> </center> </body> </html>
代码4AjaxCheckUserNameServlet.java文件：