日本美女黄色视频,免费看美女视频的应用,性感美女主播视频

掌握 Ajax，第 3 部分: Ajax 中的高級請求和響應(1)

掌握 Ajax，第 3 部分: Ajax 中的高級請求和響應
全面理解 HTTP 的狀態(tài)代碼、就緒狀態(tài)和 XMLHttpRequest 對象


  文檔選項
將此頁作為電子郵件發(fā)送

  討論

  樣例代碼

最新推薦
  Java 應用開發(fā)源動力－下載免費軟件，快速啟動開發(fā)

級別: 初級

Brett McLaughlin, 作家，編輯, O‘Reilly Media Inc.

2006 年 3 月 23 日

對于很多 Web 開發(fā)人員來說，只需要生成簡單的請求并接收簡單的響應即可；但是對于希望掌握 Ajax 的開發(fā)人員來說，必須要全面理解 HTTP 狀態(tài)代碼、就緒狀態(tài)和 XMLHttpRequest 對象。在本文中，Brett McLaughlin 將向您介紹各種狀態(tài)代碼，并展示瀏覽器如何對其進行處理，本文還給出了在 Ajax 中使用的比較少見的 HTTP 請求。
在本系列的上篇文章中，我們將詳細介紹 XMLHttpRequest 對象，它是 Ajax 應用程序的中心，負責處理服務器端應用程序和腳本的請求，并處理從服務器端組件返回的數(shù)據(jù)。由于所有的 Ajax 應用程序都要使用 XMLHttpRequest 對象，因此您可能會希望熟悉這個對象，從而能夠讓 Ajax 執(zhí)行得更好。

在本文中，我將在上一篇文章的基礎上重點介紹這個請求對象的 3 個關鍵部分的內(nèi)容：

HTTP 就緒狀態(tài)
HTTP 狀態(tài)代碼
可以生成的請求類型
這三部分內(nèi)容都是在構(gòu)造一個請求時所要考慮的因素；但是介紹這些主題的內(nèi)容太少了。然而，如果您不僅僅是想了解 Ajax 編程的常識，而是希望了解更多內(nèi)容，就需要熟悉就緒狀態(tài)、狀態(tài)代碼和請求本身的內(nèi)容。當應用程序出現(xiàn)問題時 —— 這種問題總是存在 —— 那么如果能夠正確理解就緒狀態(tài)、如何生成一個 HEAD 請求或者 400 的狀態(tài)代碼的確切含義，就可以在 5 分鐘內(nèi)調(diào)試出問題，而不是在各種挫折和困惑中度過 5 個小時。

XMLHttpRequest 或 XMLHttp：換名玫瑰

Microsoft™ 和 Internet Explorer 使用了一個名為 XMLHttp 的對象，而不是 XMLHttpRequest 對象，而 Mozilla、Opera、Safari 和大部分非 Microsoft 瀏覽器都使用的是后者。為了簡單性起見，我將這兩個對象都簡單地稱為 XMLHttpRequest。這既符合我們在 Web 上看到的情況，又符合 Microsoft 在 Internet Explorer 7.0 中使用 XMLHttpRequest 作為請求對象的意圖。（有關這個問題的更多內(nèi)容，請參見第 2 部分。）

下面讓我們首先來看一下 HTTP 就緒狀態(tài)。

深入了解 HTTP 就緒狀態(tài)

您應該還記得在上一篇文章中 XMLHttpRequest 對象有一個名為 readyState 的屬性。這個屬性確保服務器已經(jīng)完成了一個請求，通常會使用一個回調(diào)函數(shù)從服務器中讀出數(shù)據(jù)來更新 Web 表單或頁面的內(nèi)容。清單 1 給出了一個簡單的例子（這也是本系列的上一篇文章中的一個例子 —— 請參見參考資料）。

清單 1. 在回調(diào)函數(shù)中處理服務器的響應

function updatePage() {
if (request.readyState == 4) {
   if (request.status == 200) {
   var response = request.responseText.split("|");
   document.getElementById("order").value = response[0];
   document.getElementById("address").innerHTML =
      response[1].replace(/\n/g, "<br />");
   } else
   alert("status is " + request.status);
}
}

這顯然是就緒狀態(tài)最常見（也是最簡單）的用法。正如您從數(shù)字 "4" 中可以看出的一樣，還有其他幾個就緒狀態(tài)（您在上一篇文章中也看到過這個清單 —— 請參見參考資料）：

0：請求未初始化（還沒有調(diào)用 open()）。
1：請求已經(jīng)建立，但是還沒有發(fā)送（還沒有調(diào)用 send()）。
2：請求已發(fā)送，正在處理中（通?，F(xiàn)在可以從響應中獲取內(nèi)容頭）。
3：請求在處理中；通常響應中已有部分數(shù)據(jù)可用了，但是服務器還沒有完成響應的生成。
4：響應已完成；您可以獲取并使用服務器的響應了。
如果您希望不僅僅是了解 Ajax 編程的基本知識，那么就不但需要知道這些狀態(tài)，了解這些狀態(tài)是何時出現(xiàn)的，以及如何來使用這些狀態(tài)。首先，您需要學習在每種就緒狀態(tài)下可能碰到的是哪種請求狀態(tài)。不幸的是，這一點并不直觀，而且會涉及幾種特殊的情況。

隱秘就緒狀態(tài)

第一種就緒狀態(tài)的特點是 readyState 屬性為 0（readyState == 0），表示未初始化狀態(tài)。一旦對請求對象調(diào)用 open() 之后，這個屬性就被設置為 1。由于您通常都是在一對請求進行初始化之后就立即調(diào)用 open()，因此很少會看到 readyState == 0 的狀態(tài)。另外，未初始化的就緒狀態(tài)在實際的應用程序中是沒有真正的用處的。

不過為了滿足我們的興趣，請參見清單 2 的內(nèi)容，其中顯示了如何在 readyState 被設置為 0 時來獲取這種就緒狀態(tài)。

清單 2. 獲取 0 就緒狀態(tài)

function getSalesData() {
   // Create a request object
   createRequest();
   alert("Ready state is: " + request.readyState);

   // Setup (initialize) the request
   var url = "/boards/servlet/UpdateBoardSales";
   request.open("GET", url, true);
   request.onreadystatechange = updatePage;
   request.send(null);
}

在這個簡單的例子中，getSalesData() 是 Web 頁面調(diào)用來啟動請求（例如點擊一個按鈕時）所使用的函數(shù)。注意您必須在調(diào)用 open()之前來查看就緒狀態(tài)。圖 1 給出了運行這個應用程序的結(jié)果。

圖 1. 就緒狀態(tài) 0

當 0 等于 4 時

在多個 JavaScript 函數(shù)都使用相同的請求對象時，您需要檢查就緒狀態(tài) 0 來確保這個請求對象沒有正在使用，這種機制會產(chǎn)生問題。由于 readyState == 4 表示一個已完成的請求，因此您經(jīng)常會發(fā)現(xiàn)那些目前沒在使用的處于就緒狀態(tài)的請求對象仍然被設置成了 4 —— 這是因為從服務器返回來的數(shù)據(jù)已經(jīng)使用過了，但是從它們被設置為就緒狀態(tài)之后就沒有進行任何變化。有一個函數(shù) abort() 會重新設置請求對象，但是這個函數(shù)卻不是真正為了這個目的而使用的。如果您必須使用多個函數(shù)，最好是為每個函數(shù)都創(chuàng)建并使用一個函數(shù)，而不是在多個函數(shù)之間共享相同的對象。

顯然，這并不能為您帶來多少好處；需要確保尚未調(diào)用 open() 函數(shù)的情況很少。在大部分 Ajax 編程的真實情況中，這種就緒狀態(tài)的唯一用法就是使用相同的 XMLHttpRequest 對象在多個函數(shù)之間生成多個請求。在這種（不常見的）情況中，您可能會在生成新請求之前希望確保請求對象是處于未初始化狀態(tài)（readyState == 0）。這實際上是要確保另外一個函數(shù)沒有同時使用這個對象。

查看正在處理的請求的就緒狀態(tài)

除了 0 就緒狀態(tài)之外，請求對象還需要依次經(jīng)歷典型的請求和響應的其他幾種就緒狀態(tài)，最后才以就緒狀態(tài) 4 的形式結(jié)束。這就是為什么您在大部分回調(diào)函數(shù)中都可以看到 if (request.readyState == 4) 這行代碼；它確保服務器已經(jīng)完成對請求的處理，現(xiàn)在可以安全地更新 Web 頁面或根據(jù)從服務器返回來的數(shù)據(jù)來進行操作了。

要查看這種狀態(tài)發(fā)生的過程非常簡單。如果就緒狀態(tài)為 4，我們不僅要運行回調(diào)函數(shù)中的代碼，而且還要在每次調(diào)用回調(diào)函數(shù)時都輸出就緒狀態(tài)。清單 3 給出了一個實現(xiàn)這種功能的例子。

清單 3. 查看就緒狀態(tài)

function updatePage() {
   // Output the current ready state
   alert("updatePage() called with ready state of " + request.readyState);
}

如果您不確定如何運行這個函數(shù)，就需要創(chuàng)建一個函數(shù)，然后在 Web 頁面中調(diào)用這個函數(shù)，并讓它向服務器端的組件發(fā)送一個請求（例如清單 2 給出的函數(shù)，或本系列文章的第 1 部分和第 2 部分中給出的例子）。確保在建立請求時，將回調(diào)函數(shù)設置為 updatePage()；要實現(xiàn)這種設置，可以將請求對象的 onreadystatechange 屬性設置為 updatePage()。

這段代碼就是 onreadystatechange 意義的一個確切展示 —— 每次請求的就緒狀態(tài)發(fā)生變化時，就調(diào)用 updatePage()，然后我們就可以看到一個警告了。圖 2 給出了一個調(diào)用這個函數(shù)的例子，其中就緒狀態(tài)為 1。

圖 2. 就緒狀態(tài) 1

您可以自己嘗試運行這段代碼。將其放入 Web 頁面中，然后激活事件處理程序（單擊按鈕，在域之間按 tab 鍵切換焦點，或者使用設置的任何方法來觸發(fā)請求）。這個回調(diào)函數(shù)會運行多次 —— 每次就緒狀態(tài)都會改變 —— 您可以看到每個就緒狀態(tài)的警告。這是跟蹤請求所經(jīng)歷的各個階段的最好方法。

瀏覽器的不一致性

在對這個過程有一個基本的了解之后，請試著從幾個不同的瀏覽器中訪問您的頁面。您應該會注意到各個瀏覽器如何處理這些就緒狀態(tài)并不一致。例如，在 Firefox 1.5 中，您會看到以下就緒狀態(tài)：

1
2
3
4
這并不奇怪，因為每個請求狀態(tài)都在這里表示出來了。然而，如果您使用 Safari 來訪問相同的應用程序，就應該看到 —— 或者看不到 —— 一些有趣的事情。下面是在 Safari 2.0.1 中看到的狀態(tài)：

2
3
4
Safari 實際上把第一個就緒狀態(tài)給丟棄了，也并沒有什么明顯的原因說明為什么要這樣做；不過這就是 Safari 的工作方式。這還說明了一個重要的問題：盡管在使用服務器上的數(shù)據(jù)之前確保請求的狀態(tài)為 4 是一個好主意，但是依賴于每個過渡期就緒狀態(tài)編寫的代碼的確會在不同的瀏覽器上得到不同的結(jié)果。

例如，在使用 Opera 8.5 時，所顯示的就緒狀態(tài)情況就更加糟糕了：

3
4
最后，Internet Explorer 會顯示如下狀態(tài)：

1
2
3
4
如果您碰到請求方面的問題，這就是用來發(fā)現(xiàn)問題的首要之處。最好的方式是在 Internet Explorer 和 Firefox 都進行一下測試 —— 您會看到所有這 4 種狀態(tài)，并可以檢查請求的每個狀態(tài)所處的情況。

接下來我們再來看一下響應端的情況。

顯微鏡下的響應數(shù)據(jù)

一旦我們理解在請求過程中發(fā)生的各個就緒狀態(tài)之后，接下來就可以來看一下 XMLHttpRequest 對象的另外一個方面了 —— responseText 屬性。回想一下在上一篇文章中我們介紹過的內(nèi)容，就可以知道這個屬性用來從服務器上獲取數(shù)據(jù)。一旦服務器完成對請求的處理之后，就可以將響應請求數(shù)據(jù)所需要的任何數(shù)據(jù)放到請求的 responseText 中了。然后回調(diào)函數(shù)就可以使用這些數(shù)據(jù)，如清單 1 和清單 4 所示。

清單 4. 使用服務器上返回的響應

function updatePage() {
   if (request.readyState == 4) {
   var newTotal = request.responseText;
   var totalSoldEl = document.getElementById("total-sold");
   var netProfitEl = document.getElementById("net-profit");
   replaceText(totalSoldEl, newTotal);

   /* 圖 out the new net profit */
   var boardCostEl = document.getElementById("board-cost");
   var boardCost = getText(boardCostEl);
   var manCostEl = document.getElementById("man-cost");
   var manCost = getText(manCostEl);
   var profitPerBoard = boardCost - manCost;
   var netProfit = profitPerBoard * newTotal;

   /* Update the net profit on the sales form */
   netProfit = Math.round(netProfit * 100) / 100;
   replaceText(netProfitEl, netProfit);
   }

清單 1 相當簡單；清單 4 稍微有點復雜，但是它們在開始時都要檢查就緒狀態(tài)，并獲取 responseText 屬性的值。

查看請求的響應文本

與就緒狀態(tài)類似，responseText 屬性的值在整個請求的生命周期中也會發(fā)生變化。要查看這種變化，請使用如清單 5 所示的代碼來測試請求的響應文本，以及它們的就緒狀態(tài)。

清單 5. 測試 responseText 屬性

function updatePage() {
   // Output the current ready state
   alert("updatePage() called with ready state of " + request.readyState +
         " and a response text of ‘" + request.responseText + "‘");
   }

現(xiàn)在在瀏覽器中打開 Web 應用程序，并激活您的請求。要更好地看到這段代碼的效果，請使用 Firefox 或 Internet Explorer，因為這兩個瀏覽器都可以報告出請求過程中所有可能的就緒狀態(tài)。例如在就緒狀態(tài) 2 中，就沒有定義 responseText （請參見圖 3）；如果 JavaScript 控制臺也已經(jīng)打開了，您就會看到一個錯誤。

圖 3. 就緒狀態(tài)為 2 的響應文本

不過在就緒狀態(tài) 3 中，服務器已經(jīng)在 responseText 屬性中放上了一個值，至少在這個例子中是這樣（請參見圖 4）。

圖 4. 就緒狀態(tài)為 3 的響應文本

您會看到就緒狀態(tài)為 3 的響應在每個腳本、每個服務器甚至每個瀏覽器上都是不一樣的。不過，這在調(diào)試應用程序中依然是非常有用的。

獲取安全數(shù)據(jù)

所有的文檔和規(guī)范都強調(diào)，只有在就緒狀態(tài)為 4 時數(shù)據(jù)才可以安全使用。相信我，當就緒狀態(tài)為 3 時，您很少能找到無法從 responseText 屬性獲取數(shù)據(jù)的情況。然而，在應用程序中將自己的邏輯依賴于就緒狀態(tài) 3 可不是什么好主意 —— 一旦您編寫了依賴于就緒狀態(tài) 3 的完整數(shù)據(jù)的的代碼，幾乎就要自己來負責當時的數(shù)據(jù)不完整問題了。

比較好的做法是向用戶提供一些反饋，說明在處于就緒狀態(tài) 3 時，很快就會有響應了。盡管使用 alert() 之類的函數(shù)顯然不是什么好主意 —— 使用 Ajax 然后使用一個警告對話框來阻塞用戶顯然是錯誤的 —— 不過您可以在就緒狀態(tài)發(fā)生變化時更新表單或頁面中的域。例如，對于就緒狀態(tài) 1 來說要將進度指示器的寬度設置為 25%，對于就緒狀態(tài) 2 來說要將進度指示器的寬度設置為 50%，對于就緒狀態(tài) 3 來說要將進度指示器的寬度設置為 75%，當就緒狀態(tài)為 4 時將進度指示器的寬度設置為 100%（完成）。

當然，正如您已經(jīng)看到的一樣，這種方法非常聰明，但它是依賴于瀏覽器的。在 Opera 上，您永遠都不會看到前兩個就緒狀態(tài)，而在 Safari 上則沒有第一個（1）。由于這個原因，我將這段代碼留作練習，而沒有在本文中包括進來。

現(xiàn)在應該來看一下狀態(tài)代碼了。

完整版

本站僅提供存儲服務，所有內(nèi)容均由用戶發(fā)布，如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請點擊舉報。

国产一级a片免费看高清,亚洲熟女中文字幕在线视频,黄三级高清在线播放,免费黄色视频在线看