AJAX之表单即时验证
生活随笔
收集整理的這篇文章主要介紹了
AJAX之表单即时验证
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
最近互聯網上比較火熱的話題當然是關于WEB2.0的應用，其中AJAX又是WEB2.0的核心之一。AJAX是Asynchronous JavaScript and XML 的縮寫。它并不是一門新的語言或技術，它實際上是幾項技術按一定的方式組合在一在同共的協作中發揮各自的作用，它包括??
使用XHTML和CSS標準化呈現；??
使用DOM實現動態顯示和交互；??
使用XML和XSLT進行數據交換與處理；??
使用XMLHttpRequest進行異步數據讀取；??
最后用JavaScript綁定和處理所有數據；??
Ajax的工作原理相當于在用戶和服務器之間加了—個中間層，使用戶操作與服務器響應異步化。這樣把以前的一些服務器負擔的工作轉嫁到客戶端，利于客戶端閑置的處理能力來處理，減輕服務器和帶寬的負擔，從而達到節約ISP的空間及帶寬租用成本的目的。??
我們以兩個驗證通行證帳號是否存在的例子來講述AJAX在實際中的應用：??
(1) 用文本字符串的方式返回服務器的響應來驗證網易通行證帳號是否存在；??
(2) 以XMLDocument對象方式返回響應來驗證金山通行證帳號是否存在；??
首先，我們需要用JavaScript來創建XMLHttpRequest 類向服務器發送一個HTTP請求， XMLHttpRequest 類首先由Internet Explorer以ActiveX對象引入，被稱為XMLHTTP。 后來Mozilla、Netscape、Safari 和其他瀏覽器也提供了XMLHttpRequest類，不過它們創建XMLHttpRequest類的方法不同。??
對于Internet Explorer瀏覽器，創建XMLHttpRequest 方法如下：??
xmlhttp_request = new ActiveXObject("Msxml2.XMLHTTP.3.0"); //3.0或4.0, 5.0??
xmlhttp_request = new ActiveXObject("Msxml2.XMLHTTP");??
xmlhttp_request = new ActiveXObject("Microsoft.XMLHTTP");??
由于在不同Internet Explorer瀏覽器中XMLHTTP版本可能不一致，為了更好的兼容不同版本的Internet Explorer瀏覽器，因此我們需要根據不同版本的Internet Explorer瀏覽器來創建XMLHttpRequest類，上面代碼就是根據不同的Internet Explorer瀏覽器創建XMLHttpRequest類的方法。??
對于Mozilla、Netscape、Safari等瀏覽器，創建XMLHttpRequest 方法如下：??
xmlhttp_request = new XMLHttpRequest();??
如果服務器的響應沒有XML mime-type header，某些Mozilla瀏覽器可能無法正常工作。 為了解決這個問題，如果服務器響應的header不是text/xml，可以調用其它方法修改該header。??
xmlhttp_request = new XMLHttpRequest();??
xmlhttp_request.overrideMimeType('text/xml');??
在實際應用中，為了兼容多種不同版本的瀏覽器，一般將創建XMLHttpRequest類的方法寫成如下形式：??
try{??
if( window.ActiveXObject ){??
for( var i = 5; i; i-- ){??
try{??
if( i == 2 ){??
xmlhttp_request = new ActiveXObject( "Microsoft.XMLHTTP" );??
}else{??
xmlhttp_request = new ActiveXObject( "Msxml2.XMLHTTP." + i + ".0" );??
}??
xmlhttp_request.setRequestHeader("Content-Type","text/xml");??
xmlhttp_request.setRequestHeader("Content-Type","gb2312");??
break;}??
catch(e){??
xmlhttp_request = false;??
}??
}??
}else if( window.XMLHttpRequest ){??
xmlhttp_request = new XMLHttpRequest();??
if (xmlhttp_request.overrideMimeType) {??
xmlhttp_request.overrideMimeType('text/xml');??
}??
}??
}catch(e){??
xmlhttp_request = false;??
}??
在定義了如何處理響應后，就要發送請求了。可以調用HTTP請求類的open()和send()方法，如下所示：??
xmlhttp_request.open('GET', URL, true);??
xmlhttp_request.send(null);??
open()的第一個參數是HTTP請求方式—GET，POST或任何服務器所支持的您想調用的方式。 按照HTTP規范，該參數要大寫；否則，某些瀏覽器(如Firefox)可能無法處理請求。??
第二個參數是請求頁面的URL。??
第三個參數設置請求是否為異步模式。如果是TRUE，JavaScript函數將繼續執行，而不等待服務器響應。這就是"AJAX"中的"A"。??
用JavaScript來創建XMLHttpRequest 類向服務器發送一個HTTP請求后，接下來要決定當收到服務器的響應后，需要做什么。這需要告訴HTTP請求對象用哪一個JavaScript函數處理這個響應。可以將對象的onreadystatechange屬性設置為要使用的JavaScript的函數名，如下所示：??
xmlhttp_request.onreadystatechange =FunctionName;??
FunctionName是用JavaScript創建的函數名，注意不要寫成FunctionName()，當然我們也可以直接將JavaScript代碼創建在onreadystatechange之后，例如：??
xmlhttp_request.onreadystatechange = function(){??
// JavaScript代碼段??
};??
在這個函數中。首先要檢查請求的狀態。只有當一個完整的服務器響應已經收到了，函數才可以處理該響應。XMLHttpRequest 提供了readyState屬性來對服務器響應進行判斷。??
readyState的取值如下：??
0 (未初始化)??
1 (正在裝載)??
2 (裝載完畢)??
3 (交互中)??
4 (完成)??
所以只有當readyState=4時，一個完整的服務器響應已經收到了，函數才可以處理該響應。具體代碼如下：??
if (http_request.readyState == 4) {??
// 收到完整的服務器響應??
} else {??
// 沒有收到完整的服務器響應??
}??
當readyState=4時，一個完整的服務器響應已經收到了，接著，函數會檢查HTTP服務器響應的狀態值。完整的狀態取值可參見W3C文檔。當HTTP服務器響應的值為200時，表示狀態正常。??
在檢查完請求的狀態值和響應的HTTP狀態值后，就可以處理從服務器得到的數據了。有兩種方式可以得到這些數據：??
(1) 以文本字符串的方式返回服務器的響應??
(2) 以XMLDocument對象方式返回響應??
實例一： 用文本字符串的方式返回服務器的響應來驗證網易通行證帳號是否存在??
首先，我們登陸網易通行證注冊頁面，可以看到檢測用戶名是否存在是將用戶名提交給checkssn.jsp頁面進行判斷，格式為：??
reg.163.com/register/checkssn.jsp?username=用戶名??
根據上面講到的方法，我們可以利用AJAX技術對網易通行證用戶名進行檢測：??
第一步：新建一個基于Xhtml標準的網頁，在<head>區域插入Javascript函數如下：??
<script type="text/javascript" language="javascript">??
function getXMLRequester( ){??
var xmlhttp_request = false;??
try{??
if( window.ActiveXObject ){??
for( var i = 5; i; i-- ){??
try{??
if( i == 2 ){??
xmlhttp_request = new ActiveXObject( "Microsoft.XMLHTTP" );??
}else{??
xmlhttp_request = new ActiveXObject( "Msxml2.XMLHTTP." + i + ".0" );??
xmlhttp_request.setRequestHeader("Content-Type","text/xml");??
xmlhttp_request.setRequestHeader("Content-Type","gb2312");??
}??
break;}??
catch(e){??
xmlhttp_request = false;??
}??
}??
}else if( window.XMLHttpRequest ){??
xmlhttp_request = new XMLHttpRequest();??
if (xmlhttp_request.overrideMimeType) {??
xmlhttp_request.overrideMimeType('text/xml');??
}??
}??
}catch(e){??
xmlhttp_request = false;??
}??
return xmlhttp_request ;??
}??
function IDRequest(n) {//定義收到服務器的響應后需要執行的JavaScript函數??
url=n+document.getElementById('163id').value;//定義網址參數??
xmlhttp_request=getXMLRequester();//調用創建XMLHttpRequest的函數??
xmlhttp_request.onreadystatechange = doContents;//調用doContents函數??
xmlhttp_request.open('GET', url, true);??
xmlhttp_request.send(null);??
}??
function doContents() {??
if (xmlhttp_request.readyState == 4) {// 收到完整的服務器響應??
if (xmlhttp_request.status == 200) {//HTTP服務器響應的值OK??
document.getElementById('message').innerHTML = xmlhttp_request.responseText;??
//將服務器返回的字符串寫到頁面中ID為message的區域??
} else {??
alert(http_request.status);??
}??
}??
}??
</script>??
在<body>區域建立一個文本框，id為163id??
<input type="text" id="163id" onpropertychange="IDRequest('http://reg.163.com/register/checkssn.jsp?username=')" />??
再建一個id為messsge的空白區域用來顯示返回字符串(也可以通過Javascript函數截取一部分字符串顯示)：??
<div id="message"></div>??
這樣，一個基于AJAX技術的用戶名檢測頁面就做好了，不過這個頁面將返回服務器響應生成頁面的所有字符串，當然還可以對返回的字符串進行一些操作，便于應用到不同的需要當中。??
實例二： 以XMLDocument對象方式返回響應來驗證金山通行證帳號是否存在??
在上面的例子中，當服務器對HTTP請求的響應被收到后，我們會調用請求對象的reponseText屬性。該屬性包含了服務器返回響應文件的內容?，F在我們以XMLDocument對象方式返回響應，此時將不再需要reponseText屬性而使用responseXML屬性。??
首先登陸金山通行證注冊頁面，我們發現金山通行證用戶名的檢測方式為：??
pass.kingsoft.com/ksgweb/jsp/login/uid.jsp?uid=用戶名,并且返回XML數據:??
<?xml version="1.0" encoding="UTF-8" standalone="yes" ?>??
<response>??
<method>isExistedUid</method>??
<result>-2</result>??
</response>??
當result值為-1時表示此用戶名已被注冊，當result值為-2時表示此用戶名尚未注冊，因此通過對result值的判斷可以知道用戶名是否被注冊。??
對上例代碼進行修改：??
首先找到??
document.getElementById('message').innerHTML = xmlhttp_request.responseText;??
改為:??
var response = xmlhttp_request.responseXML.documentElement;??
var result = response.getElementsByTagName('result')[0].firstChild.data;//返回result節點數據??
if(result ==-2){??
document.getElementById('message').innerHTML = "用戶名"+document.getElementById('163id').value+"尚未注冊";??
}??
else if(result ==-1){??
document.getElementById('message').innerHTML = "對不起,用戶名"+document.getElementById('163id').value+"已經注冊";??
}??
通過以上兩個實例說明了AJAX的客戶端基礎應用，采用的是網易和金山現成的服務器端程序，當然為了開發合適自己頁面的程序，還需要對自己編寫服務器端程序，這設計到程序語言及數據庫的操作，對于有一定程序基礎的讀者一定不是很難的事情，本文著重討論了客戶端AJAX的應用體驗，廣大讀者可以根據本文講的原理結合各種樣式表現手法作出絢麗多彩的應用，希望本文能夠起到拋磚引玉的作用。
使用XHTML和CSS標準化呈現；??
使用DOM實現動態顯示和交互；??
使用XML和XSLT進行數據交換與處理；??
使用XMLHttpRequest進行異步數據讀取；??
最后用JavaScript綁定和處理所有數據；??
Ajax的工作原理相當于在用戶和服務器之間加了—個中間層，使用戶操作與服務器響應異步化。這樣把以前的一些服務器負擔的工作轉嫁到客戶端，利于客戶端閑置的處理能力來處理，減輕服務器和帶寬的負擔，從而達到節約ISP的空間及帶寬租用成本的目的。??
我們以兩個驗證通行證帳號是否存在的例子來講述AJAX在實際中的應用：??
(1) 用文本字符串的方式返回服務器的響應來驗證網易通行證帳號是否存在；??
(2) 以XMLDocument對象方式返回響應來驗證金山通行證帳號是否存在；??
首先，我們需要用JavaScript來創建XMLHttpRequest 類向服務器發送一個HTTP請求， XMLHttpRequest 類首先由Internet Explorer以ActiveX對象引入，被稱為XMLHTTP。 后來Mozilla、Netscape、Safari 和其他瀏覽器也提供了XMLHttpRequest類，不過它們創建XMLHttpRequest類的方法不同。??
對于Internet Explorer瀏覽器，創建XMLHttpRequest 方法如下：??
xmlhttp_request = new ActiveXObject("Msxml2.XMLHTTP.3.0"); //3.0或4.0, 5.0??
xmlhttp_request = new ActiveXObject("Msxml2.XMLHTTP");??
xmlhttp_request = new ActiveXObject("Microsoft.XMLHTTP");??
由于在不同Internet Explorer瀏覽器中XMLHTTP版本可能不一致，為了更好的兼容不同版本的Internet Explorer瀏覽器，因此我們需要根據不同版本的Internet Explorer瀏覽器來創建XMLHttpRequest類，上面代碼就是根據不同的Internet Explorer瀏覽器創建XMLHttpRequest類的方法。??
對于Mozilla、Netscape、Safari等瀏覽器，創建XMLHttpRequest 方法如下：??
xmlhttp_request = new XMLHttpRequest();??
如果服務器的響應沒有XML mime-type header，某些Mozilla瀏覽器可能無法正常工作。 為了解決這個問題，如果服務器響應的header不是text/xml，可以調用其它方法修改該header。??
xmlhttp_request = new XMLHttpRequest();??
xmlhttp_request.overrideMimeType('text/xml');??
在實際應用中，為了兼容多種不同版本的瀏覽器，一般將創建XMLHttpRequest類的方法寫成如下形式：??
try{??
if( window.ActiveXObject ){??
for( var i = 5; i; i-- ){??
try{??
if( i == 2 ){??
xmlhttp_request = new ActiveXObject( "Microsoft.XMLHTTP" );??
}else{??
xmlhttp_request = new ActiveXObject( "Msxml2.XMLHTTP." + i + ".0" );??
}??
xmlhttp_request.setRequestHeader("Content-Type","text/xml");??
xmlhttp_request.setRequestHeader("Content-Type","gb2312");??
break;}??
catch(e){??
xmlhttp_request = false;??
}??
}??
}else if( window.XMLHttpRequest ){??
xmlhttp_request = new XMLHttpRequest();??
if (xmlhttp_request.overrideMimeType) {??
xmlhttp_request.overrideMimeType('text/xml');??
}??
}??
}catch(e){??
xmlhttp_request = false;??
}??
在定義了如何處理響應后，就要發送請求了。可以調用HTTP請求類的open()和send()方法，如下所示：??
xmlhttp_request.open('GET', URL, true);??
xmlhttp_request.send(null);??
open()的第一個參數是HTTP請求方式—GET，POST或任何服務器所支持的您想調用的方式。 按照HTTP規范，該參數要大寫；否則，某些瀏覽器(如Firefox)可能無法處理請求。??
第二個參數是請求頁面的URL。??
第三個參數設置請求是否為異步模式。如果是TRUE，JavaScript函數將繼續執行，而不等待服務器響應。這就是"AJAX"中的"A"。??
用JavaScript來創建XMLHttpRequest 類向服務器發送一個HTTP請求后，接下來要決定當收到服務器的響應后，需要做什么。這需要告訴HTTP請求對象用哪一個JavaScript函數處理這個響應。可以將對象的onreadystatechange屬性設置為要使用的JavaScript的函數名，如下所示：??
xmlhttp_request.onreadystatechange =FunctionName;??
FunctionName是用JavaScript創建的函數名，注意不要寫成FunctionName()，當然我們也可以直接將JavaScript代碼創建在onreadystatechange之后，例如：??
xmlhttp_request.onreadystatechange = function(){??
// JavaScript代碼段??
};??
在這個函數中。首先要檢查請求的狀態。只有當一個完整的服務器響應已經收到了，函數才可以處理該響應。XMLHttpRequest 提供了readyState屬性來對服務器響應進行判斷。??
readyState的取值如下：??
0 (未初始化)??
1 (正在裝載)??
2 (裝載完畢)??
3 (交互中)??
4 (完成)??
所以只有當readyState=4時，一個完整的服務器響應已經收到了，函數才可以處理該響應。具體代碼如下：??
if (http_request.readyState == 4) {??
// 收到完整的服務器響應??
} else {??
// 沒有收到完整的服務器響應??
}??
當readyState=4時，一個完整的服務器響應已經收到了，接著，函數會檢查HTTP服務器響應的狀態值。完整的狀態取值可參見W3C文檔。當HTTP服務器響應的值為200時，表示狀態正常。??
在檢查完請求的狀態值和響應的HTTP狀態值后，就可以處理從服務器得到的數據了。有兩種方式可以得到這些數據：??
(1) 以文本字符串的方式返回服務器的響應??
(2) 以XMLDocument對象方式返回響應??
實例一： 用文本字符串的方式返回服務器的響應來驗證網易通行證帳號是否存在??
首先，我們登陸網易通行證注冊頁面，可以看到檢測用戶名是否存在是將用戶名提交給checkssn.jsp頁面進行判斷，格式為：??
reg.163.com/register/checkssn.jsp?username=用戶名??
根據上面講到的方法，我們可以利用AJAX技術對網易通行證用戶名進行檢測：??
第一步：新建一個基于Xhtml標準的網頁，在<head>區域插入Javascript函數如下：??
<script type="text/javascript" language="javascript">??
function getXMLRequester( ){??
var xmlhttp_request = false;??
try{??
if( window.ActiveXObject ){??
for( var i = 5; i; i-- ){??
try{??
if( i == 2 ){??
xmlhttp_request = new ActiveXObject( "Microsoft.XMLHTTP" );??
}else{??
xmlhttp_request = new ActiveXObject( "Msxml2.XMLHTTP." + i + ".0" );??
xmlhttp_request.setRequestHeader("Content-Type","text/xml");??
xmlhttp_request.setRequestHeader("Content-Type","gb2312");??
}??
break;}??
catch(e){??
xmlhttp_request = false;??
}??
}??
}else if( window.XMLHttpRequest ){??
xmlhttp_request = new XMLHttpRequest();??
if (xmlhttp_request.overrideMimeType) {??
xmlhttp_request.overrideMimeType('text/xml');??
}??
}??
}catch(e){??
xmlhttp_request = false;??
}??
return xmlhttp_request ;??
}??
function IDRequest(n) {//定義收到服務器的響應后需要執行的JavaScript函數??
url=n+document.getElementById('163id').value;//定義網址參數??
xmlhttp_request=getXMLRequester();//調用創建XMLHttpRequest的函數??
xmlhttp_request.onreadystatechange = doContents;//調用doContents函數??
xmlhttp_request.open('GET', url, true);??
xmlhttp_request.send(null);??
}??
function doContents() {??
if (xmlhttp_request.readyState == 4) {// 收到完整的服務器響應??
if (xmlhttp_request.status == 200) {//HTTP服務器響應的值OK??
document.getElementById('message').innerHTML = xmlhttp_request.responseText;??
//將服務器返回的字符串寫到頁面中ID為message的區域??
} else {??
alert(http_request.status);??
}??
}??
}??
</script>??
在<body>區域建立一個文本框，id為163id??
<input type="text" id="163id" onpropertychange="IDRequest('http://reg.163.com/register/checkssn.jsp?username=')" />??
再建一個id為messsge的空白區域用來顯示返回字符串(也可以通過Javascript函數截取一部分字符串顯示)：??
<div id="message"></div>??
這樣，一個基于AJAX技術的用戶名檢測頁面就做好了，不過這個頁面將返回服務器響應生成頁面的所有字符串，當然還可以對返回的字符串進行一些操作，便于應用到不同的需要當中。??
實例二： 以XMLDocument對象方式返回響應來驗證金山通行證帳號是否存在??
在上面的例子中，當服務器對HTTP請求的響應被收到后，我們會調用請求對象的reponseText屬性。該屬性包含了服務器返回響應文件的內容?，F在我們以XMLDocument對象方式返回響應，此時將不再需要reponseText屬性而使用responseXML屬性。??
首先登陸金山通行證注冊頁面，我們發現金山通行證用戶名的檢測方式為：??
pass.kingsoft.com/ksgweb/jsp/login/uid.jsp?uid=用戶名,并且返回XML數據:??
<?xml version="1.0" encoding="UTF-8" standalone="yes" ?>??
<response>??
<method>isExistedUid</method>??
<result>-2</result>??
</response>??
當result值為-1時表示此用戶名已被注冊，當result值為-2時表示此用戶名尚未注冊，因此通過對result值的判斷可以知道用戶名是否被注冊。??
對上例代碼進行修改：??
首先找到??
document.getElementById('message').innerHTML = xmlhttp_request.responseText;??
改為:??
var response = xmlhttp_request.responseXML.documentElement;??
var result = response.getElementsByTagName('result')[0].firstChild.data;//返回result節點數據??
if(result ==-2){??
document.getElementById('message').innerHTML = "用戶名"+document.getElementById('163id').value+"尚未注冊";??
}??
else if(result ==-1){??
document.getElementById('message').innerHTML = "對不起,用戶名"+document.getElementById('163id').value+"已經注冊";??
}??
通過以上兩個實例說明了AJAX的客戶端基礎應用，采用的是網易和金山現成的服務器端程序，當然為了開發合適自己頁面的程序，還需要對自己編寫服務器端程序，這設計到程序語言及數據庫的操作，對于有一定程序基礎的讀者一定不是很難的事情，本文著重討論了客戶端AJAX的應用體驗，廣大讀者可以根據本文講的原理結合各種樣式表現手法作出絢麗多彩的應用，希望本文能夠起到拋磚引玉的作用。
轉載于:https://www.cnblogs.com/alon/archive/2009/04/17/1438273.html
總結
以上是生活随笔為你收集整理的AJAX之表单即时验证的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 浏览器打开出现证书错误_PADI 电子潜
- 下一篇： vant.dialog.alert什么方