国产精品色片,精品国产一区二区三区在线观看,免费一级大毛片a一观看不卡

掌握 Ajax，第 3 部分: Ajax 中的高級(jí)請(qǐng)求和響應(yīng)(1)

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


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

  討論

  樣例代碼

最新推薦
  Java 應(yīng)用開發(fā)源動(dòng)力－下載免費(fèi)軟件，快速啟動(dòng)開發(fā)

級(jí)別: 初級(jí)

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

2006 年 3 月 23 日

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

在本文中，我將在上一篇文章的基礎(chǔ)上重點(diǎn)介紹這個(gè)請(qǐng)求對(duì)象的 3 個(gè)關(guān)鍵部分的內(nèi)容：

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

XMLHttpRequest 或 XMLHttp：換名玫瑰

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

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

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

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

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

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)最常見（也是最簡(jiǎn)單）的用法。正如您從數(shù)字 "4" 中可以看出的一樣，還有其他幾個(gè)就緒狀態(tài)（您在上一篇文章中也看到過這個(gè)清單 —— 請(qǐng)參見參考資料）：

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

隱秘就緒狀態(tài)

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

不過為了滿足我們的興趣，請(qǐng)參見清單 2 的內(nèi)容，其中顯示了如何在 readyState 被設(shè)置為 0 時(shí)來獲取這種就緒狀態(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);
}

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

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

當(dāng) 0 等于 4 時(shí)

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

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

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

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

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

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

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

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

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

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

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

瀏覽器的不一致性

在對(duì)這個(gè)過程有一個(gè)基本的了解之后，請(qǐng)?jiān)囍鴱膸讉€(gè)不同的瀏覽器中訪問您的頁面。您應(yīng)該會(huì)注意到各個(gè)瀏覽器如何處理這些就緒狀態(tài)并不一致。例如，在 Firefox 1.5 中，您會(huì)看到以下就緒狀態(tài)：

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

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

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

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

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

接下來我們?cè)賮砜匆幌马憫?yīng)端的情況。

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

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

清單 4. 使用服務(wù)器上返回的響應(yīng)

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 相當(dāng)簡(jiǎn)單；清單 4 稍微有點(diǎn)復(fù)雜，但是它們?cè)陂_始時(shí)都要檢查就緒狀態(tài)，并獲取 responseText 屬性的值。

查看請(qǐng)求的響應(yīng)文本

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

清單 5. 測(cè)試 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 應(yīng)用程序，并激活您的請(qǐng)求。要更好地看到這段代碼的效果，請(qǐng)使用 Firefox 或 Internet Explorer，因?yàn)檫@兩個(gè)瀏覽器都可以報(bào)告出請(qǐng)求過程中所有可能的就緒狀態(tài)。例如在就緒狀態(tài) 2 中，就沒有定義 responseText （請(qǐng)參見圖 3）；如果 JavaScript 控制臺(tái)也已經(jīng)打開了，您就會(huì)看到一個(gè)錯(cuò)誤。

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

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

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

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

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

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

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

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

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

完整版

本站僅提供存儲(chǔ)服務(wù)，所有內(nèi)容均由用戶發(fā)布，如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請(qǐng)點(diǎn)擊舉報(bào)。

免费视频淫片aa毛片_日韩高清在线亚洲专区vr_日韩大片免费观看视频播放_亚洲欧美国产精品完整版