详解javascript传统方法实现异步校验

2019-11-20 10:43:40

字体：大中小

来源：转载

供稿：网友

学习JavaScript异步校验时往往是从最传统的XMLHttpRequest学起，本文来谈一下对传统校验的认识：
代码1index.jsp文件：

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%   String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+request.getContextPath()+"/"; %> <!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 style="margin-top: 10%"><font style="color: red;font-size: 18pt;font-weight: bold;">如何使用传统方法异步验证用户名的唯一性</font></center><br>     例子一：<input type="button" value="例子一" onclick="goDemo('demo1.jsp');"/><br><br>     例子二：<input type="button" value="例子二" onclick="goDemo('demo2.jsp');"/><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()+"/"; %> <!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 style="margin-top: 10%"><font style="color: red;font-size: 18pt;font-weight: bold;">使用的servlet中的doGet方法</font><br><br>          用户名：<input type="text" id="userName" name="userName" size="27" onblur="checkUserName();">       <font size="2" id="showUserName"> *用户名必填，具有唯一性。</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()+"/"; %> <!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 style="margin-top: 10%"><font color="red" size="5"><strong>使用的servlet中的doPost方法</strong></font><br><br>          用户名：<input type="text" id="userName" name="userName" size="27" onblur="checkUserName()">       <font size=2 id="showUserName"> *用户名必填，具有唯一性。</font>     </center>   </body> </html>

代码4AjaxCheckUserNameServlet.java文件：

package com.ghj.packagofserlet;  import java.io.IOException; import java.io.PrintWriter;  import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse;  public class AjaxCheckUserNameServlet extends HttpServlet {    private static final long serialVersionUID = 6387744976765210524L;    /**    * 处理demo1.jsp中异步验证    *    * @author GaoHuanjie    */   public void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {     try{       response.setCharacterEncoding("UTF-8");       request.setCharacterEncoding("UTF-8");       PrintWriter out = response.getWriter();       //System.out.println(1/0);//故意出现异常，以检查demo1.jsp中xmlHttpRequest.status!=200的分支语句是否可用       String userName=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 (Exception e) {       e.printStackTrace();       response.setStatus(405);     }   }      /**    * 处理demo2.jsp中异步验证    *    * @author GaoHuanjie    */   public void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {     try{       response.setCharacterEncoding("UTF-8");       request.setCharacterEncoding("UTF-8");       PrintWriter out = response.getWriter();       //System.out.println(1/0);//故意出现异常，以检查demo2.jsp中xmlHttpRequest.status!=200的分支语句是否可用       String userName=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 (Exception e) {       e.printStackTrace();       response.setStatus(405);     }   } }

代码5web.xml文件：

<?xml version="1.0" encoding="UTF-8"?> <web-app xmlns: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>

以上就是使用传统方法实现异步校验的详细代码，希望对大家的学习有所帮助。

上一篇：prototype框架中美元符号$用法分析

下一篇：jquery.validate提示错误信息位置方法