我們以兩個(gè)驗(yàn)證通行證賬號是否存在的例子來講述AJAX在實(shí)際中的應(yīng)用：

(1)用文本字符串的方式返回服務(wù)器的響應(yīng)來驗(yàn)證網(wǎng)易通行證賬號是否存在,；

(2)以XMLDocument對象方式返回響應(yīng)來驗(yàn)證金山通行證賬號是否存在,；

首先,，我們需要用JavaScript來創(chuàng)建XMLHttpRequest 類向服務(wù)器發(fā)送一個(gè)HTTP請求,， XMLHttpRequest 類首先由Internet Explorer以ActiveX對象引入,，被稱為XMLHTTP。 后來Mozilla﹑Netscape﹑Safari 和其他瀏覽器也提供了XMLHttpRequest類,，不過它們創(chuàng)建XMLHttpRequest類的方法不同,。

對于Internet Explorer瀏覽器，創(chuàng)建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瀏覽器,，因此我們需要根據(jù)不同版本的Internet Explorer瀏覽器來創(chuàng)建XMLHttpRequest類，上面代碼就是根據(jù)不同的Internet Explorer瀏覽器創(chuàng)建XMLHttpRequest類的方法,。

對于Mozilla﹑Netscape﹑Safari等瀏覽器,，創(chuàng)建XMLHttpRequest 方法如下：xmlhttp_request = new XMLHttpRequest();

如果服務(wù)器的響應(yīng)沒有XML mime-type header,，某些Mozilla瀏覽器可能無法正常工作。 為了解決這個(gè)問題,，如果服務(wù)器響應(yīng)的header不是text/xml,，可以調(diào)用其它方法修改該header。

xmlhttp_request = new XMLHttpRequest();
xmlhttp_request.overrideMimeType('text/xml');

在實(shí)際應(yīng)用中,，為了兼容多種不同版本的瀏覽器,，一般將創(chuàng)建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("Charset","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; }

在定義了如何處理響應(yīng)后，就要發(fā)送請求了,?？梢哉{(diào)用HTTP請求類的open()和send()方法，如下所示：

xmlhttp_request.open('GET', URL, true);
xmlhttp_request.send(null);

open()的第一個(gè)參數(shù)是HTTP請求方式—GET,，POST或任何服務(wù)器所支持的您想調(diào)用的方式,。 按照HTTP規(guī)范，該參數(shù)要大寫,；否則,，某些瀏覽器(如Firefox)可能無法處理請求。

第二個(gè)參數(shù)是請求頁面的URL,。

第三個(gè)參數(shù)設(shè)置請求是否為異步模式,。如果是TRUE，JavaScript函數(shù)將繼續(xù)執(zhí)行,，而不等待服務(wù)器響應(yīng),。這就是"AJAX"中的"A"。

用JavaScript來創(chuàng)建XMLHttpRequest 類向服務(wù)器發(fā)送一個(gè)HTTP請求后,，接下來要決定當(dāng)收到服務(wù)器的響應(yīng)后,，需要做什么。這需要告訴HTTP請求對象用哪一個(gè)JavaScript函數(shù)處理這 個(gè)響應(yīng),?？梢詫ο蟮膐nreadystatechange屬性設(shè)置為要使用的JavaScript的函數(shù)名，如下所示：

xmlhttp_request.onreadystatechange =FunctionName;

FunctionName是用JavaScript創(chuàng)建的函數(shù)名,，注意不要寫成FunctionName(),，當(dāng)然我們也可以直接將JavaScript代碼創(chuàng)建在onreadystatechange之后，例如：

xmlhttp_request.onreadystatechange = function(){
// JavaScript代碼段
};

首先要檢查請求的狀態(tài),。只有當(dāng)一個(gè)完整的服務(wù)器響應(yīng)已經(jīng)收到了,，函數(shù)才可以處理該響應(yīng)。XMLHttpRequest 提供了readyState屬性來對服務(wù)器響應(yīng)進(jìn)行判斷,。

readyState的取值如下：

0 (未初始化)

1 (正在裝載)

2 (裝載完畢)

3 (交互中)

4 (完成)

所以只有當(dāng)readyState=4時(shí),，一個(gè)完整的服務(wù)器響應(yīng)已經(jīng)收到了，函數(shù)才可以處理該響應(yīng)。具體代碼如下：

if (http_request.readyState == 4) { // 收到完整的服務(wù)器響應(yīng) }
else { // 沒有收到完整的服務(wù)器響應(yīng) }

當(dāng)readyState=4時(shí),，一個(gè)完整的服務(wù)器響應(yīng)已經(jīng)收到了,，接著，函數(shù)會檢查HTTP服務(wù)器響應(yīng)的狀態(tài)值,。完整的狀態(tài)取值可參見W3C文檔,。當(dāng)HTTP服務(wù)器響應(yīng)的值為200時(shí)，表示狀態(tài)正常,。

在檢查完請求的狀態(tài)值和響應(yīng)的HTTP狀態(tài)值后,，就可以處理從服務(wù)器得到的數(shù)據(jù)了。有兩種方式可以得到這些數(shù)據(jù)：

(1) 以文本字符串的方式返回服務(wù)器的響應(yīng)

(2) 以XMLDocument對象方式返回響應(yīng)

實(shí)例一： 用文本字符串的方式返回服務(wù)器的響應(yīng)來驗(yàn)證網(wǎng)易通行證賬號是否存在

首先,，我們登陸網(wǎng)易通行證注冊頁面,，可以看到檢測用戶名是否存在是將用戶名提交給checkssn.jsp頁面進(jìn)行判斷，格式為：

reg.163.com/register/checkssn.jsp?username=用戶名
根據(jù)上面講到的方法,，我們可以利用AJAX技術(shù)對網(wǎng)易通行證用戶名進(jìn)行檢測：

第一步：新建一個(gè)基于Xhtml標(biāo)準(zhǔn)的網(wǎng)頁,，在區(qū)域插入Javascript函數(shù)如下：

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) { //定義收到服務(wù)器的響應(yīng)后需要執(zhí)行的JavaScript函數(shù)

url=n+document.getElementById('163id').value;//定義網(wǎng)址參數(shù)

xmlhttp_request=getXMLRequester();//調(diào)用創(chuàng)建XMLHttpRequest的函數(shù)

xmlhttp_request.onreadystatechange = doContents;//調(diào)用doContents函數(shù)

xmlhttp_request.open('GET', url, true);

xmlhttp_request.send(null); }

function doContents()

{ if (xmlhttp_request.readyState == 4) {// 收到完整的服務(wù)器響應(yīng)

if (xmlhttp_request.status == 200) {//HTTP服務(wù)器響應(yīng)的值OK

document.getElementById('message').innerHTML = xmlhttp_request.responseText;

//將服務(wù)器返回的字符串寫到頁面中ID為message的區(qū)域 }

else { alert(xmlhttp_request.status); } } }

在區(qū)域建立一個(gè)文本框，id為163id,，再建一個(gè)id為messsge的空白區(qū)域用來顯示返回字符串(也可以通過Javascript函數(shù)截取一部分字符串顯示)：

<input type=text id="163id">
[font id="message"][/font]
這樣,，一個(gè)基于AJAX技術(shù)的用戶名檢測頁面就做好了，不過這個(gè)頁面將返回服務(wù)器響應(yīng)生成頁面的所有字符串,，當(dāng)然還可以對返回的字符串進(jìn)行一些操作,，便于應(yīng)用到不同的需要當(dāng)中。

實(shí)例二： 以XMLDocument對象方式返回響應(yīng)來驗(yàn)證金山通行證賬號是否存在

在上面的例子中,，當(dāng)服務(wù)器對HTTP請求的響應(yīng)被收到后,，我們會調(diào)用請求對象的reponseText屬性。該屬性包含了服務(wù)器返回響應(yīng)文 件的內(nèi)容?，F(xiàn)在我們以XMLDocument對象方式返回響應(yīng),，此時(shí)將不再需要reponseText屬性而使用responseXML屬性。

首先登陸金山通行證注冊頁面,，我們發(fā)現(xiàn)金山通行證用戶名的檢測方式為： pass.kingsoft.com/ksgweb/jsp/login/uid.jsp?uid=用戶名,并且返回XML數(shù)據(jù):

isExistedUid -2

當(dāng)result值為-1時(shí)表示此用戶名已被注冊,，當(dāng)result值為-2時(shí)表示此用戶名尚未注冊，因此通過對result值的判斷可以知道用戶名是否被注冊,。

對上例代碼進(jìn)行修改：

首先找到

document.getElementById('message').innerHTML = xmlhttp_request.responseText;

改為:

var response = xmlhttp_request.responseXML.documentElement;

var result = response.getElementsByTagName('result')[0].firstChild.data;//返回result節(jié)點(diǎn)數(shù)據(jù)

if(result ==-2){

document.getElementById('message').innerHTML = "用戶名"+document.getElementById('163id').value+"尚未注冊";}

else if(result ==-1){

document.getElementById('message').innerHTML = "對不起,用戶名"+document.getElementById('163id').value+"已經(jīng)注冊";}

通過以上兩個(gè)實(shí)例說明了AJAX的客戶端基礎(chǔ)應(yīng)用,，采用的是網(wǎng)易和金山現(xiàn)成的服務(wù)器端程序，當(dāng)然為了開發(fā)合適自己頁面的程序,，還需要對自己編寫服務(wù)器端程序，這設(shè)計(jì)到程序語言及數(shù)據(jù)庫的操作,，對于有一定程序基礎(chǔ)的讀者一定不是很難的事情,。