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

來源:互聯網
上載者:User
請求狀態

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

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.