用戶的交互操作（interaction）驅動著Web站點。理解如何處理響應信息，特別是在使用新的交互操作形式（例如AJAX）的時候，這一點非常重要的。Kris Hadloc解釋了AJAX請求－響應過程的本質，你應該了解這些內容，更好地為用戶交互操作服務。

請求和響應

AJAX引擎分很多個方面，每個方面都很重要。如果引擎執行發送請求和接收響應信息的事務，那么它就有很多的處理響應信息的方法。響應信息是處理過程中的一個重要的部分，這是因為用戶最終會與響應信息交互操作。本文詳細解釋了如何處理AJAX響應信息，并為用戶提供反饋信息，根據需要進行更新。我們從請求的就緒狀態開始，接著解釋響應信息的狀態、回調（callback）和分析響應信息。本文還解釋了響應信息的其它一些方面，例如加載消息、錯誤處理和顯示響應信息。

我建立了一個示例可供大家下載。這個示例包含了一個面向對象的AJAX引擎，你可以在任何AJAX應用程序中再次使用它。在討論響應信息之前，我要指出如何建立AJAX引擎并發出請求。首先，讓我們來看看AJAX引擎的代碼（沒有帶上響應信息處理部分）：

document.write("<script type="text/javascript" src="js/HTTP.js"></script>"); 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); } }

為了建立這個對象并發出請求，你只需要使用下面兩行代碼：

var ajax = new Ajax(); ajax.makeRequest('GET', 'xml/content.xml', onResponse);

上面的第二行代碼反映了你選擇的請求方法、XML的路徑或請求的服務器端腳本、當接收到響應信息時你希望調用的回調方法。現在你對AJAX引擎和如何發出請求已經有了一定的了解，我們來看看如何處理請求。

就緒（Ready）狀態

就緒狀態由回調方法來處理，當我們做出請求的時候，回調方法就已經設置好了。在例子中，onResponse被設置為回調方法，它在本文中被用于處理所有的分析代碼的操作。我們將使用下面的代碼來檢測回調方法中的AJAX對象的就緒狀態：

function onResponse() { if(ajax.checkReadyState('body', 'loading...', 'loading...', 'loading...') == "OK") { // 此處是分析代碼 } }

上面的代碼顯示，我們將向checkReadyState方法傳遞四個參數。第一個參數是我們希望顯示的加載（loading）消息div的ID、其它三個參數都是自定義的對應于不同狀態的加載消息。我選擇的用于加載消息的div的名字是body，它使得新數據在被載入的時候，內容和加載消息是合并在一起的。下面是實際的checkReadyState方法，它處理了我們剛才討論的代碼，并在div中向我們傳遞進去的參數來顯示它。這個方法也被包含在示例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方法為用戶提供頁面狀態的反饋信息是有用處的。下表顯示了它檢測的值：

值	狀態
0	Uninitialized（未初始化）
1	Loading（正在載入）
2	Loaded（已經載入）
3	Interactive（交互）
4	Complete（完成）

你可以為每種加載狀態添加一個自定義的消息--它可以是一個簡單的字符串，也可以是字符串格式的圖片標簽（例如顯示一個動畫的加載GIF）。下面就是一個例子：

var loader = "<img src='images/loader.gif'>"; ajax.checkReadyState('body', loader, loader, loader);

不僅checkReadyState方法處理請求狀態，它所包含的HTTP對象也會檢測和返回請求的狀態。

請求狀態

該AJAX對象的請求狀態與被請求文件的HTTP狀態是一樣的。包含在AJAX文件中的HTTP對象處理了所有的W3C描述的HTTP狀態代碼定義，并把它們返回給請求方法。狀態代碼被分成了五個部分：

· 信息的 1xx

· 成功的 2xx

· 重定向 3xx

· 客戶端錯誤 4xx

· 服務器錯誤 5xx

上面的數字中的最前面一位表示某種類別的狀態代碼。例如，成功的是2xx，它的意思是包含了200－299之間的所有狀態代碼。HTTP對象檢查狀態代碼的第一位數字，并根據代碼所屬的類別，執行一次轉換。在檢測出類別之后，HTTP對象把它發送給響應方法，該方法把狀態代碼作為字符串的形式返回。這就是HTTP狀態方法：

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; } }

狀態代碼是通過檢測該代碼的第一位數字來處理的。一旦完成了代碼檢測，原始的狀態代碼就被發送到一個適當的方法中，該方法給onResponse方法發送一個字符串形式的狀態代碼。接著我們就可以把這條消息顯示給用戶，如果遇到了什么錯誤，她/他就知道發生了什么情況。另一方面，如果請求是成功的，那么就顯示數據。

ResponseText和ResponseXML

響應信息的內容可能有多種不同的形式，例如XML、純文本、（X）HTML或JavaScript對象符號（JSON）。我們可以根據所接收到的數據格式的不同，用兩種不同的方法來處理：使用responseText或者responseXML。responseText方法用于那些并非基于XML的格式。它把響應信息作為字符串，返回精確的內容。純文本、（X）HTML和JSON都使用responseText。在純文本或HTML上使用這個方法是很簡單的：

if(ajax.checkReadyState('body', 'loading...', 'loading...', 'loading...') == "OK") { document.getElementById('body').innerHTML = ajax.request.responseText; }

它最簡單不過了！一旦載入響應信息完成，我們就調用AJAX對象，用responseText來檢索它的值，并把它添加到頁面上。

處理JSON響應信息比處理純文本或（X）HTML需要多一點技巧。下面是我們分析一個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'}

數據被冒號（:）分成了兩個部分：標簽名稱和值。附加的數據被逗號（,）分成新的名稱/值對。現在我們知道了JSON的樣子了，下面是我們分析它的方法：

if(ajax.checkReadyState('body', 'loading...', 'loading...', 'loading...') == "OK") { eval("var response = ("+ajax.request.responseText+")"); document.getElementById('body').innerHTML = "<b>" + response.header + "</b><br/>" + response.description + "<br/><br/>" + "<a href='" + response.sourceUrl + "'>Download the source files</a>"; }

JSON數據首先由JavaScript來分析（使用簡單的eval()過程）。一旦數據被分析好了并建立了響應信息對象，我們就可以簡單地通過名字來獲取它們的響應信息值。

responseText不僅可以給頁面添加內容，它在調試AJAX請求的時候也有用處。例如，你可能還沒有準備好分析數據，因為你還不知道所有的標簽是什么樣的，是XML格式的還是JSON文件。這就要求有一種用于檢測被分析數據的途徑。一旦你知道了所有的標簽名稱，所需要做的事情就只是編寫代碼了。

responseXML的使用也相當簡單。但是與JSON格式類似，XML要求進行數據分析。我們需要執行的第一項事務是識別出XML響應信息中的根節點。

var response = ajax.request.responseXML.documentElement;

下一步，我們通過名稱獲取所有的元素并得到它們的值：

var header = response.getElementsByTagName('header')[0].firstChild.data; var description = response.getElementsByTagName('description')[0].firstChild.data; var sourceUrl = response.getElementsByTagName('sourceUrl')[0].firstChild.data;

最后，我們把響應信息顯示在相應的div標記中：

document.getElementById('body').innerHTML = "<b>" + header + "</b><br/>" + description + "<br/><br/>" + "<a href='" + sourceUrl + "'>Download the source files</a>";

用JavaScript的時候，JSON比XML要快一些，這是因為JSON所需要的分析代碼比XML少很多，直接導致在分析大量數據的時候，JSON的速度較快。JSON不如XML的地方在于XML受到的支持更大、服務器端開發選項更多。你可以根據環境和請求的用途來做出選擇。

AJAX響應信息是AJAX通訊中的一個重要的部分。你需要處理很多方面的信息，包括就緒狀態、錯誤處理和加載狀態，并最終顯示出來。有了這些信息之后，你就可以把注意力集中在響應信息上，為用戶提供更多的信息。