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

时间：2021-05-25

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

代码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="用户名不能为空！！！"; }else{ var xmlHttpRequest = null; if(window.XMLHttpRequest){ xmlHttpRequest = new XMLHttpRequest();//创建XMLHttpRequest }else if(window.ActiveXObject){ 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=" 用户名已被使用！"; }else if(responseValue==2){ document.getElementById("showUserName").innerHTML=" 用户名有效！！！"; } }else{//与Servlet交互出现问题 document.getElementById("showUserName").innerHTML="请求发送失败！"; } } }; if(xmlHttpRequest.readyState==0){ xmlHttpRequest.open("get","<%=basePath%>AjaxCheckUserNameServlet?userName="+value,true);//第二步：完成请求初始化，提出请求。open方法中的三个参数分别是：请求方式、路径、是否异步（true表示异步，false表示同步） } } } </script> </head> <body> <center style="margin-top: 10%">使用的servlet中的doGet方法 用户名：<input type="text" id="userName" name="userName" size="27" onblur="checkUserName();"> *用户名必填，具有唯一性。 </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="用户名不能为空！！！"; }else{ var xmlHttpRequest = null; if(window.XMLHttpRequest){ xmlHttpRequest = new XMLHttpRequest();//创建XMLHttpRequest }else if(window.ActiveXObject){ 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=" 用户名已被使用！"; }else if(responseValue==2){ document.getElementById("showUserName").innerHTML=" 用户名有效！！！"; } }else{//与Servlet交互出现问题 document.getElementById("showUserName").innerHTML="请求发送失败！"; } } }; if(xmlHttpRequest.readyState==0){ xmlHttpRequest.open("post","<%=basePath%>AjaxCheckUserNameServlet?userName="+value,true);//第二步：完成请求初始化，提出请求。open方法中的三个参数分别是：请求方式、路径、是否异步（true表示异步，false表示同步） } } } </script> </head> <body> <center style="margin-top: 10%">使用的servlet中的doPost方法 用户名：<input type="text" id="userName" name="userName" size="27" onblur="checkUserName()"> *用户名必填，具有唯一性。 </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://e-file-list> </web-app>

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

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

相关文章

JavaScript实现信用卡校验方法

JS 实现计算器详解及实例代码（一）

Javascript 实现计算器时间功能详解及实例（二）

Extjs表单输入框异步校验的插件实现方法

javascript带回调函数的异步脚本载入方法实例分析