详解javascript传统方法实现异步校验
学习JavaScript异步校验时往往是从最传统的XMLHttpRequest学起，本文来谈一下对传统校验的认识：
代码1index.jsp文件：
<%@pagelanguage="java"contentType="text/html;charset=UTF-8"pageEncoding="UTF-8"%>
<%
StringbasePath=request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+request.getContextPath()+"/";
%>
<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN">
<html>
<head>
<title>如何使用传统方法异步验证用户名的唯一性</title>
<scripttype="text/javascript">
functiongoDemo(pageName){
window.location.href='<%=basePath%>'+pageName;
}
</script>
</head>
<body>
<centerstyle="margin-top:10%"><fontstyle="color:red;font-size:18pt;font-weight:bold;">如何使用传统方法异步验证用户名的唯一性</font></center><br>
例子一：<inputtype="button"value="例子一"onclick="goDemo('demo1.jsp');"/><br><br>
例子二：<inputtype="button"value="例子二"onclick="goDemo('demo2.jsp');"/><br><br>
例子一与例子二的区别：两者都实现了使用传统方法异步验证用户名的唯一性的功能，区别在于使用的servlet中的的方法不同："例子一"使用的servlet中的doGet方法；"例子二"使用的servlet中的doPost方法。
</body>
</html>
代码2demo1.jsp文件：
<%@pagelanguage="java"contentType="text/html;charset=UTF-8"pageEncoding="UTF-8"%>
<%
StringbasePath=request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+request.getContextPath()+"/";
%>
<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN">
<html>
<head>
<title>使用的servlet中的doGet方法</title>
<scripttype="text/javascript">
functioncheckUserName(){
varvalue=document.getElementById("userName").value;
if(value==""){
document.getElementById("showUserName").innerHTML="<fontsize=\"2\"color=red>用户名不能为空！！！</font>";
}else{
varxmlHttpRequest=null;
if(window.XMLHttpRequest){/*适用于IE7以上（包括IE7）的IE浏览器、火狐浏览器、谷歌浏览器和Opera浏览器*/
xmlHttpRequest=newXMLHttpRequest();//创建XMLHttpRequest
}elseif(window.ActiveXObject){/*适用于IE6.0以下（包括IE6.0）的IE浏览器*/
xmlHttpRequest=newActiveXObject("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("客户端已完全接收服务器端的处理响应。");
varresponseValue=xmlHttpRequest.responseText;
if(responseValue==1){
document.getElementById("showUserName").innerHTML="<fontsize=\"2\"color=\"red\">用户名已被使用！</font>";
}elseif(responseValue==2){
document.getElementById("showUserName").innerHTML="<fontsize=\"2\"color=\"green\">用户名有效！！！</font>";
}
}else{//与Servlet交互出现问题
document.getElementById("showUserName").innerHTML="<fontsize=\"2\"color=\"red\">请求发送失败！</font>";
}
}
};
if(xmlHttpRequest.readyState==0){
xmlHttpRequest.open("get","<%=basePath%>AjaxCheckUserNameServlet?userName="+value,true);//第二步：完成请求初始化，提出请求。open方法中的三个参数分别是：请求方式、路径、是否异步（true表示异步，false表示同步）
}
}
}
</script>
</head>
<body>
<centerstyle="margin-top:10%"><fontstyle="color:red;font-size:18pt;font-weight:bold;">使用的servlet中的doGet方法</font><br><br>
用户名：<inputtype="text"id="userName"name="userName"size="27"onblur="checkUserName();">
<fontsize="2"id="showUserName">*用户名必填，具有唯一性。</font>
</center>
</body>
</html>
代码3demo2.jsp文件：
<%@pagelanguage="java"contentType="text/html;charset=UTF-8"pageEncoding="UTF-8"%>
<%
StringbasePath=request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+request.getContextPath()+"/";
%>
<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN">
<html>
<head>
<title>使用的servlet中的doPost方法</title>
<scripttype="text/javascript">
functioncheckUserName(){
varvalue=document.getElementById("userName").value;
if(value==""){
document.getElementById("showUserName").innerHTML="<fontsize=\"2\"color=red>用户名不能为空！！！</font>";
}else{
varxmlHttpRequest=null;
if(window.XMLHttpRequest){/*适用于IE7以上（包括IE7）的IE浏览器、火狐浏览器、谷歌浏览器和Opera浏览器*/
xmlHttpRequest=newXMLHttpRequest();//创建XMLHttpRequest
}elseif(window.ActiveXObject){/*适用于IE6.0以下（包括IE6.0）的IE浏览器*/
xmlHttpRequest=newActiveXObject("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("客户端已完全接收服务器端的处理响应。");
varresponseValue=xmlHttpRequest.responseText;
if(responseValue==1){
document.getElementById("showUserName").innerHTML="<fontsize=\"2\"color=\"red\">用户名已被使用！</font>";
}elseif(responseValue==2){
document.getElementById("showUserName").innerHTML="<fontsize=\"2\"color=\"green\">用户名有效！！！</font>";
}
}else{//与Servlet交互出现问题
document.getElementById("showUserName").innerHTML="<fontsize=\"2\"color=\"red\">请求发送失败！</font>";
}
}
};
if(xmlHttpRequest.readyState==0){
xmlHttpRequest.open("post","<%=basePath%>AjaxCheckUserNameServlet?userName="+value,true);//第二步：完成请求初始化，提出请求。open方法中的三个参数分别是：请求方式、路径、是否异步（true表示异步，false表示同步）
}
}
}
</script>
</head>
<body>
<centerstyle="margin-top:10%"><fontcolor="red"size="5"><strong>使用的servlet中的doPost方法</strong></font><br><br>
用户名：<inputtype="text"id="userName"name="userName"size="27"onblur="checkUserName()">
<fontsize=2id="showUserName">*用户名必填，具有唯一性。</font>
</center>
</body>
</html>
代码4AjaxCheckUserNameServlet.java文件：
packagecom.ghj.packagofserlet;
importjava.io.IOException;
importjava.io.PrintWriter;
importjavax.servlet.ServletException;
importjavax.servlet.http.HttpServlet;
importjavax.servlet.http.HttpServletRequest;
importjavax.servlet.http.HttpServletResponse;
publicclassAjaxCheckUserNameServletextendsHttpServlet{
privatestaticfinallongserialVersionUID=6387744976765210524L;
/**
*处理demo1.jsp中异步验证
*
*@authorGaoHuanjie
*/
publicvoiddoGet(HttpServletRequestrequest,HttpServletResponseresponse)throwsServletException,IOException{
try{
response.setCharacterEncoding("UTF-8");
request.setCharacterEncoding("UTF-8");
PrintWriterout=response.getWriter();
//System.out.println(1/0);//故意出现异常，以检查demo1.jsp中xmlHttpRequest.status!=200的分支语句是否可用
StringuserName=request.getParameter("userName");//获取“用户名”
System.out.println("处理demo1.jsp中异步验证，用户名为："+userName);
if("admin".equals(userName)){
out.print("1");//“1”表示用户名不可用。
}else{
out.print("2");//“2”表示用户名可用。
}
out.flush();
out.close();
}catch(Exceptione){
e.printStackTrace();
response.setStatus(405);
}
}
/**
*处理demo2.jsp中异步验证
*
*@authorGaoHuanjie
*/
publicvoiddoPost(HttpServletRequestrequest,HttpServletResponseresponse)throwsServletException,IOException{
try{
response.setCharacterEncoding("UTF-8");
request.setCharacterEncoding("UTF-8");
PrintWriterout=response.getWriter();
//System.out.println(1/0);//故意出现异常，以检查demo2.jsp中xmlHttpRequest.status!=200的分支语句是否可用
StringuserName=request.getParameter("userName");//获取“用户名”
System.out.println("处理demo2.jsp中异步验证，用户名为："+userName);
if("admin".equals(userName)){
out.print("1");//“1”表示用户名不可用。
}else{
out.print("2");//“2”表示用户名可用。
}
out.flush();
out.close();
}catch(Exceptione){
e.printStackTrace();
response.setStatus(405);
}
}
}
代码5web.xml文件：
<?xmlversion="1.0"encoding="UTF-8"?> <web-appxmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"id="WebApp_ID"version="2.5"> <servlet> <servlet-name>AjaxCheckUserNameServlet</servlet-name> <servlet-class>com.ghj.packagofserlet.AjaxCheckUserNameServlet</servlet-class> </servlet> <servlet-mapping> <servlet-name>AjaxCheckUserNameServlet</servlet-name> <url-pattern>/AjaxCheckUserNameServlet</url-pattern> </servlet-mapping> <welcome-file-list> <welcome-file>index.jsp</welcome-file> </welcome-file-list> </web-app>
以上就是使用传统方法实现异步校验的详细代码，希望对大家的学习有所帮助。