我們以兩個驗證通行證帳號是否存在的例子來講述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伺服器響應的值OKdocument.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屬性。該屬性包含了伺服器返迴響應檔案的內容。現在我們以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的應用體驗，廣大讀者可以根據本文講的原理結合各種樣式表現手法作出絢麗多彩的應用，希望本文能夠起到拋磚引玉的作用。
示範地址:
網易通行證查詢示範(AJAX): www.xiacong.com/test/163.htm
金山通行證查詢示範(AJAX): www.xiacong.com/test/j3.htm
附錄
(一) HTTP 1.1支援的狀態碼
100 Continue 初始的請求已經接受，客戶應當繼續發送請求的其餘部分
101 Switching Protocols 伺服器將遵從客戶的請求轉換到另外一種協議
200 OK 一切正常，對GET和POST請求的應答文檔跟在後面。
201 Created 伺服器已經建立了文檔，Location頭給出了它的URL。
202 Accepted 已經接受請求，但處理尚未完成。
203 Non-Authoritative Information 文檔已經正常地返回，但一些應答頭可能不正確，因為使用的是文檔的拷貝
204 No Content 沒有新文檔，瀏覽器應該繼續顯示原來的文檔。如果使用者定期地重新整理頁面，而Servlet可以確定使用者文檔足夠新，這個狀態碼是很有用的
205 Reset Content 沒有新的內容，但瀏覽器應該重設它所顯示的內容。用來強制瀏覽器清除表單輸入內容
206 Partial Content 客戶發送了一個帶有Range頭的GET請求，伺服器完成了它
300 Multiple Choices 客戶請求的文檔可以在多個位置找到，這些位置已經在返回的文檔內列出。如果伺服器要提出優先選擇，則應該在Location應答頭指明。
301 Moved Permanently 客戶請求的文檔在其他地方，新的URL在Location頭中給出，瀏覽器應該自動地訪問新的URL。
302 Found 類似於301，但新的URL應該被視為臨時性的替代，而不是永久性的。
303 See Other 類似於301/302，不同之處在於，如果原來的請求是POST，Location頭指定的重新導向目的文件應該通過GET提取
304 Not Modified 用戶端有緩衝的文檔並發出了一個條件性的請求（一般是提供If-Modified-Since頭表示客戶只想比指定日期更新的文檔）。伺服器告訴客戶，原來緩衝的文檔還可以繼續使用。
305 Use Proxy 客戶請求的文檔應該通過Location頭所指明的Proxy 伺服器提取
307 Temporary Redirect 和302（Found）相同。許多瀏覽器會錯誤地響應302應答進行重新導向，即使原來的請求是POST，即使它實際上只能在POST請求的應答是303時才能重新導向。由於這個原因，HTTP 1.1新增了307，以便更加清除地區分幾個狀態碼：當出現303應答時，瀏覽器可以跟隨重新導向的GET和POST請求；如果是307應答，則瀏覽器只能跟隨對GET請求的重新導向。
400 Bad Request 請求出現語法錯誤。
401 Unauthorized 客戶試圖未經授權訪問受密碼保護的頁面。應答中會包含一個WWW-Authenticate頭，瀏覽器據此顯示使用者名稱字/密碼對話方塊，然後在填寫合適的Authorization頭後再次發出請求。
403 Forbidden 資源不可用。
404 Not Found 無法找到指定位置的資源
405 Method Not Allowed 要求方法（GET、POST、HEAD、DELETE、PUT、TRACE等）對指定的資源不適用。
406 Not Acceptable 指定的資源已經找到，但它的MIME類型和客戶在Accpet頭中所指定的不相容
407 Proxy Authentication Required 類似於401，表示客戶必須先經過Proxy 伺服器的授權。
408 Request Timeout 在伺服器許可的等待時間內，客戶一直沒有發出任何請求。客戶可以在以後重複同一請求。
409 Conflict 通常和PUT請求有關。由於請求和資源的目前狀態相衝突，因此請求不能成功。
410 Gone 所請求的文檔已經不再可用，而且伺服器不知道應該重新導向到哪一個地址。它和404的不同在於，返回407表示文檔永久地離開了指定的位置，而404表示由於未知的原因文檔不可用。
411 Length Required 伺服器不能處理請求，除非客戶發送一個Content-Length頭。
412 Precondition Failed 要求標頭中指定的一些前提條件失敗
413 Request Entity Too Large 目的文件的大小超過伺服器當前願意處理的大小。如果伺服器認為自己能夠稍後再處理該請求，則應該提供一個Retry-After頭
414 Request URI Too Long URI太長
416 Requested Range Not Satisfiable 伺服器不能滿足客戶在請求中指定的Range頭
500 Internal Server Error 伺服器遇到了意料不到的情況，不能完成客戶的請求
501 Not Implemented 伺服器不支援實現請求所需要的功能。例如，客戶發出了一個伺服器不支援的PUT請求
502 Bad Gateway 伺服器作為網關或者代理時，為了完成請求訪問下一個伺服器，但該伺服器返回了非法的應答
503 Service Unavailable 伺服器由於維護或者負載過重未能應答。例如，Servlet可能在資料庫連接池已滿的情況下返回503。伺服器返回503時可以提供一個Retry-After頭
504 Gateway Timeout 由作為代理或網關的伺服器使用，表示不能及時地從遠程伺服器獲得應答
505 HTTP Version Not Supported 伺服器不支援要求中所指明的HTTP版本
(二) XMLHttpRequest 對象方法
abort()停止當前請求getAllResponseHeaders()作為字串返問完整的headersgetResponseHeader("headerLabel")作為字串返問單個的header標籤open("method","URL"[,asyncFlag[,"userName"[, "password"]]])設定未決的請求的目標 URL, 方法, 和其他參數send(content)發送請求setRequestHeader("label", "value")設定header並和請求一起發送
(三) XMLHttpRequest 對象屬性
onreadystatechange狀態改變的事件觸發程序readyState對象狀態(integer):0 = 未初始化1 = 讀取中2 = 已讀取3 = 互動中4 = 完成responseText伺服器處理序返回資料的文本版本responseXML伺服器處理序返回資料的相容DOM的XML文檔對象status伺服器返回的狀態代碼, 如：404 = "檔案末找到" 、200 ="成功"statusText伺服器返回的狀態文本資訊
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
