AJAX響應(yīng)信息是AJAX通訊中的一個(gè)重要的部分。理解如何處理響應(yīng)信息，特別是在使用新的交互操作形式的時(shí)候，這一點(diǎn)非常重要的。本文解釋了AJAX請(qǐng)求－響應(yīng)過(guò)程的本質(zhì)，并分析了如何處理AJAX響應(yīng)信息。
用戶的交互操作（interaction）驅(qū)動(dòng)著Web站點(diǎn)。理解如何處理響應(yīng)信息，特別是在使用新的交互操作形式（例如AJAX）的時(shí)候，這一點(diǎn)非常重要的。Kris Hadloc解釋了AJAX請(qǐng)求－響應(yīng)過(guò)程的本質(zhì)，你應(yīng)該了解這些內(nèi)容，更好地為用戶交互操作服務(wù)。
請(qǐng)求和響應(yīng)
AJAX引擎分很多個(gè)方面，每個(gè)方面都很重要。如果引擎執(zhí)行發(fā)送請(qǐng)求和接收響應(yīng)信息的事務(wù)，那么它就有很多的處理響應(yīng)信息的方法。響應(yīng)信息是處理過(guò)程中的一個(gè)重要的部分，這是因?yàn)橛脩糇罱K會(huì)與響應(yīng)信息交互操作。
本文詳細(xì)解釋了如何處理AJAX響應(yīng)信息，并為用戶提供反饋信息，根據(jù)需要進(jìn)行更新。我們從請(qǐng)求的就緒狀態(tài)開(kāi)始，接著解釋響應(yīng)信息的狀態(tài)、回調(diào)（callback）和分析響應(yīng)信息。本文還解釋了響應(yīng)信息的其它一些方面，例如加載消息、錯(cuò)誤處理和顯示響應(yīng)信息。
我建立了一個(gè)示例可供大家下載。這個(gè)示例包含了一個(gè)面向?qū)ο蟮腁JAX引擎，你可以在任何AJAX應(yīng)用程序中再次使用它。在討論響應(yīng)信息之前，我要指出如何建立AJAX引擎并發(fā)出請(qǐng)求。首先，讓我們來(lái)看看AJAX引擎的代碼（沒(méi)有帶上響應(yīng)信息處理部分）：
document.write(" ");
function Ajax()
{
this.toString = function() { return "Ajax"; }
this.http = new HTTP();
this.makeRequest = function(_method, _url, _callbackMethod)
{
this.request = (window.XMLHttpRequest)? new XMLHttpRequest(): new ActiveXObject("MSXML2.XMLHTTP");
this.request.onreadystatechange = _callbackMethod;
this.request.open(_method, _url, true);
this.request.send(_url);
}
}
為了建立這個(gè)對(duì)象并發(fā)出請(qǐng)求，你只需要使用下面兩行代碼：
var ajax = new Ajax();
ajax.makeRequest(''GET'', ''xml/content.xml'', onResponse);
上面的第二行代碼反映了你選擇的請(qǐng)求方法、XML的路徑或請(qǐng)求的服務(wù)器端腳本、當(dāng)接收到響應(yīng)信息時(shí)你希望調(diào)用的回調(diào)方法。現(xiàn)在你對(duì)AJAX引擎和如何發(fā)出請(qǐng)求已經(jīng)有了一定的了解，我們來(lái)看看如何處理請(qǐng)求。
就緒（Ready）狀態(tài)
就緒狀態(tài)由回調(diào)方法來(lái)處理，當(dāng)我們做出請(qǐng)求的時(shí)候，回調(diào)方法就已經(jīng)設(shè)置好了。在例子中，onResponse被設(shè)置為回調(diào)方法，它在本文中被用于處理所有的分析代碼的操作。我們將使用下面的代碼來(lái)檢測(cè)回調(diào)方法中的AJAX對(duì)象的就緒狀態(tài)：
function onResponse()
{
if(ajax.checkReadyState(''body'', ''loading...'', ''loading...'', ''loading...'') == "OK")
{
// 此處是分析代碼
}
}
上面的代碼顯示，我們將向checkReadyState方法傳遞四個(gè)參數(shù)。第一個(gè)參數(shù)是我們希望顯示的加載（loading）消息div的ID、其它三個(gè)參數(shù)都是自定義的對(duì)應(yīng)于不同狀態(tài)的加載消息。我選擇的用于加載消息的div的名字是body，它使得新數(shù)據(jù)在被載入的時(shí)候，內(nèi)容和加載消息是合并在一起的。下面是實(shí)際的checkReadyState方法，它處理了我們剛才討論的代碼，并在div中向我們傳遞進(jìn)去的參數(shù)來(lái)顯示它。這個(gè)方法也被包含在示例AJAX引擎中了。
this.checkReadyState = function(_id, _1, _2, _3)
{
switch(this.request.readyState)
{
case 1:
document.getElementById(_id).innerHTML = _1;
break;
case 2:
document.getElementById(_id).innerHTML = _2;
break;
case 3:
document.getElementById(_id).innerHTML = _3;
break;
case 4:
document.getElementById(_id).innerHTML = "";
return this.http.status(this.request.status);
}
}
checkReadyState方法為用戶提供頁(yè)面狀態(tài)的反饋信息是有用處的。下表顯示了它檢測(cè)的值：
值 狀態(tài)
0 Uninitialized（未初始化）
1 Loading（正在載入）
2 Loaded（已經(jīng)載入）
3 Interactive（交互）
4 Complete（完成）
你可以為每種加載狀態(tài)添加一個(gè)自定義的消息--它可以是一個(gè)簡(jiǎn)單的字符串，也可以是字符串格式的圖片標(biāo)簽（例如顯示一個(gè)動(dòng)畫的加載GIF）。下面就是一個(gè)例子：
var loader = "
";
ajax.checkReadyState(''body'', loader, loader, loader);
不僅checkReadyState方法處理請(qǐng)求狀態(tài)，它所包含的HTTP對(duì)象也會(huì)檢測(cè)和返回請(qǐng)求的狀態(tài)。
請(qǐng)求狀態(tài)
該AJAX對(duì)象的請(qǐng)求狀態(tài)與被請(qǐng)求文件的HTTP狀態(tài)是一樣的。包含在AJAX文件中的HTTP對(duì)象處理了所有的W3C描述的HTTP狀態(tài)代碼定義，并把它們返回給請(qǐng)求方法。狀態(tài)代碼被分成了五個(gè)部分：
· 信息的 1xx
· 成功的 2xx
· 重定向 3xx
· 客戶端錯(cuò)誤 4xx
· 服務(wù)器錯(cuò)誤 5xx
上面的數(shù)字中的最前面一位表示某種類別的狀態(tài)代碼。例如，成功的是2xx，它的意思是包含了200－299之間的所有狀態(tài)代碼。HTTP對(duì)象檢查狀態(tài)代碼的第一位數(shù)字，并根據(jù)代碼所屬的類別，執(zhí)行一次轉(zhuǎn)換。在檢測(cè)出類別之后，HTTP對(duì)象把它發(fā)送給響應(yīng)方法，該方法把狀態(tài)代碼作為字符串的形式返回。這就是HTTP狀態(tài)方法：
this.status = function(_status)
{
var s = _status.toString().split("");
switch(s[0])
{
case "1":
return this.getInformationalStatus(_status);
break;
case "2":
return this.getSuccessfulStatus(_status);
break;
case "3":
return this.getRedirectionStatus(_status);
break;
case "4":
return this.getClientErrorStatus(_status);
break;
case "5":
return this.getServerErrorStatus(_status);
break;
}
}
狀態(tài)代碼是通過(guò)檢測(cè)該代碼的第一位數(shù)字來(lái)處理的。一旦完成了代碼檢測(cè)，原始的狀態(tài)代碼就被發(fā)送到一個(gè)適當(dāng)?shù)姆椒ㄖ校摲椒ńoonResponse方法發(fā)送一個(gè)字符串形式的狀態(tài)代碼。接著我們就可以把這條消息顯示給用戶，如果遇到了什么錯(cuò)誤，她/他就知道發(fā)生了什么情況。另一方面，如果請(qǐng)求是成功的，那么就顯示數(shù)據(jù)。
ResponseText和ResponseXML
響應(yīng)信息的內(nèi)容可能有多種不同的形式，例如XML、純文本、（X）HTML或JavaScript對(duì)象符號(hào)（JSON）。我們可以根據(jù)所接收到的數(shù)據(jù)格式的不同，用兩種不同的方法來(lái)處理：使用responseText或者responseXML。responseText方法用于那些并非基于XML的格式。它把響應(yīng)信息作為字符串，返回精確的內(nèi)容。純文本、（X）HTML和JSON都使用responseText。在純文本或HTML上使用這個(gè)方法是很簡(jiǎn)單的：
if(ajax.checkReadyState(''body'', ''loading...'', ''loading...'', ''loading...'') == "OK")
{
document.getElementById(''body'').innerHTML = ajax.request.responseText;
}
它最簡(jiǎn)單不過(guò)了！一旦載入響應(yīng)信息完成，我們就調(diào)用AJAX對(duì)象，用responseText來(lái)檢索它的值，并把它添加到頁(yè)面上。
處理JSON響應(yīng)信息比處理純文本或（X）HTML需要多一點(diǎn)技巧。下面是我們分析一個(gè)JSON文件的示例：
{ ''header'' : ''How to Handle the Ajax Response'',
''description'' : ''An in-depth explanation of how to handle the Ajax response.'',
''sourceUrl'' : ''http://www.krishadlock.com/clients/informit/AjaxResponse/AjaxResponse.zip''}
數(shù)據(jù)被冒號(hào)（:）分成了兩個(gè)部分：標(biāo)簽名稱和值。附加的數(shù)據(jù)被逗號(hào)（,）分成新的名稱/值對(duì)?，F(xiàn)在我們知道了JSON的樣子了，下面是我們分析它的方法：
if(ajax.checkReadyState(''body'', ''loading...'', ''loading...'', ''loading...'') == "OK")
{
eval("var response = ("+ajax.request.responseText+")");
document.getElementById(''body'').innerHTML = "" + response.header + "
"
+ response.description + "
"
+ "
Download the source files";
}
JSON數(shù)據(jù)首先由JavaScript來(lái)分析（使用簡(jiǎn)單的eval()過(guò)程）。一旦數(shù)據(jù)被分析好了并建立了響應(yīng)信息對(duì)象，我們就可以簡(jiǎn)單地通過(guò)名字來(lái)獲取它們的響應(yīng)信息值。
responseText不僅可以給頁(yè)面添加內(nèi)容，它在調(diào)試AJAX請(qǐng)求的時(shí)候也有用處。例如，你可能還沒(méi)有準(zhǔn)備好分析數(shù)據(jù)，因?yàn)槟氵€不知道所有的標(biāo)簽是什么樣的，是XML格式的還是JSON文件。這就要求有一種用于檢測(cè)被分析數(shù)據(jù)的途徑。一旦你知道了所有的標(biāo)簽名稱，所需要做的事情就只是編寫代碼了。
responseXML的使用也相當(dāng)簡(jiǎn)單。但是與JSON格式類似，XML要求進(jìn)行數(shù)據(jù)分析。我們需要執(zhí)行的第一項(xiàng)事務(wù)是識(shí)別出XML響應(yīng)信息中的根節(jié)點(diǎn)。
var response = ajax.request.responseXML.documentElement;
下一步，我們通過(guò)名稱獲取所有的元素并得到它們的值：
var header = response.getElementsByTagName(''header'')[0].firstChild.data;
var description = response.getElementsByTagName(''description'')[0].firstChild.data;
var sourceUrl = response.getElementsByTagName(''sourceUrl'')[0].firstChild.data;
最后，我們把響應(yīng)信息顯示在相應(yīng)的div標(biāo)記中：
document.getElementById(''body'').innerHTML = "" + header + "
"
+ description + "
"
+ "
Download the source files";
用JavaScript的時(shí)候，JSON比XML要快一些，這是因?yàn)镴SON所需要的分析代碼比XML少很多，直接導(dǎo)致在分析大量數(shù)據(jù)的時(shí)候，JSON的速度較快。JSON不如XML的地方在于XML受到的支持更大、服務(wù)器端開(kāi)發(fā)選項(xiàng)更多。你可以根據(jù)環(huán)境和請(qǐng)求的用途來(lái)做出選擇。
AJAX響應(yīng)信息是AJAX通訊中的一個(gè)重要的部分。你需要處理很多方面的信息，包括就緒狀態(tài)、錯(cuò)誤處理和加載狀態(tài)，并最終顯示出來(lái)。有了這些信息之后，你就可以把注意力集中在響應(yīng)信息上，為用戶提供更多的信息。
(責(zé)任編輯：銘銘
mingming_ky#126.com TEL：（010）－68476636)
