suchen

Heim >Web-Frontend >js-Tutorial >Detaillierte Erläuterung traditioneller JavaScript-Methoden zur Implementierung asynchroner Verification_Javascript-Fähigkeiten

Detaillierte Erläuterung traditioneller JavaScript-Methoden zur Implementierung asynchroner Verification_Javascript-Fähigkeiten

WBOY
WBOYOriginal
2016-05-16 15:18:471325Durchsuche

Wenn Sie die asynchrone JavaScript-Verifizierung lernen, beginnen Sie oft mit der traditionellsten XMLHttpRequest. In diesem Artikel geht es um das Verständnis der traditionellen Verifizierung:
Code 1index.jsp-Datei: 

<%@ 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>

Code 2demo1.jsp-Datei: 

<%@ 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&#63;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>

Code 3demo2.jsp-Datei: 

<%@ 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&#63;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>

Code 4AjaxCheckUserNameServlet.java-Datei: 

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); 
    } 
  } 
}

Code 5web.xml-Datei: 

<&#63;xml version="1.0" encoding="UTF-8"&#63;> 
<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>

Das Obige ist der detaillierte Code zur Implementierung der asynchronen Verifizierung mit herkömmlichen Methoden. Ich hoffe, er wird für das Lernen aller hilfreich sein.

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：JavaScript implementiert den Effekt, die Kaufmenge nachgeahmter Taobao-Produkte zu erhöhen oder zu verringern. Javascript-FähigkeitenNächster Artikel：JavaScript implementiert den Effekt, die Kaufmenge nachgeahmter Taobao-Produkte zu erhöhen oder zu verringern. Javascript-Fähigkeiten

In Verbindung stehende Artikel

Mehr sehen