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

前端技术 2023/09/04 JavaScript

学习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>

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

本文地址：https://www.stayed.cn/item/10715

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案