對于很多 web 開發(fā)人員來說，只需要生成簡單的請求并接收簡單的響應(yīng)即可;但是對于希望掌握 ajax 的開發(fā)人員來說，必須要全面理解 http 狀態(tài)代碼、就緒狀態(tài)和 xmlhttprequest 對象。

在本文中，將重點(diǎn)介紹這個(gè)請求對象的 3 個(gè)關(guān)鍵部分的內(nèi)容:

• http 就緒狀態(tài)
• http 狀態(tài)代碼
• 可以生成的請求類型

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

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

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

您應(yīng)該還記得在上一篇文章中 xmlhttprequest 對象有一個(gè)名為 readystate 的屬性。這個(gè)屬性確保服務(wù)器已經(jīng)完成了一個(gè)請求，通常會使用一個(gè)回調(diào)函數(shù)從服務(wù)器中讀出數(shù)據(jù)來更新 web 表單或頁面的內(nèi)容。清單 1 給出了一個(gè)簡單的例子。

清單 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, "

");

} else

alert("status is " + request.status);

}

}

這顯然是就緒狀態(tài)最常見(也是最簡單)的用法。正如您從數(shù)字 "4" 中可以看出的一樣，還有其他幾個(gè)就緒狀態(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)是何時(shí)出現(xiàn)的，以及如何來使用這些狀態(tài)。首先，您需要學(xué)習(xí)在每種就緒狀態(tài)下可能碰到的是哪種請求狀態(tài)。不幸的是，這一點(diǎn)并不直觀，而且會涉及幾種特殊的情況。

隱秘就緒狀態(tài)

第一種就緒狀態(tài)的特點(diǎn)是 readystate 屬性為 0(readystate == 0)，表示未初始化狀態(tài)。一旦對請求對象調(diào)用 open() 之后，這個(gè)屬性就被設(shè)置為 1。由于您通常都是在一對請求進(jìn)行初始化之后就立即調(diào)用 open()，因此很少會看到 readystate == 0 的狀態(tài)。另外，未初始化的就緒狀態(tài)在實(shí)際的應(yī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è)簡單的例子中，getsalesdata() 是 web 頁面調(diào)用來啟動請求(例如點(diǎn)擊一個(gè)按鈕時(shí))所使用的函數(shù)。注意您必須在調(diào)用 open()之前 來查看就緒狀態(tài)。圖 1 給出了運(yùn)行這個(gè)應(yīng)用程序的結(jié)果。

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

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

 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 稍微有點(diǎn)復(fù)雜，但是它們在開始時(shí)都要檢查就緒狀態(tài)，并獲取 responsetext 屬性的值。

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

與就緒狀態(tài)類似，responsetext 屬性的值在整個(gè)請求的生命周期中也會發(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，因?yàn)檫@兩個(gè)瀏覽器都可以報(bào)告出請求過程中所有可能的就緒狀態(tài)。例如在就緒狀態(tài) 2 中，就沒有定義 responsetext (請參見 圖 3);如果 javascript 控制臺也已經(jīng)打開了，您就會看到一個(gè)錯(cuò)誤。

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

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

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

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

 function updatepage() {

if (request.readystate == 4) {

var response = request.responsetext.split("|");

document.getelementbyid("order").value = response[0];

document.getelementbyid("address").innerhtml =

response[1].replace(/\n/g, "

");

}

}

這對于 ajax 編程來說證明是一種短視而錯(cuò)誤的方法。如果腳本需要認(rèn)證，而請求卻沒有提供有效的證書，那么服務(wù)器就會返回諸如 403 或 401 之類的錯(cuò)誤代碼。然而，由于服務(wù)器對請求進(jìn)行了應(yīng)答，因此就緒狀態(tài)就被設(shè)置為 4(即使應(yīng)答并不是請求所期望的也是如此)。最終，用戶沒有獲得有效數(shù)據(jù)，當(dāng) javascript 試圖使用不存在的服務(wù)器數(shù)據(jù)時(shí)就可能會出現(xiàn)嚴(yán)重的錯(cuò)誤。

它花費(fèi)了最小的努力來確保服務(wù)器不但完成了一個(gè)請求，而且還返回了一個(gè) “一切良好” 的狀態(tài)代碼。這個(gè)代碼是 "200"，它是通過 xmlhttprequest 對象的 status 屬性來報(bào)告的。為了確保服務(wù)器不但完成了一個(gè)請求，而且還報(bào)告了一個(gè) ok 狀態(tài)，請?jiān)谀幕卣{(diào)函數(shù)中添加另外一個(gè)檢查功能，如 清單 7 所示。

清單 7. 檢查有效狀態(tài)代碼

 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, "

");

} else

alert("status is " + request.status);

}

}

通過添加這幾行代碼，您就可以確認(rèn)是否存在問題，用戶會看到一個(gè)有用的錯(cuò)誤消息，而不僅僅是看到一個(gè)由斷章取義的數(shù)據(jù)所構(gòu)成的頁面，而沒有任何解釋。

重定向和重新路由

在深入介紹有關(guān)錯(cuò)誤的內(nèi)容之前，我們有必要來討論一下有關(guān)一個(gè)在使用 ajax 時(shí) 并不需要 關(guān)心的問題 —— 重定向。在 http 狀態(tài)代碼中，這是 300 系列的狀態(tài)代碼，包括:

• 301:永久移動
• 302:找到(請求被重新定向到另外一個(gè) url/uri 上)
• 305:使用代理(請求必須使用一個(gè)代理來訪問所請求的資源)

ajax 程序員可能并不太關(guān)心有關(guān)重定向的問題，這是由于兩方面的原因:

• 首先，ajax 應(yīng)用程序通常都是為一個(gè)特定的服務(wù)器端腳本、servlet 或應(yīng)用程序而編寫的。對于那些您看不到就消失了的組件來說，ajax 程序員就不太清楚了。因此有時(shí)您會知道資源已經(jīng)移動了(因?yàn)槟苿恿怂?，或者通過某種手段移動了它)，接下來要修改請求中的 url，并且不會再碰到這種結(jié)果了。
• 更為重要的一個(gè)原因是:ajax 應(yīng)用程序和請求都是封裝在沙盒中的。這就意味著提供生成 ajax 請求的 web 頁面的域必須是對這些請求進(jìn)行響應(yīng)的域。因此 ebay.com 所提供的 web 頁面就不能對一個(gè)在 amazon.com 上運(yùn)行的腳本生成一個(gè) ajax 風(fēng)格的請求;在 ibm.com 上的 ajax 應(yīng)用程序也無法對在 netbeans.org 上運(yùn)行的 servlets 發(fā)出請求。

結(jié)果是您的請求無法重定向到其他服務(wù)器上，而不會產(chǎn)生安全性錯(cuò)誤。在這些情況中，您根本就不會得到狀態(tài)代碼。通常在調(diào)試控制臺中都會產(chǎn)生一個(gè) javascript 錯(cuò)誤。因此，在對狀態(tài)代碼進(jìn)行充分的考慮之后，您就可以完全忽略重定向代碼的問題了。

 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, "

");

} else if (request.status == 404) {

alert ("requested url is not found.");

} else if (request.status == 403) {

alert("access denied.");

} else

alert("status is " + request.status);

}

}

雖然這依然相當(dāng)簡單，但是它的確多提供了一些有用的信息。圖 6 給出了與 圖 5 相同的錯(cuò)誤，但是這一次錯(cuò)誤處理代碼向用戶或程序員更好地說明了究竟發(fā)生了什么。

圖 6. 特殊錯(cuò)誤處理

在我們自己的應(yīng)用程序中，可以考慮在發(fā)生認(rèn)證失敗的情況時(shí)清除用戶名和密碼，并向屏幕上添加一條錯(cuò)誤消息。我們可以使用類似的方法來更好地處理找不到腳本或其他 400 類型的錯(cuò)誤(例如 405 表示不允許使用諸如發(fā)送 head 請求之類不可接受的請求方法，而 407 則表示需要進(jìn)行代理認(rèn)證)。然而不管采用哪種選擇，都需要從對服務(wù)器上返回的狀態(tài)代碼開始入手進(jìn)行處理。

其他請求類型

如果您真希望控制 xmlhttprequest 對象，可以考慮最后實(shí)現(xiàn)這種功能 —— 將 head 請求添加到指令中。在前兩篇文章中，我們已經(jīng)介紹了如何生成 get 請求;在馬上就要發(fā)表的一篇文章中，您會學(xué)習(xí)有關(guān)使用 post 請求將數(shù)據(jù)發(fā)送到服務(wù)器上的知識。不過本著增強(qiáng)錯(cuò)誤處理和信息搜集的精神，您應(yīng)該學(xué)習(xí)如何生成 head 請求。

生成請求

實(shí)際上生成 head 請求非常簡單;您可以使用 "head"(而不是 "get" 或 "post")作為第一個(gè)參數(shù)來調(diào)用 open() 方法，如 清單 9 所示。

清單 9. 使用 ajax 生成一個(gè) head 請求

 function getsalesdata() {

createrequest();

var url = "/boards/servlet/updateboardsales";

request.open("head", url, true);

request.onreadystatechange = updatepage;

request.send(null);

}

當(dāng)您這樣生成一個(gè) head 請求時(shí)，服務(wù)器并不會像對 get 或 post 請求一樣返回一個(gè)真正的響應(yīng)。相反，服務(wù)器只會返回資源的 頭(header)，這包括響應(yīng)中內(nèi)容最后修改的時(shí)間、請求資源是否存在和很多其他有用信息。您可以在服務(wù)器處理并返回資源之前使用這些信息來了解有關(guān)資源的信息。

 function updatepage() {

if (request.readystate == 4) {

alert(request.getallresponseheaders());

}

}

請參見 圖 7，其中顯示了從一個(gè)向服務(wù)器發(fā)出的 head 請求的簡單 ajax 應(yīng)用程序返回的響應(yīng)頭。

圖 7. head 請求的響應(yīng)頭

您可以單獨(dú)使用這些頭(從服務(wù)器類型到內(nèi)容類型)在 ajax 應(yīng)用程序中提供其他信息或功能。

檢查 url

您已經(jīng)看到了當(dāng) url 不存在時(shí)應(yīng)該如何檢查 404 錯(cuò)誤。如果這變成一個(gè)常見的問題 —— 可能是缺少了一個(gè)特定的腳本或 servlet —— 那么您就可能會希望在生成完整的 get 或 post 請求之前來檢查這個(gè) url。要實(shí)現(xiàn)這種功能，生成一個(gè) head 請求，然后在回調(diào)函數(shù)中檢查 404 錯(cuò)誤;清單 11 給出了一個(gè)簡單的回調(diào)函數(shù)。

清單 11. 檢查某個(gè) url 是否存在

 function updatepage() {

if (request.readystate == 4) {

if (request.status == 200) {

alert("url exists");

} else if (request.status == 404) {

alert("url does not exist.");

} else {

alert("status is: " + request.status);

}

}

}

誠實(shí)地說，這段代碼的價(jià)值并不太大。服務(wù)器必須對請求進(jìn)行響應(yīng)，并構(gòu)造一個(gè)響應(yīng)來填充內(nèi)容長度的響應(yīng)頭，因此并不能節(jié)省任何處理時(shí)間。另外，這花費(fèi)的時(shí)間與生成請求并使用 head 請求來查看 url 是否存在所需要的時(shí)間一樣多，因?yàn)樗墒褂?get 或 post 的請求，而不僅僅是如 清單 7 所示一樣來處理錯(cuò)誤代碼。不過，有時(shí)確切地了解目前什么可用也是非常有用的;您永遠(yuǎn)不會知道何時(shí)創(chuàng)造力就會迸發(fā)或者何時(shí)需要 head 請求!

有用的 head 請求

您會發(fā)現(xiàn) head 請求非常有用的一個(gè)領(lǐng)域是用來查看內(nèi)容的長度或內(nèi)容的類型。這樣可以確定是否需要發(fā)回大量數(shù)據(jù)來處理請求，和服務(wù)器是否試圖返回二進(jìn)制數(shù)據(jù)，而不是 html、文本或 xml(在 javascript 中，這 3 種類型的數(shù)據(jù)都比二進(jìn)制數(shù)據(jù)更容易處理)。

在這些情況中，您只使用了適當(dāng)?shù)念^名，并將其傳遞給 xmlhttprequest 對象的 getresponseheader() 方法。因此要獲取響應(yīng)的長度，只需要調(diào)用 request.getresponseheader("content-length");。要獲取內(nèi)容類型，請使用 request.getresponseheader("content-type");。

在很多應(yīng)用程序中，生成 head 請求并沒有增加任何功能，甚至可能會導(dǎo)致請求速度變慢(通過強(qiáng)制生成一個(gè) head 請求來獲取有關(guān)響應(yīng)的數(shù)據(jù)，然后在使用一個(gè) get 或 post 請求來真正獲取響應(yīng))。然而，在出現(xiàn)您不確定有關(guān)腳本或服務(wù)器端組件的情況時(shí)，使用 head 請求可以獲取一些基本的數(shù)據(jù)，而不需要對響應(yīng)數(shù)據(jù)真正進(jìn)行處理，也不需要大量的帶寬來發(fā)送響應(yīng)。

結(jié)束語

對于很多 ajax 和 web 程序員來說，本文中介紹的內(nèi)容似乎是太高級了。生成 head 請求的價(jià)值是什么呢?到底在什么情況下需要在 javascript 中顯式地處理重定向狀態(tài)代碼呢?這些都是很好的問題;對于簡單的應(yīng)用程序來說，答案是這些高級技術(shù)的價(jià)值并不是非常大。

然而，web 已經(jīng)不再是只需實(shí)現(xiàn)簡單應(yīng)用程序的地方了;用戶已經(jīng)變得更加高級，客戶期望能夠獲得更好的穩(wěn)定性、更高級的錯(cuò)誤報(bào)告，如果應(yīng)用程序有 1% 的時(shí)間停機(jī)，那么經(jīng)理就可能會因此而被解雇。

因此您的工作就不能僅僅局限于簡單的應(yīng)用程序了，而是需要更深入理解 xmlhttprequest。

如果您可以考慮各種就緒狀態(tài) —— 并且理解了這些就緒狀態(tài)在不同瀏覽器之間的區(qū)別 —— 就可以快速調(diào)試應(yīng)用程序了。您甚至可以基于就緒狀態(tài)而開發(fā)一些創(chuàng)造性的功能，并向用戶和客戶回報(bào)請求的狀態(tài)。

如果您要對狀態(tài)代碼進(jìn)行控制，就可以設(shè)置應(yīng)用程序來處理腳本錯(cuò)誤、非預(yù)期的響應(yīng)以及邊緣情況。結(jié)果是應(yīng)用程序在所有的時(shí)間都可以正常工作，而不僅僅是只能一切都正常的情況下才能運(yùn)行。

增加這種生成 head 請求的能力，檢查某個(gè) url 是否存在，以及確認(rèn)某個(gè)文件是否被修改過，這樣就可以確保用戶可以獲得有效的頁面，用戶所看到的信息都是最新的，(最重要的是)讓他們驚訝這個(gè)應(yīng)用程序是如何健壯和通用。

本文的目的并非是要讓您的應(yīng)用程序顯得十分華麗，而是幫助您去掉黃色聚光燈后重點(diǎn)昭顯文字的美麗，或者外觀更像桌面一樣。盡管這些都是 ajax 的功能(在后續(xù)幾篇文章中就會介紹)，不過它們卻像是蛋糕表面的一層奶油。如果您可以使用 ajax 來構(gòu)建一個(gè)堅(jiān)實(shí)的基礎(chǔ)，讓應(yīng)用程序可以很好地處理錯(cuò)誤和問題，用戶就會返回您的站點(diǎn)和應(yīng)用程序。