深入理解AJAX響應資訊的處理

請求狀態

　　該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通訊中的一個重要的部分。你需要處理很多方面的資訊，包括就緒狀態、錯誤處理和載入狀態，並最終顯示出來。有了這些資訊之後，你就可以把注意力集中在響應資訊上，為使用者提供更多的資訊。