學習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>用戶名不能為空?。。?lt;/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>用戶名不能為空！?。?lt;/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>
以上就是使用傳統方法實現異步校驗的詳細代碼，希望對大家的學習有所幫助。
新聞熱點
疑難解答
