詳解javascript傳統(tǒng)方法實(shí)現(xiàn)異步校驗(yàn)
更新時(shí)間：2016年01月22日 11:46:29 作者：不動(dòng)聲色的蝸牛
這篇文章主要為大家介紹了javascript實(shí)現(xiàn)異步校驗(yàn)的方法，感興趣的小伙伴們可以參考一下
學(xué)習(xí)JavaScript異步校驗(yàn)時(shí)往往是從最傳統(tǒng)的XMLHttpRequest學(xué)起，本文來談一下對傳統(tǒng)校驗(yàn)的認(rèn)識：
代碼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>如何使用傳統(tǒng)方法異步驗(yàn)證用戶名的唯一性</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;">如何使用傳統(tǒng)方法異步驗(yàn)證用戶名的唯一性</font></center><br>
例子一：<input type="button" value="例子一" onclick="goDemo('demo1.jsp');"/><br><br>
例子二：<input type="button" value="例子二" onclick="goDemo('demo2.jsp');"/><br><br>
例子一與例子二的區(qū)別：兩者都實(shí)現(xiàn)了使用傳統(tǒng)方法異步驗(yàn)證用戶名的唯一性的功能，區(qū)別在于使用的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();//創(chuàng)建XMLHttpRequest
}else if(window.ActiveXObject){/*適用于IE6.0以下（包括IE6.0）的IE瀏覽器*/
xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
}//第一步：創(chuàng)建XMLHttpRequest對象，請求未初始化
xmlHttpRequest.onreadystatechange = function (){//readyState值發(fā)生改變時(shí)XMLHttpRequest對象激發(fā)一個(gè)readystatechange事件,進(jìn)而調(diào)用后面的函數(shù)
if(xmlHttpRequest.readyState==1){
xmlHttpRequest.send();//第三步：發(fā)送請求，也可以為xmlHttpRequest.send(null)
}
if(xmlHttpRequest.readyState==2){
console.log("send()方法已執(zhí)行，請求已發(fā)送到服務(wù)器端，但是客戶端還沒有收到服務(wù)器端的響應(yīng)。");
}
if(xmlHttpRequest.readyState==3){
console.log("已經(jīng)接收到HTTP響應(yīng)頭部信息，但是消息體部分還沒有完全接收結(jié)束。");
}
if(xmlHttpRequest.readyState==4){//客戶端接收服務(wù)器端信息完畢。第四步：處理服務(wù)器端發(fā)回來的響應(yīng)信息
if(xmlHttpRequest.status==200){//與Servlet成功交互
console.log("客戶端已完全接收服務(wù)器端的處理響應(yīng)。");
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交互出現(xiàn)問題
document.getElementById("showUserName").innerHTML="<font size=\"2\" color=\"red\">請求發(fā)送失??！</font>";
}
}
};
if(xmlHttpRequest.readyState==0){
xmlHttpRequest.open("get","<%=basePath%>AjaxCheckUserNameServlet?userName="+value,true);//第二步：完成請求初始化，提出請求。open方法中的三個(gè)參數(shù)分別是：請求方式、路徑、是否異步（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();//創(chuàng)建XMLHttpRequest
}else if(window.ActiveXObject){/*適用于IE6.0以下（包括IE6.0）的IE瀏覽器*/
xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
}//第一步：創(chuàng)建XMLHttpRequest對象，請求未初始化
xmlHttpRequest.onreadystatechange = function (){//readyState值發(fā)生改變時(shí)XMLHttpRequest對象激發(fā)一個(gè)readystatechange事件,進(jìn)而調(diào)用后面的函數(shù)
if(xmlHttpRequest.readyState==1){
xmlHttpRequest.send();//第三步：發(fā)送請求，也可以為xmlHttpRequest.send(null)
}
if(xmlHttpRequest.readyState==2){
console.log("send()方法已執(zhí)行，請求已發(fā)送到服務(wù)器端，但是客戶端還沒有收到服務(wù)器端的響應(yīng)。");
}
if(xmlHttpRequest.readyState==3){
console.log("已經(jīng)接收到HTTP響應(yīng)頭部信息，但是消息體部分還沒有完全接收結(jié)束。");
}
if(xmlHttpRequest.readyState==4){//客戶端接收服務(wù)器端信息完畢。第四步：處理服務(wù)器端發(fā)回來的響應(yīng)信息
if(xmlHttpRequest.status==200){//與Servlet成功交互
console.log("客戶端已完全接收服務(wù)器端的處理響應(yīng)。");
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交互出現(xiàn)問題
document.getElementById("showUserName").innerHTML="<font size=\"2\" color=\"red\">請求發(fā)送失??！</font>";
}
}
};
if(xmlHttpRequest.readyState==0){
xmlHttpRequest.open("post","<%=basePath%>AjaxCheckUserNameServlet?userName="+value,true);//第二步：完成請求初始化，提出請求。open方法中的三個(gè)參數(shù)分別是：請求方式、路徑、是否異步（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中異步驗(yàn)證
*
* @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);//故意出現(xiàn)異常，以檢查demo1.jsp中xmlHttpRequest.status!=200的分支語句是否可用
String userName=request.getParameter("userName");//獲取“用戶名”
System.out.println("處理demo1.jsp中異步驗(yàn)證，用戶名為："+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中異步驗(yàn)證
*
* @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);//故意出現(xiàn)異常，以檢查demo2.jsp中xmlHttpRequest.status!=200的分支語句是否可用
String userName=request.getParameter("userName");//獲取“用戶名”
System.out.println("處理demo2.jsp中異步驗(yàn)證，用戶名為："+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>
以上就是使用傳統(tǒng)方法實(shí)現(xiàn)異步校驗(yàn)的詳細(xì)代碼，希望對大家的學(xué)習(xí)有所幫助。
您可能感興趣的文章:
相關(guān)文章
JS聲明式函數(shù)與賦值式函數(shù)實(shí)例分析
這篇文章主要介紹了JS聲明式函數(shù)與賦值式函數(shù),結(jié)合實(shí)例形式分析了JS函數(shù)解析的流程與執(zhí)行順序,需要的朋友可以參考下2016-12-12
這篇文章主要介紹了js獲取今天、昨天、明天的日期函數(shù)代碼,需要的朋友可以參考下2023-05-05
詳解JavaScript添加給定的標(biāo)簽選項(xiàng)
這篇文章給大家分享了JavaScript實(shí)現(xiàn)添加給定的標(biāo)簽選項(xiàng)的相關(guān)知識點(diǎn)內(nèi)容以及代碼實(shí)例，有興趣的朋友們參考下。2018-09-09
本文給大家分享使用js和css3制作的炫酷彈窗效果，整個(gè)背景模糊，要比純色加透明度高大上好多。對js彈窗效果感興趣的朋友一起學(xué)習(xí)吧2016-11-11
一步一步的了解webpack4的splitChunk插件(小結(jié))
這篇文章主要介紹了一步一步的了解webpack4的splitChunk插件(小結(jié))，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-09-09
JS+CSS實(shí)現(xiàn)仿觸屏手機(jī)撥號盤界面及功能模擬完整實(shí)例
這篇文章主要介紹了JS+CSS實(shí)現(xiàn)仿觸屏手機(jī)撥號盤界面及功能模擬完整實(shí)例,可以實(shí)現(xiàn)逼真模擬手機(jī)撥號盤界面并實(shí)現(xiàn)點(diǎn)擊輸入對應(yīng)號碼的功能,需要的朋友可以參考下2015-05-05
document.createElement("A")比較不錯(cuò)的屬性
document.createElement("A")比較不錯(cuò)的屬性...2007-08-08
Javascript實(shí)現(xiàn)數(shù)組中的元素上下移動(dòng)
這篇文章主要給大家介紹了Javascript實(shí)現(xiàn)數(shù)組中的元素上下移動(dòng)的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起看看吧。2017-04-04
javascript實(shí)現(xiàn)base64 md5 sha1 密碼加密
本篇文章給大家介紹了javascript實(shí)現(xiàn)密碼加密，通過base64、md5、sha1文件，調(diào)用相關(guān)方法實(shí)現(xiàn)密碼加密，非常簡單，需要的朋友可以參考下2015-09-09
js數(shù)組常用操作方法小結(jié)(增加,刪除,合并,分割等)
這篇文章主要介紹了js數(shù)組常用操作方法,結(jié)合實(shí)例總結(jié)了javascript數(shù)組的增加、刪除、合并、分割等操作技巧,需要的朋友可以參考下2016-08-08