|
掌握 Ajax，第 3 部分: Ajax 中的高級請求和響應(yīng)(1) 掌握 Ajax，第 3 部分: Ajax 中的高級請求和響應(yīng) 全面理解 HTTP 的狀態(tài)代碼、就緒狀態(tài)和 XMLHttpRequest 對象 文檔選項 將此頁作為電子郵件發(fā)送 討論 樣例代碼 最新推薦 Java 應(yīng)用開發(fā)源動力 － 下載免費軟件，快速啟動開發(fā) 級別: 初級 Brett McLaughlin, 作家，編輯, O‘Reilly Media Inc. 2006 年 3 月 23 日 對于很多 Web 開發(fā)人員來說，只需要生成簡單的請求并接收簡單的響應(yīng)即可；但是對于希望掌握 Ajax 的開發(fā)人員來說，必須要全面理解 HTTP 狀態(tài)代碼、就緒狀態(tài)和 XMLHttpRequest 對象。在本文中，Brett McLaughlin 將向您介紹各種狀態(tài)代碼，并展示瀏覽器如何對其進(jìn)行處理，本文還給出了在 Ajax 中使用的比較少見的 HTTP 請求。 在本系列的 上篇文章 中，我們將詳細(xì)介紹 XMLHttpRequest 對象，它是 Ajax 應(yīng)用程序的中心，負(fù)責(zé)處理服務(wù)器端應(yīng)用程序和腳本的請求，并處理從服務(wù)器端組件返回的數(shù)據(jù)。由于所有的 Ajax 應(yīng)用程序都要使用 XMLHttpRequest 對象，因此您可能會希望熟悉這個對象，從而能夠讓 Ajax 執(zhí)行得更好。 在本文中，我將在上一篇文章的基礎(chǔ)上重點介紹這個請求對象的 3 個關(guān)鍵部分的內(nèi)容： HTTP 就緒狀態(tài) HTTP 狀態(tài)代碼 可以生成的請求類型 這三部分內(nèi)容都是在構(gòu)造一個請求時所要考慮的因素；但是介紹這些主題的內(nèi)容太少了。然而，如果您不僅僅是想了解 Ajax 編程的常識，而是希望了解更多內(nèi)容，就需要熟悉就緒狀態(tài)、狀態(tài)代碼和請求本身的內(nèi)容。當(dāng)應(yīng)用程序出現(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 作為請求對象的意圖。（有關(guān)這個問題的更多內(nèi)容，請參見 第 2 部分。） 下面讓我們首先來看一下 HTTP 就緒狀態(tài)。 深入了解 HTTP 就緒狀態(tài) 您應(yīng)該還記得在上一篇文章中 XMLHttpRequest 對象有一個名為 readyState 的屬性。這個屬性確保服務(wù)器已經(jīng)完成了一個請求，通常會使用一個回調(diào)函數(shù)從服務(wù)器中讀出數(shù)據(jù)來更新 Web 表單或頁面的內(nèi)容。清單 1 給出了一個簡單的例子（這也是本系列的上一篇文章中的一個例子 —— 請參見 參考資料）。 清單 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)最常見（也是最簡單）的用法。正如您從數(shù)字 "4" 中可以看出的一樣，還有其他幾個就緒狀態(tài)（您在上一篇文章中也看到過這個清單 —— 請參見 參考資料）： 0：請求未初始化（還沒有調(diào)用 open()）。 1：請求已經(jīng)建立，但是還沒有發(fā)送（還沒有調(diào)用 send()）。 2：請求已發(fā)送，正在處理中（通?，F(xiàn)在可以從響應(yīng)中獲取內(nèi)容頭）。 3：請求在處理中；通常響應(yīng)中已有部分?jǐn)?shù)據(jù)可用了，但是服務(wù)器還沒有完成響應(yīng)的生成。 4：響應(yīng)已完成；您可以獲取并使用服務(wù)器的響應(yīng)了。 如果您希望不僅僅是了解 Ajax 編程的基本知識，那么就不但需要知道這些狀態(tài)，了解這些狀態(tài)是何時出現(xiàn)的，以及如何來使用這些狀態(tài)。首先，您需要學(xué)習(xí)在每種就緒狀態(tài)下可能碰到的是哪種請求狀態(tài)。不幸的是，這一點并不直觀，而且會涉及幾種特殊的情況。 隱秘就緒狀態(tài) 第一種就緒狀態(tài)的特點是 readyState 屬性為 0（readyState == 0），表示未初始化狀態(tài)。一旦對請求對象調(diào)用 open() 之后，這個屬性就被設(shè)置為 1。由于您通常都是在一對請求進(jìn)行初始化之后就立即調(diào)用 open()，因此很少會看到 readyState == 0 的狀態(tài)。另外，未初始化的就緒狀態(tài)在實際的應(yīng)用程序中是沒有真正的用處的。 不過為了滿足我們的興趣，請參見 清單 2 的內(nèi)容，其中顯示了如何在 readyState 被設(shè)置為 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 給出了運行這個應(yīng)用程序的結(jié)果。 圖 1. 就緒狀態(tài) 0 當(dāng) 0 等于 4 時 在多個 JavaScript 函數(shù)都使用相同的請求對象時，您需要檢查就緒狀態(tài) 0 來確保這個請求對象沒有正在使用，這種機(jī)制會產(chǎn)生問題。由于 readyState == 4 表示一個已完成的請求，因此您經(jīng)常會發(fā)現(xiàn)那些目前沒在使用的處于就緒狀態(tài)的請求對象仍然被設(shè)置成了 4 —— 這是因為從服務(wù)器返回來的數(shù)據(jù)已經(jīng)使用過了，但是從它們被設(shè)置為就緒狀態(tài)之后就沒有進(jìn)行任何變化。有一個函數(shù) abort() 會重新設(shè)置請求對象，但是這個函數(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)歷典型的請求和響應(yīng)的其他幾種就緒狀態(tài)，最后才以就緒狀態(tài) 4 的形式結(jié)束。這就是為什么您在大部分回調(diào)函數(shù)中都可以看到 if (request.readyState == 4) 這行代碼；它確保服務(wù)器已經(jīng)完成對請求的處理，現(xiàn)在可以安全地更新 Web 頁面或根據(jù)從服務(wù)器返回來的數(shù)據(jù)來進(jìn)行操作了。 要查看這種狀態(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ù)，并讓它向服務(wù)器端的組件發(fā)送一個請求（例如 清單 2 給出的函數(shù)，或本系列文章的第 1 部分和第 2 部分中給出的例子）。確保在建立請求時，將回調(diào)函數(shù)設(shè)置為 updatePage()；要實現(xiàn)這種設(shè)置，可以將請求對象的 onreadystatechange 屬性設(shè)置為 updatePage()。 這段代碼就是 onreadystatechange 意義的一個確切展示 —— 每次請求的就緒狀態(tài)發(fā)生變化時，就調(diào)用 updatePage()，然后我們就可以看到一個警告了。圖 2 給出了一個調(diào)用這個函數(shù)的例子，其中就緒狀態(tài)為 1。 圖 2. 就緒狀態(tài) 1 您可以自己嘗試運行這段代碼。將其放入 Web 頁面中，然后激活事件處理程序（單擊按鈕，在域之間按 tab 鍵切換焦點，或者使用設(shè)置的任何方法來觸發(fā)請求）。這個回調(diào)函數(shù)會運行多次 —— 每次就緒狀態(tài)都會改變 —— 您可以看到每個就緒狀態(tài)的警告。這是跟蹤請求所經(jīng)歷的各個階段的最好方法。 瀏覽器的不一致性 在對這個過程有一個基本的了解之后，請試著從幾個不同的瀏覽器中訪問您的頁面。您應(yīng)該會注意到各個瀏覽器如何處理這些就緒狀態(tài)并不一致。例如，在 Firefox 1.5 中，您會看到以下就緒狀態(tài)： 1 2 3 4 這并不奇怪，因為每個請求狀態(tài)都在這里表示出來了。然而，如果您使用 Safari 來訪問相同的應(yīng)用程序，就應(yīng)該看到 —— 或者看不到 —— 一些有趣的事情。下面是在 Safari 2.0.1 中看到的狀態(tài)： 2 3 4 Safari 實際上把第一個就緒狀態(tài)給丟棄了，也并沒有什么明顯的原因說明為什么要這樣做；不過這就是 Safari 的工作方式。這還說明了一個重要的問題：盡管在使用服務(wù)器上的數(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 都進(jìn)行一下測試 —— 您會看到所有這 4 種狀態(tài)，并可以檢查請求的每個狀態(tài)所處的情況。 接下來我們再來看一下響應(yīng)端的情況。 顯微鏡下的響應(yīng)數(shù)據(jù) 一旦我們理解在請求過程中發(fā)生的各個就緒狀態(tài)之后，接下來就可以來看一下 XMLHttpRequest 對象的另外一個方面了 —— responseText 屬性。回想一下在上一篇文章中我們介紹過的內(nèi)容，就可以知道這個屬性用來從服務(wù)器上獲取數(shù)據(jù)。一旦服務(wù)器完成對請求的處理之后，就可以將響應(yīng)請求數(shù)據(jù)所需要的任何數(shù)據(jù)放到請求的 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)簡單；清單 4 稍微有點復(fù)雜，但是它們在開始時都要檢查就緒狀態(tài)，并獲取 responseText 屬性的值。 查看請求的響應(yīng)文本 與就緒狀態(tài)類似，responseText 屬性的值在整個請求的生命周期中也會發(fā)生變化。要查看這種變化，請使用如 清單 5 所示的代碼來測試請求的響應(yīng)文本，以及它們的就緒狀態(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 應(yīng)用程序，并激活您的請求。要更好地看到這段代碼的效果，請使用 Firefox 或 Internet Explorer，因為這兩個瀏覽器都可以報告出請求過程中所有可能的就緒狀態(tài)。例如在就緒狀態(tài) 2 中，就沒有定義 responseText （請參見 圖 3）；如果 JavaScript 控制臺也已經(jīng)打開了，您就會看到一個錯誤。 圖 3. 就緒狀態(tài)為 2 的響應(yīng)文本 不過在就緒狀態(tài) 3 中，服務(wù)器已經(jīng)在 responseText 屬性中放上了一個值，至少在這個例子中是這樣（請參見 圖 4）。 圖 4. 就緒狀態(tài)為 3 的響應(yīng)文本 您會看到就緒狀態(tài)為 3 的響應(yīng)在每個腳本、每個服務(wù)器甚至每個瀏覽器上都是不一樣的。不過，這在調(diào)試應(yīng)用程序中依然是非常有用的。 獲取安全數(shù)據(jù) 所有的文檔和規(guī)范都強調(diào)，只有在就緒狀態(tài)為 4 時數(shù)據(jù)才可以安全使用。相信我，當(dāng)就緒狀態(tài)為 3 時，您很少能找到無法從 responseText 屬性獲取數(shù)據(jù)的情況。然而，在應(yīng)用程序中將自己的邏輯依賴于就緒狀態(tài) 3 可不是什么好主意 —— 一旦您編寫了依賴于就緒狀態(tài) 3 的完整數(shù)據(jù)的的代碼，幾乎就要自己來負(fù)責(zé)當(dāng)時的數(shù)據(jù)不完整問題了。 比較好的做法是向用戶提供一些反饋，說明在處于就緒狀態(tài) 3 時，很快就會有響應(yīng)了。盡管使用 alert() 之類的函數(shù)顯然不是什么好主意 —— 使用 Ajax 然后使用一個警告對話框來阻塞用戶顯然是錯誤的 —— 不過您可以在就緒狀態(tài)發(fā)生變化時更新表單或頁面中的域。例如，對于就緒狀態(tài) 1 來說要將進(jìn)度指示器的寬度設(shè)置為 25%，對于就緒狀態(tài) 2 來說要將進(jìn)度指示器的寬度設(shè)置為 50%，對于就緒狀態(tài) 3 來說要將進(jìn)度指示器的寬度設(shè)置為 75%，當(dāng)就緒狀態(tài)為 4 時將進(jìn)度指示器的寬度設(shè)置為 100%（完成）。 當(dāng)然，正如您已經(jīng)看到的一樣，這種方法非常聰明，但它是依賴于瀏覽器的。在 Opera 上，您永遠(yuǎn)都不會看到前兩個就緒狀態(tài)，而在 Safari 上則沒有第一個（1）。由于這個原因，我將這段代碼留作練習(xí)，而沒有在本文中包括進(jìn)來。 現(xiàn)在應(yīng)該來看一下狀態(tài)代碼了。 完整版 |
|
|
