詳解javascript傳統方法實現非同步校驗_javascript技巧-js教程-PHP中文網

首頁

web前端

js教程

詳解javascript傳統方法實現非同步校驗_javascript技巧

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:18 PM

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&#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>

登入後複製

代碼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&#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>

登入後複製

程式碼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檔：

<&#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>

登入後複製

以上就是使用傳統方法實現非同步校驗的詳細程式碼，希望對大家的學習有所幫助。

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

人工智慧驅動的應用程序，用於創建逼真的裸體照片

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

免費脫衣圖片

Clothoff.io

AI脫衣器

Video Face Swap

使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！

熱工具

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

中文版，非常好用

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

Java教學

1664

CakePHP 教程

1421

Laravel 教程

1316

PHP教程

1266

C# 教程

1239

Related knowledge

如何使用WebSocket和JavaScript實現線上語音辨識系統 Dec 17, 2023 pm 02:54 PM

如何使用WebSocket和JavaScript實現線上語音辨識系統引言：隨著科技的不斷發展，語音辨識技術已成為了人工智慧領域的重要組成部分。而基於WebSocket和JavaScript實現的線上語音辨識系統，具備了低延遲、即時性和跨平台的特點，成為了廣泛應用的解決方案。本文將介紹如何使用WebSocket和JavaScript來實現線上語音辨識系

WebSocket與JavaScript：實現即時監控系統的關鍵技術 Dec 17, 2023 pm 05:30 PM

WebSocket與JavaScript：實現即時監控系統的關鍵技術引言：隨著互聯網技術的快速發展，即時監控系統在各個領域中得到了廣泛的應用。而實現即時監控的關鍵技術之一就是WebSocket與JavaScript的結合使用。本文將介紹WebSocket與JavaScript在即時監控系統中的應用，並給出程式碼範例，詳細解釋其實作原理。一、WebSocket技

如何利用JavaScript和WebSocket實現即時線上點餐系統 Dec 17, 2023 pm 12:09 PM

如何利用JavaScript和WebSocket實現即時線上點餐系統介紹：隨著網路的普及和技術的進步，越來越多的餐廳開始提供線上點餐服務。為了實現即時線上點餐系統，我們可以利用JavaScript和WebSocket技術。 WebSocket是一種基於TCP協定的全雙工通訊協議，可實現客戶端與伺服器的即時雙向通訊。在即時線上點餐系統中，當使用者選擇菜餚並下訂單

如何使用WebSocket和JavaScript實現線上預約系統 Dec 17, 2023 am 09:39 AM

如何使用WebSocket和JavaScript實現線上預約系統在當今數位化的時代，越來越多的業務和服務都需要提供線上預約功能。而實現一個高效、即時的線上預約系統是至關重要的。本文將介紹如何使用WebSocket和JavaScript來實作一個線上預約系統，並提供具體的程式碼範例。一、什麼是WebSocketWebSocket是一種在單一TCP連線上進行全雙工

JavaScript與WebSocket：打造高效率的即時天氣預報系統 Dec 17, 2023 pm 05:13 PM

JavaScript和WebSocket：打造高效的即時天氣預報系統引言：如今，天氣預報的準確性對於日常生活以及決策制定具有重要意義。隨著技術的發展，我們可以透過即時獲取天氣數據來提供更準確可靠的天氣預報。在本文中，我們將學習如何使用JavaScript和WebSocket技術，來建立一個高效的即時天氣預報系統。本文將透過具體的程式碼範例來展示實現的過程。 We

簡易JavaScript教學：取得HTTP狀態碼的方法 Jan 05, 2024 pm 06:08 PM

JavaScript教學：如何取得HTTP狀態碼，需要具體程式碼範例前言：在Web開發中，經常會涉及到與伺服器進行資料互動的場景。在與伺服器進行通訊時，我們經常需要取得傳回的HTTP狀態碼來判斷操作是否成功，並根據不同的狀態碼來進行對應的處理。本篇文章將教你如何使用JavaScript來取得HTTP狀態碼，並提供一些實用的程式碼範例。使用XMLHttpRequest

javascript如何使用insertBefore Nov 24, 2023 am 11:56 AM

用法：在JavaScript中，insertBefore()方法用於在DOM樹中插入一個新的節點。這個方法需要兩個參數：要插入的新節點和參考節點（即新節點將要插入的位置的節點）。

JavaScript與WebSocket：打造高效率的即時影像處理系統 Dec 17, 2023 am 08:41 AM

JavaScript是一種廣泛應用於Web開發的程式語言，而WebSocket則是一種用於即時通訊的網路協定。結合二者的強大功能，我們可以打造一個高效率的即時影像處理系統。本文將介紹如何利用JavaScript和WebSocket來實作這個系統，並提供具體的程式碼範例。首先，我們需要明確指出即時影像處理系統的需求和目標。假設我們有一個攝影機設備，可以擷取即時的影像數

See all articles

詳解javascript傳統方法實現非同步校驗_javascript技巧

熱AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

熱門文章

熱工具

記事本++7.3.1

SublimeText3漢化版

禪工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

熱門話題