本系列的上一期文章(請(qǐng)參閱 參考資料 中的鏈接),我們介紹了 Ajax 應(yīng)用程序,考察了推動(dòng) Ajax 應(yīng)用程序的基本概念。其中的核心是很多您可能已經(jīng)了解的技術(shù):JavaScript、HTML 和 XHTML、一點(diǎn)動(dòng)態(tài) HTML 以及 DOM(文檔對(duì)象模型)。本文將放大其中的一點(diǎn),把目光放到具體的 Ajax 細(xì)節(jié)上。
本文中,您將開(kāi)始接觸最基本和基礎(chǔ)性的有關(guān) Ajax 的全部對(duì)象和編程方法:
XMLHttpRequest
對(duì)象。該對(duì)象實(shí)際上僅僅是一個(gè)跨越所有 Ajax 應(yīng)用程序的公共線程,您可能已經(jīng)預(yù)料到,只有徹底理解該對(duì)象才能充分發(fā)揮編程的潛力。事實(shí)上,有時(shí)您會(huì)發(fā)現(xiàn),要正確地使用
XMLHttpRequest
,顯然
不能
使用
XMLHttpRequest
。這到底是怎么回事呢?
在深入研究代碼之前首先看看最近的觀點(diǎn) —— 一定要十分清楚 Web 2.0 這個(gè)概念。聽(tīng)到 Web 2.0 這個(gè)詞的時(shí)候,應(yīng)該首先問(wèn)一問(wèn) “Web 1.0 是什么?” 雖然很少聽(tīng)人提到 Web 1.0,實(shí)際上它指的就是具有完全不同的請(qǐng)求和響應(yīng)模型的傳統(tǒng) Web。比如,到 Amazon.com 網(wǎng)站上點(diǎn)擊一個(gè)按鈕或者輸入搜索項(xiàng)。就會(huì)對(duì)服務(wù)器發(fā)送一個(gè)請(qǐng)求,然后響應(yīng)再返回到瀏覽器。該請(qǐng)求不僅僅是圖書(shū)和書(shū)目列表,而是另一個(gè)完整的 HTML 頁(yè)面。因此當(dāng) Web 瀏覽器用新的 HTML 頁(yè)面重繪時(shí),可能會(huì)看到閃爍或抖動(dòng)。事實(shí)上,通過(guò)看到的每個(gè)新頁(yè)面可以清晰地看到請(qǐng)求和響應(yīng)。
Web 2.0(在很大程度上)消除了這種看得見(jiàn)的往復(fù)交互。比如訪問(wèn) Google Maps 或 Flickr 這樣的站點(diǎn)(到這些支持 Web 2.0 和 Ajax 站點(diǎn)的鏈接請(qǐng)參閱 參考資料 )。比如在 Google Maps 上,您可以拖動(dòng)地圖,放大和縮小,只有很少的重繪操作。當(dāng)然這里仍然有請(qǐng)求和響應(yīng),只不過(guò)都 藏到了幕后 。作為用戶,體驗(yàn)更加舒適,感覺(jué)很像桌面應(yīng)用程序。這種新的感受和范型就是當(dāng)有人提到 Web 2.0 時(shí)您所體會(huì)到的。
需要關(guān)心的是如何使這些新的交互成為可能。顯然,仍然需要發(fā)出請(qǐng)求和接收響應(yīng),但正是針對(duì)每次請(qǐng)求/響應(yīng)交互的 HTML 重繪造成了緩慢、笨拙的 Web 交互的感受。因此很清楚,我們需要一種方法使發(fā)送的請(qǐng)求和接收的響應(yīng) 只 包含需要的數(shù)據(jù)而不是整個(gè) HTML 頁(yè)面。惟一需要獲得整個(gè)新 HTML 頁(yè)面的時(shí)候就是希望用戶 看到 新頁(yè)面的時(shí)候。
但多數(shù)交互都是在已有頁(yè)面上增加細(xì)節(jié)、修改主體文本或者覆蓋原有數(shù)據(jù)。這些情況下,Ajax 和 Web 2.0 方法允許在 不 更新整個(gè) HTML 頁(yè)面的情況下發(fā)送和接收數(shù)據(jù)。對(duì)于那些經(jīng)常上網(wǎng)的人,這種能力可以讓您的應(yīng)用程序感覺(jué)更快、響應(yīng)更及時(shí),讓他們不時(shí)地光顧您的網(wǎng)站。
要真正實(shí)現(xiàn)這種絢麗的奇跡,必須非常熟悉一個(gè) JavaScript 對(duì)象,即
XMLHttpRequest
。這個(gè)小小的對(duì)象實(shí)際上已經(jīng)在幾種瀏覽器中存在一段時(shí)間了,它是本專欄今后幾個(gè)月中要介紹的 Web 2.0、Ajax 和大部分其他內(nèi)容的核心。為了讓您快速地大體了解它,下面給出將要用于該對(duì)象的
很少的幾個(gè)
方法和屬性。
-
open()
:建立到服務(wù)器的新請(qǐng)求。 -
send()
:向服務(wù)器發(fā)送請(qǐng)求。 -
abort()
:退出當(dāng)前請(qǐng)求。 -
readyState
:提供當(dāng)前 HTML 的就緒狀態(tài)。 -
responseText
:服務(wù)器返回的請(qǐng)求響應(yīng)文本。
如果不了解這些(或者其中的
任何
一個(gè)),您也不用擔(dān)心,后面幾篇文章中我們將介紹每個(gè)方法和屬性。現(xiàn)在
應(yīng)該
了解的是,明確用
XMLHttpRequest
做什么。要注意這些方法和屬性都與發(fā)送請(qǐng)求及處理響應(yīng)有關(guān)。事實(shí)上,如果看到
XMLHttpRequest
的所有方法和屬性,就會(huì)發(fā)現(xiàn)它們
都
與非常簡(jiǎn)單的請(qǐng)求/響應(yīng)模型有關(guān)。顯然,我們不會(huì)遇到特別新的 GUI 對(duì)象或者創(chuàng)建用戶交互的某種超極神秘的方法,我們將使用非常簡(jiǎn)單的請(qǐng)求和非常簡(jiǎn)單的響應(yīng)。聽(tīng)起來(lái)似乎沒(méi)有多少吸引力,但是用好該對(duì)象可以徹底改變您的應(yīng)用程序。
首先需要?jiǎng)?chuàng)建一個(gè)新變量并賦給它一個(gè)
XMLHttpRequest
對(duì)象實(shí)例。這在 JavaScript 中很簡(jiǎn)單,只要對(duì)該對(duì)象名使用
new
關(guān)鍵字即可,如
清單 1
所示。
清單 1. 創(chuàng)建新的 XMLHttpRequest 對(duì)象
<script language="javascript" type="text/javascript"> var request = new XMLHttpRequest(); </script> |
不難吧?記住,JavaScript 不要求指定變量類型,因此不需要像 清單 2 那樣做(在 Java 語(yǔ)言中可能需要這樣)。
清單 2. 創(chuàng)建 XMLHttpRequest 的 Java 偽代碼
XMLHttpRequest request = new XMLHttpRequest(); |
因此在 JavaScript 中用
var
創(chuàng)建一個(gè)變量,給它一個(gè)名字(如 “request”),然后賦給它一個(gè)新的
XMLHttpRequest
實(shí)例。此后就可以在函數(shù)中使用該對(duì)象了。
在實(shí)際上各種事情都可能出錯(cuò),而上面的代碼沒(méi)有提供任何錯(cuò)誤處理。較好的辦法是創(chuàng)建該對(duì)象,并在出現(xiàn)問(wèn)題時(shí)優(yōu)雅地退出。比如,任何較早的瀏覽器(不論您是否相信,仍然有人在使用老版本的 Netscape Navigator)都不支持
XMLHttpRequest
,您需要讓這些用戶知道有些地方出了問(wèn)題。
清單 3
說(shuō)明如何創(chuàng)建該對(duì)象,以便在出現(xiàn)問(wèn)題的時(shí)候發(fā)出 JavaScript 警告。
清單 3. 創(chuàng)建具有錯(cuò)誤處理能力的 XMLHttpRequest
<script language="javascript" type="text/javascript"> var request = false; try { request = new XMLHttpRequest(); } catch (failed) { request = false; } if (!request) alert("Error initializing XMLHttpRequest!"); </script> |
一定要理解這些步驟:
-
創(chuàng)建一個(gè)新變量
request
并賦值 false。后面將使用 false 作為判定條件,它表示還沒(méi)有創(chuàng)建XMLHttpRequest
對(duì)象。 -
增加 try/catch 塊:
-
嘗試創(chuàng)建
XMLHttpRequest
對(duì)象。 -
如果失敗(
catch (failed)
)則保證request
的值仍然為 false。
-
嘗試創(chuàng)建
-
檢查
request
是否仍為 false(如果一切正常就不會(huì)是 false)。 -
如果出現(xiàn)問(wèn)題(
request
是 false)則使用 JavaScript 警告通知用戶出現(xiàn)了問(wèn)題。
代碼非常簡(jiǎn)單,對(duì)大多數(shù) JavaScript 和 Web 開(kāi)發(fā)人員來(lái)說(shuō),真正理解它要比讀寫(xiě)代碼花更長(zhǎng)的時(shí)間。現(xiàn)在已經(jīng)得到了一段帶有錯(cuò)誤檢查的
XMLHttpRequest
對(duì)象創(chuàng)建代碼,還可以告訴您哪兒出了問(wèn)題。
看起來(lái)似乎一切良好,至少在用 Internet Explorer 試驗(yàn)這些代碼之前是這樣的。如果這樣試驗(yàn)的話,就會(huì)看到 圖 1 所示的糟糕情形。
圖 1. Internet Explorer 報(bào)告錯(cuò)誤
顯然有什么地方不對(duì)勁,而 Internet Explorer 很難說(shuō)是一種過(guò)時(shí)的瀏覽器,因?yàn)槿澜缬?70% 在使用 Internet Explorer。換句話說(shuō),如果不支持 Microsoft 和 Internet Explorer 就不會(huì)受到 Web 世界的歡迎!因此我們需要采用不同的方法處理 Microsoft 瀏覽器。
經(jīng)驗(yàn)證發(fā)現(xiàn) Microsoft 支持 Ajax,但是其
XMLHttpRequest
版本有不同的稱呼。事實(shí)上,它將其稱為
幾種
不同的東西。如果使用較新版本的 Internet Explorer,則需要使用對(duì)象
Msxml2.XMLHTTP
,而較老版本的 Internet Explorer 則使用
Microsoft.XMLHTTP
。我們需要支持這兩種對(duì)象類型(同時(shí)還要支持非 Microsoft 瀏覽器)。請(qǐng)看看
清單 4
,它在前述代碼的基礎(chǔ)上增加了對(duì) Microsoft 的支持。
清單 4. 增加對(duì) Microsoft 瀏覽器的支持
<script language="javascript" type="text/javascript"> var request = false; try { request = new XMLHttpRequest(); } catch (trymicrosoft) { try { request = new ActiveXObject("Msxml2.XMLHTTP"); } catch (othermicrosoft) { try { request = new ActiveXObject("Microsoft.XMLHTTP"); } catch (failed) { request = false; } } } if (!request) alert("Error initializing XMLHttpRequest!"); </script> |
很容易被這些花括號(hào)迷住了眼睛,因此下面分別介紹每一步:
-
創(chuàng)建一個(gè)新變量
request
并賦值 false。使用 false 作為判斷條件,它表示還沒(méi)有創(chuàng)建XMLHttpRequest
對(duì)象。 -
增加 try/catch 塊:
-
嘗試創(chuàng)建
XMLHttpRequest
對(duì)象。 -
如果失敗(
catch (trymicrosoft)
):-
嘗試使用較新版本的 Microsoft 瀏覽器創(chuàng)建 Microsoft 兼容的對(duì)象(
Msxml2.XMLHTTP
)。 -
如果失敗(
catch (othermicrosoft)
)嘗試使用較老版本的 Microsoft 瀏覽器創(chuàng)建 Microsoft 兼容的對(duì)象(Microsoft.XMLHTTP
)。
-
嘗試使用較新版本的 Microsoft 瀏覽器創(chuàng)建 Microsoft 兼容的對(duì)象(
-
如果失敗(
catch (failed)
)則保證request
的值仍然為 false。
-
嘗試創(chuàng)建
-
檢查
request
是否仍然為 false(如果一切順利就不會(huì)是 false)。 -
如果出現(xiàn)問(wèn)題(
request
是 false)則使用 JavaScript 警告通知用戶出現(xiàn)了問(wèn)題。
這樣修改代碼之后再使用 Internet Explorer 試驗(yàn),就應(yīng)該看到已經(jīng)創(chuàng)建的表單(沒(méi)有錯(cuò)誤消息)。我實(shí)驗(yàn)的結(jié)果如 圖 2 所示。
再看一看清單
1
、
3
和
4
,注意,所有這些代碼都直接嵌套在
script
標(biāo)記中。像這種不放到方法或函數(shù)體中的 JavaScript 代碼稱為
靜態(tài) JavaScript
。就是說(shuō)代碼是在頁(yè)面顯示給用戶之前的某個(gè)時(shí)候運(yùn)行。(雖然根據(jù)規(guī)范不能完全
精確地
知道這些代碼何時(shí)運(yùn)行對(duì)瀏覽器有什么影響,但是可以保證這些代碼在用戶能夠與頁(yè)面交互之前運(yùn)行。)這也是多數(shù) Ajax 程序員創(chuàng)建
XMLHttpRequest
對(duì)象的一般方式。
就是說(shuō),也可以像 清單 5 那樣將這些代碼放在一個(gè)方法中。
清單 5. 將 XMLHttpRequest 創(chuàng)建代碼移動(dòng)到方法中
<script language="javascript" type="text/javascript"> var request; function createRequest() { try { request = new XMLHttpRequest(); } catch (trymicrosoft) { try { request = new ActiveXObject("Msxml2.XMLHTTP"); } catch (othermicrosoft) { try { request = new ActiveXObject("Microsoft.XMLHTTP"); } catch (failed) { request = false; } } } if (!request) alert("Error initializing XMLHttpRequest!"); } </script> |
如果按照這種方式編寫(xiě)代碼,那么在處理 Ajax 之前需要調(diào)用該方法。因此還需要 清單 6 這樣的代碼。
清單 6. 使用 XMLHttpRequest 的創(chuàng)建方法
<script language="javascript" type="text/javascript"> var request; function createRequest() { try { request = new XMLHttpRequest(); } catch (trymicrosoft) { try { request = new ActiveXObject("Msxml2.XMLHTTP"); } catch (othermicrosoft) { try { request = new ActiveXObject("Microsoft.XMLHTTP"); } catch (failed) { request = false; } } } if (!request) alert("Error initializing XMLHttpRequest!"); } function getCustomerInfo() { createRequest(); // Do something with the request variable } </script> |
此代碼惟一的問(wèn)題是推遲了錯(cuò)誤通知,這也是多數(shù) Ajax 程序員不采用這一方法的原因。假設(shè)一個(gè)復(fù)雜的表單有 10 或 15 個(gè)字段、選擇框等,當(dāng)用戶在第 14 個(gè)字段(按照表單順序從上到下)輸入文本時(shí)要激活某些 Ajax 代碼。這時(shí)候運(yùn)行
getCustomerInfo()
嘗試創(chuàng)建一個(gè)
XMLHttpRequest
對(duì)象,但(對(duì)于本例來(lái)說(shuō))失敗了。然后向用戶顯示一條警告,明確地告訴他們不能使用該應(yīng)用程序。但用戶已經(jīng)花費(fèi)了很多時(shí)間在表單中輸入數(shù)據(jù)!這是非常令人討厭的,而討厭顯然不會(huì)吸引用戶再次訪問(wèn)您的網(wǎng)站。
如果使用靜態(tài) JavaScript,用戶在點(diǎn)擊頁(yè)面的時(shí)候很快就會(huì)看到錯(cuò)誤信息。這樣也很煩人,是不是?可能令用戶錯(cuò)誤地認(rèn)為您的 Web 應(yīng)用程序不能在他的瀏覽器上運(yùn)行。不過(guò),當(dāng)然要比他們花費(fèi)了 10 分鐘輸入信息之后再顯示同樣的錯(cuò)誤要好。因此,我建議編寫(xiě)靜態(tài)的代碼,讓用戶盡可能早地發(fā)現(xiàn)問(wèn)題。
用 XMLHttpRequest 發(fā)送請(qǐng)求
得到請(qǐng)求對(duì)象之后就可以進(jìn)入請(qǐng)求/響應(yīng)循環(huán)了。記住,
XMLHttpRequest
惟一的目的是讓您發(fā)送請(qǐng)求和接收響應(yīng)。其他一切都是 JavaScript、CSS 或頁(yè)面中其他代碼的工作:改變用戶界面、切換圖像、解釋服務(wù)器返回的數(shù)據(jù)。準(zhǔn)備好
XMLHttpRequest
之后,就可以向服務(wù)器發(fā)送請(qǐng)求了。
Ajax 采用一種沙箱安全模型。因此,Ajax 代碼(具體來(lái)說(shuō)就是
XMLHttpRequest
對(duì)象)只能對(duì)所在的同一個(gè)域發(fā)送請(qǐng)求。以后的文章中將進(jìn)一步介紹安全和 Ajax,現(xiàn)在只要知道在本地機(jī)器上運(yùn)行的代碼只能對(duì)本地機(jī)器上的服務(wù)器端腳本發(fā)送請(qǐng)求。如果讓 Ajax 代碼在 www.breakneckpizza.com 上運(yùn)行,則必須 www.breakneck.com 中運(yùn)行的腳本發(fā)送請(qǐng)求。
首先要確定連接的服務(wù)器的 URL。這并不是 Ajax 的特殊要求,但仍然是建立連接所必需的,顯然現(xiàn)在您應(yīng)該知道如何構(gòu)造 URL 了。多數(shù)應(yīng)用程序中都會(huì)結(jié)合一些靜態(tài)數(shù)據(jù)和用戶處理的表單中的數(shù)據(jù)來(lái)構(gòu)造該 URL。比如, 清單 7 中的 JavaScript 代碼獲取電話號(hào)碼字段的值并用其構(gòu)造 URL。
<script language="javascript" type="text/javascript"> var request = false; try { request = new XMLHttpRequest(); } catch (trymicrosoft) { try { request = new ActiveXObject("Msxml2.XMLHTTP"); } catch (othermicrosoft) { try { request = new ActiveXObject("Microsoft.XMLHTTP"); } catch (failed) { request = false; } } } if (!request) alert("Error initializing XMLHttpRequest!"); function getCustomerInfo() { var phone = document.getElementById("phone").value; var url = "/cgi-local/lookupCustomer.php?phone=" + escape(phone); } </script> |
這里沒(méi)有難懂的地方。首先,代碼創(chuàng)建了一個(gè)新變量
phone
,并把 ID 為 “phone” 的表單字段的值賦給它。
清單 8
展示了這個(gè)表單的 XHTML,其中可以看到
phone
字段及其
id
屬性。
<body> <p><img src="breakneck-logo_4c.gif" alt="Break Neck Pizza" /></p> <form action="POST"> <p>Enter your phone number: <input type="text" size="14" name="phone" id="phone" onChange="getCustomerInfo();" /> </p> <p>Your order will be delivered to:</p> <div id="address"></div> <p>Type your order in here:</p> <p><textarea name="order" rows="6" cols="50" id="order"></textarea></p> <p><input type="submit" value="Order Pizza" id="submit" /></p> </form> </body> |
還要注意,當(dāng)用戶輸入電話號(hào)碼或者改變電話號(hào)碼時(shí),將觸發(fā)
清單 8
所示的
getCustomerInfo()
方法。該方法取得電話號(hào)碼并構(gòu)造存儲(chǔ)在
url
變量中的 URL 字符串。記住,由于 Ajax 代碼是沙箱型的,因而只能連接到同一個(gè)域,實(shí)際上 URL 中不需要域名。該例中的腳本名為
/cgi-local/lookupCustomer.php
。最后,電話號(hào)碼作為 GET 參數(shù)附加到該腳本中:
"phone=" + escape(phone)
。
如果以前沒(méi)用見(jiàn)過(guò)
escape()
方法,它用于轉(zhuǎn)義不能用明文正確發(fā)送的任何字符。比如,電話號(hào)碼中的空格將被轉(zhuǎn)換成字符
%20
,從而能夠在 URL 中傳遞這些字符。
可以根據(jù)需要添加任意多個(gè)參數(shù)。比如,如果需要增加另一個(gè)參數(shù),只需要將其附加到 URL 中并用 “與”(
&
)字符分開(kāi) [第一個(gè)參數(shù)用問(wèn)號(hào)(
?
)和腳本名分開(kāi)]。
有了要連接的 URL 后就可以配置請(qǐng)求了。可以用
XMLHttpRequest
對(duì)象的
open()
方法來(lái)完成。該方法有五個(gè)參數(shù):
-
request-type
:發(fā)送請(qǐng)求的類型。典型的值是
GET
或POST
,但也可以發(fā)送HEAD
請(qǐng)求。 - url :要連接的 URL。
- asynch :如果希望使用異步連接則為 true,否則為 false。該參數(shù)是可選的,默認(rèn)為 true。
- username :如果需要身份驗(yàn)證,則可以在此指定用戶名。該可選參數(shù)沒(méi)有默認(rèn)值。
- password :如果需要身份驗(yàn)證,則可以在此指定口令。該可選參數(shù)沒(méi)有默認(rèn)值。
通常使用其中的前三個(gè)參數(shù)。事實(shí)上,即使需要異步連接,也應(yīng)該指定第三個(gè)參數(shù)為 “true”。這是默認(rèn)值,但堅(jiān)持明確指定請(qǐng)求是異步的還是同步的更容易理解。
將這些結(jié)合起來(lái),通常會(huì)得到 清單 9 所示的一行代碼。
function getCustomerInfo() { var phone = document.getElementById("phone").value; var url = "/cgi-local/lookupCustomer.php?phone=" + escape(phone); request.open("GET", url, true); } |
一旦設(shè)置好了 URL,其他就簡(jiǎn)單了。多數(shù)請(qǐng)求使用
GET
就夠了(后面的文章中將看到需要使用
POST
的情況),再加上 URL,這就是使用
open()
方法需要的全部?jī)?nèi)容了。
本系列的后面一篇文章中,我將用很多時(shí)間編寫(xiě)和使用異步代碼,但是您應(yīng)該明白為什么
open()
的最后一個(gè)參數(shù)這么重要。在一般的請(qǐng)求/響應(yīng)模型中,比如 Web 1.0,客戶機(jī)(瀏覽器或者本地機(jī)器上運(yùn)行的代碼)向服務(wù)器發(fā)出請(qǐng)求。該請(qǐng)求是同步的,換句話說(shuō),客戶機(jī)等待服務(wù)器的響應(yīng)。當(dāng)客戶機(jī)等待的時(shí)候,至少會(huì)用某種形式通知您在等待:
- 沙漏(特別是 Windows 上)。
- 旋轉(zhuǎn)的皮球(通常在 Mac 機(jī)器上)。
- 應(yīng)用程序基本上凍結(jié)了,然后過(guò)一段時(shí)間光標(biāo)變化了。
這正是 Web 應(yīng)用程序讓人感到笨拙或緩慢的原因 —— 缺乏真正的交互性。按下按鈕時(shí),應(yīng)用程序?qū)嶋H上變得不能使用,直到剛剛觸發(fā)的請(qǐng)求得到響應(yīng)。如果請(qǐng)求需要大量服務(wù)器處理,那么等待的時(shí)間可能很長(zhǎng)(至少在這個(gè)多處理器、DSL 沒(méi)有等待的世界中是如此)。
而異步請(qǐng)求 不 等待服務(wù)器響應(yīng)。發(fā)送請(qǐng)求后應(yīng)用程序繼續(xù)運(yùn)行。用戶仍然可以在 Web 表單中輸入數(shù)據(jù),甚至離開(kāi)表單。沒(méi)有旋轉(zhuǎn)的皮球或者沙漏,應(yīng)用程序也沒(méi)有明顯的凍結(jié)。服務(wù)器悄悄地響應(yīng)請(qǐng)求,完成后告訴原來(lái)的請(qǐng)求者工作已經(jīng)結(jié)束(具體的辦法很快就會(huì)看到)。結(jié)果是,應(yīng)用程序感覺(jué) 不 那么遲鈍或者緩慢,而是響應(yīng)迅速、交互性強(qiáng),感覺(jué)快多了。這僅僅是 Web 2.0 的一部分,但它是很重要的一部分。所有老套的 GUI 組件和 Web 設(shè)計(jì)范型都不能克服緩慢、同步的請(qǐng)求/響應(yīng)模型。
一旦用
open()
配置好之后,就可以發(fā)送請(qǐng)求了。幸運(yùn)的是,發(fā)送請(qǐng)求的方法的名稱要比
open()
適當(dāng),它就是
send()
。
send()
只有一個(gè)參數(shù),就是要發(fā)送的內(nèi)容。但是在考慮這個(gè)方法之前,回想一下前面已經(jīng)通過(guò) URL 本身發(fā)送過(guò)數(shù)據(jù)了:
var url = "/cgi-local/lookupCustomer.php? phone=" + escape(phone); |
雖然可以使用
send()
發(fā)送數(shù)據(jù),但也能通過(guò) URL 本身發(fā)送數(shù)據(jù)。事實(shí)上,
GET
請(qǐng)求(在典型的 Ajax 應(yīng)用中大約占 80%)中,用 URL 發(fā)送數(shù)據(jù)要容易得多。如果需要發(fā)送安全信息或 XML,可能要考慮使用
send()
發(fā)送內(nèi)容(本系列的后續(xù)文章中將討論安全數(shù)據(jù)和 XML 消息)。如果不需要通過(guò)
send()
傳遞數(shù)據(jù),則只要傳遞
null
作為該方法的參數(shù)即可。因此您會(huì)發(fā)現(xiàn)在本文中的例子中只需要這樣發(fā)送請(qǐng)求(參見(jiàn)
清單 10
)。
function getCustomerInfo() { var phone = document.getElementById("phone").value; var url = "/cgi-local/lookupCustomer.php?phone=" + escape(phone); request.open("GET", url, true); request.send(null); } |
現(xiàn)在我們所做的只有很少一點(diǎn)是新的、革命性的或異步的。必須承認(rèn),
open()
方法中 “true” 這個(gè)小小的關(guān)鍵字建立了異步請(qǐng)求。但是除此之外,這些代碼與用 Java servlet 及 JSP、PHP 或 Perl 編程沒(méi)有什么兩樣。那么 Ajax 和 Web 2.0 最大的秘密是什么呢?秘密就在于
XMLHttpRequest
的一個(gè)簡(jiǎn)單屬性
onreadystatechange
。
首先一定要理解這些代碼中的流程(如果需要請(qǐng)回顧
清單 10
)。建立其請(qǐng)求然后發(fā)出請(qǐng)求。此外,因?yàn)槭钱惒秸?qǐng)求,所以 JavaScript 方法(例子中的
getCustomerInfo()
)不會(huì)等待服務(wù)器。因此代碼將繼續(xù)執(zhí)行,就是說(shuō),將退出該方法而把控制返回給表單。用戶可以繼續(xù)輸入信息,應(yīng)用程序不會(huì)等待服務(wù)器。
這就提出了一個(gè)有趣的問(wèn)題:服務(wù)器完成了請(qǐng)求之后會(huì)發(fā)生什么?答案是什么也不發(fā)生,至少對(duì)現(xiàn)在的代碼而言如此!顯然這樣不行,因此服務(wù)器在完成通過(guò)
XMLHttpRequest
發(fā)送給它的請(qǐng)求處理之后需要某種指示說(shuō)明怎么做。
現(xiàn)在
onreadystatechange
屬性該登場(chǎng)了。該屬性允許指定一個(gè)
回調(diào)函數(shù)
。回調(diào)允許服務(wù)器(猜得到嗎?)
反向調(diào)用
Web 頁(yè)面中的代碼。它也給了服務(wù)器一定程度的控制權(quán),當(dāng)服務(wù)器完成請(qǐng)求之后,會(huì)查看
XMLHttpRequest
對(duì)象,特別是
onreadystatechange
屬性。然后調(diào)用該屬性指定的任何方法。之所以稱為回調(diào)是因?yàn)榉?wù)器向網(wǎng)頁(yè)發(fā)起調(diào)用,無(wú)論網(wǎng)頁(yè)本身在做什么。比方說(shuō),可能在用戶坐在椅子上手沒(méi)有碰鍵盤(pán)的時(shí)候調(diào)用該方法,但是也可能在用戶輸入、移動(dòng)鼠標(biāo)、滾動(dòng)屏幕或者點(diǎn)擊按鈕時(shí)調(diào)用該方法。它并不關(guān)心用戶在做什么。
這就是稱之為異步的原因:用戶在一層上操作表單,而在另一層上服務(wù)器響應(yīng)請(qǐng)求并觸發(fā)
onreadystatechange
屬性指定的回調(diào)方法。因此需要像
清單 11
一樣在代碼中指定該方法。
function getCustomerInfo() { var phone = document.getElementById("phone").value; var url = "/cgi-local/lookupCustomer.php?phone=" + escape(phone); request.open("GET", url, true); request.onreadystatechange = updatePage; request.send(null); } |
需要特別注意的是該屬性在代碼中設(shè)置的
位置
—— 它是在調(diào)用
send()
之前
設(shè)置的。發(fā)送請(qǐng)求之前必須設(shè)置該屬性,這樣服務(wù)器在回答完成請(qǐng)求之后才能查看該屬性。現(xiàn)在剩下的就只有編寫(xiě)
updatePage()
方法了,這是本文最后一節(jié)要討論的重點(diǎn)。
發(fā)送請(qǐng)求,用戶高興地使用 Web 表單(同時(shí)服務(wù)器在處理請(qǐng)求),而現(xiàn)在服務(wù)器完成了請(qǐng)求處理。服務(wù)器查看
onreadystatechange
屬性確定要調(diào)用的方法。除此以外,可以將您的應(yīng)用程序看作其他應(yīng)用程序一樣,無(wú)論是否異步。換句話說(shuō),不一定要采取特殊的動(dòng)作編寫(xiě)響應(yīng)服務(wù)器的方法,只需要改變表單,讓用戶訪問(wèn)另一個(gè) URL 或者做響應(yīng)服務(wù)器需要的任何事情。這一節(jié)我們重點(diǎn)討論對(duì)服務(wù)器的響應(yīng)和一種典型的動(dòng)作 —— 即時(shí)改變用戶看到的表單中的一部分。
現(xiàn)在我們已經(jīng)看到如何告訴服務(wù)器完成后應(yīng)該做什么:將
XMLHttpRequest
對(duì)象的
onreadystatechange
屬性設(shè)置為要運(yùn)行的函數(shù)名。這樣,當(dāng)服務(wù)器處理完請(qǐng)求后就會(huì)自動(dòng)調(diào)用該函數(shù)。也不需要擔(dān)心該函數(shù)的任何參數(shù)。我們從一個(gè)簡(jiǎn)單的方法開(kāi)始,如
清單 12
所示。
<script language="javascript" type="text/javascript"> var request = false; try { request = new XMLHttpRequest(); } catch (trymicrosoft) { try { request = new ActiveXObject("Msxml2.XMLHTTP"); } catch (othermicrosoft) { try { request = new ActiveXObject("Microsoft.XMLHTTP"); } catch (failed) { request = false; } } } if (!request) alert("Error initializing XMLHttpRequest!"); function getCustomerInfo() { var phone = document.getElementById("phone").value; var url = "/cgi-local/lookupCustomer.php?phone=" + escape(phone); request.open("GET", url, true); request.onreadystatechange = updatePage; request.send(null); } function updatePage() { alert("Server is done!"); } </script> |
它僅僅發(fā)出一些簡(jiǎn)單的警告,告訴您服務(wù)器什么時(shí)候完成了任務(wù)。在自己的網(wǎng)頁(yè)中試驗(yàn)這些代碼,然后在瀏覽器中打開(kāi)(如果希望查看該例中的 XHTML,請(qǐng)參閱 清單 8 )。輸入電話號(hào)碼然后離開(kāi)該字段,將看到一個(gè)彈出的警告窗口(如 圖 3 所示),但是點(diǎn)擊 OK 又出現(xiàn)了……
根據(jù)瀏覽器的不同,在表單停止彈出警告之前會(huì)看到兩次、三次甚至四次警告。這是怎么回事呢?原來(lái)我們還沒(méi)有考慮 HTTP 就緒狀態(tài),這是請(qǐng)求/響應(yīng)循環(huán)中的一個(gè)重要部分。
前面提到,服務(wù)器在完成請(qǐng)求之后會(huì)在
XMLHttpRequest
的
onreadystatechange
屬性中查找要調(diào)用的方法。這是真的,但還不完整。事實(shí)上,每當(dāng) HTTP 就緒狀態(tài)改變時(shí)它都會(huì)調(diào)用該方法。這意味著什么呢?首先必須理解 HTTP 就緒狀態(tài)。
HTTP 就緒狀態(tài)表示請(qǐng)求的狀態(tài)或情形。它用于確定該請(qǐng)求是否已經(jīng)開(kāi)始、是否得到了響應(yīng)或者請(qǐng)求/響應(yīng)模型是否已經(jīng)完成。它還可以幫助確定讀取服務(wù)器提供的響應(yīng)文本或數(shù)據(jù)是否安全。在 Ajax 應(yīng)用程序中需要了解五種就緒狀態(tài):
-
0
:請(qǐng)求沒(méi)有發(fā)出(在調(diào)用
open()
之前)。 -
1
:請(qǐng)求已經(jīng)建立但還沒(méi)有發(fā)出(調(diào)用
send()
之前)。 - 2 :請(qǐng)求已經(jīng)發(fā)出正在處理之中(這里通常可以從響應(yīng)得到內(nèi)容頭部)。
- 3 :請(qǐng)求已經(jīng)處理,響應(yīng)中通常有部分?jǐn)?shù)據(jù)可用,但是服務(wù)器還沒(méi)有完成響應(yīng)。
- 4 :響應(yīng)已完成,可以訪問(wèn)服務(wù)器響應(yīng)并使用它。
與大多數(shù)跨瀏覽器問(wèn)題一樣,這些就緒狀態(tài)的使用也不盡一致。您也許期望任務(wù)就緒狀態(tài)從 0 到 1、2、3 再到 4,但實(shí)際上很少是這種情況。一些瀏覽器從不報(bào)告 0 或 1 而直接從 2 開(kāi)始,然后是 3 和 4。其他瀏覽器則報(bào)告所有的狀態(tài)。還有一些則多次報(bào)告就緒狀態(tài) 1。在上一節(jié)中看到,服務(wù)器多次調(diào)用
updatePage()
,每次調(diào)用都會(huì)彈出警告框 —— 可能和預(yù)期的不同!
對(duì)于 Ajax 編程,需要直接處理的惟一狀態(tài)就是就緒狀態(tài) 4,它表示服務(wù)器響應(yīng)已經(jīng)完成,可以安全地使用響應(yīng)數(shù)據(jù)了。基于此,回調(diào)方法中的第一行應(yīng)該如 清單 13 所示。
function updatePage() { if (request.readyState == 4) alert("Server is done!"); } |
修改后就可以保證服務(wù)器的處理已經(jīng)完成。嘗試運(yùn)行新版本的 Ajax 代碼,現(xiàn)在就會(huì)看到與預(yù)期的一樣,只顯示一次警告信息了。
雖然 清單 13 中的代碼看起來(lái)似乎不錯(cuò),但是還有一個(gè)問(wèn)題 —— 如果服務(wù)器響應(yīng)請(qǐng)求并完成了處理但是報(bào)告了一個(gè)錯(cuò)誤怎么辦?要知道,服務(wù)器端代碼應(yīng)該明白它是由 Ajax、JSP、普通 HTML 表單或其他類型的代碼調(diào)用的,但只能使用傳統(tǒng)的 Web 專用方法報(bào)告信息。而在 Web 世界中,HTTP 代碼可以處理請(qǐng)求中可能發(fā)生的各種問(wèn)題。
比方說(shuō),您肯定遇到過(guò)輸入了錯(cuò)誤的 URL 請(qǐng)求而得到 404 錯(cuò)誤碼的情形,它表示該頁(yè)面不存在。這僅僅是 HTTP 請(qǐng)求能夠收到的眾多錯(cuò)誤碼中的一種(完整的狀態(tài)碼列表請(qǐng)參閱 參考資料 中的鏈接)。表示所訪問(wèn)數(shù)據(jù)受到保護(hù)或者禁止訪問(wèn)的 403 和 401 也很常見(jiàn)。無(wú)論哪種情況,這些錯(cuò)誤碼都是從 完成的響應(yīng) 得到的。換句話說(shuō),服務(wù)器履行了請(qǐng)求(即 HTTP 就緒狀態(tài)是 4)但是沒(méi)有返回客戶機(jī)預(yù)期的數(shù)據(jù)。
因此除了就緒狀態(tài)外,還需要檢查 HTTP 狀態(tài)。我們期望的狀態(tài)碼是 200,它表示一切順利。如果就緒狀態(tài)是 4 而且狀態(tài)碼是 200,就可以處理服務(wù)器的數(shù)據(jù)了,而且這些數(shù)據(jù)應(yīng)該就是要求的數(shù)據(jù)(而不是錯(cuò)誤或者其他有問(wèn)題的信息)。因此還要在回調(diào)方法中增加狀態(tài)檢查,如 清單 14 所示。
function updatePage() { if (request.readyState == 4) if (request.status == 200) alert("Server is done!"); } |
為了增加更健壯的錯(cuò)誤處理并盡量避免過(guò)于復(fù)雜,可以增加一兩個(gè)狀態(tài)碼檢查,請(qǐng)看一看
清單 15
中修改后的
updatePage()
版本。
function updatePage() { if (request.readyState == 4) if (request.status == 200) alert("Server is done!"); else if (request.status == 404) alert("Request URL does not exist"); else alert("Error: status code is " + request.status); } |
現(xiàn)在將
getCustomerInfo()
中的 URL 改為不存在的 URL 看看會(huì)發(fā)生什么。應(yīng)該會(huì)看到警告信息說(shuō)明要求的 URL 不存在 —— 好極了!很難處理所有的錯(cuò)誤條件,但是這一小小的改變能夠涵蓋典型 Web 應(yīng)用程序中 80% 的問(wèn)題。
現(xiàn)在可以確保請(qǐng)求已經(jīng)處理完成(通過(guò)就緒狀態(tài)),服務(wù)器給出了正常的響應(yīng)(通過(guò)狀態(tài)碼),最后我們可以處理服務(wù)器返回的數(shù)據(jù)了。返回的數(shù)據(jù)保存在
XMLHttpRequest
對(duì)象的
responseText
屬性中。
關(guān)于
responseText
中的文本內(nèi)容,比如格式和長(zhǎng)度,有意保持含糊。這樣服務(wù)器就可以將文本設(shè)置成任何內(nèi)容。比方說(shuō),一種腳本可能返回逗號(hào)分隔的值,另一種則使用管道符(即
|
字符)分隔的值,還有一種則返回長(zhǎng)文本字符串。何去何從由服務(wù)器決定。
在本文使用的例子中,服務(wù)器返回客戶的上一個(gè)訂單和客戶地址,中間用管道符分開(kāi)。然后使用訂單和地址設(shè)置表單中的元素值, 清單 16 給出了更新顯示內(nè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, " |
首先,得到
responseText
并使用 JavaScript
split()
方法從管道符分開(kāi)。得到的數(shù)組放到
response
中。數(shù)組中的第一個(gè)值 —— 上一個(gè)訂單 —— 用
response[0]
訪問(wèn),被設(shè)置為 ID 為 “order” 的字段的值。第二個(gè)值
response[1]
,即客戶地址,則需要更多一點(diǎn)處理。因?yàn)榈刂分械男杏靡话愕男蟹指舴ā?n”字符)分隔,代碼中需要用 XHTML 風(fēng)格的行分隔符
<br />
來(lái)代替。替換過(guò)程使用
replace()
函數(shù)和正則表達(dá)式完成。最后,修改后的文本作為 HTML 表單
div
中的內(nèi)部 HTML。結(jié)果就是表單突然用客戶信息更新了,如圖 4 所示。
圖 4. 收到客戶數(shù)據(jù)后的 Break Neck 表單
結(jié)束本文之前,我還要介紹
XMLHttpRequest
的另一個(gè)重要屬性
responseXML
。如果服務(wù)器選擇使用 XML 響應(yīng)則該屬性包含(也許您已經(jīng)猜到)XML 響應(yīng)。處理 XML 響應(yīng)和處理普通文本有很大不同,涉及到解析、文檔對(duì)象模型(DOM)和其他一些問(wèn)題。后面的文章中將進(jìn)一步介紹 XML。但是因?yàn)?
responseXML
通常和
responseText
一起討論,這里有必要提一提。對(duì)于很多簡(jiǎn)單的 Ajax 應(yīng)用程序
responseText
就夠了,但是您很快就會(huì)看到通過(guò) Ajax 應(yīng)用程序也能很好地處理 XML。
您可能對(duì)
XMLHttpRequest
感到有點(diǎn)厭倦了,我很少看到一整篇文章討論一個(gè)對(duì)象,特別是這種簡(jiǎn)單的對(duì)象。但是您將在使用 Ajax 編寫(xiě)的每個(gè)頁(yè)面和應(yīng)用程序中反復(fù)使用該對(duì)象。坦白地說(shuō),關(guān)于
XMLHttpRequest
還真有一些可說(shuō)的內(nèi)容。下一期文章中將介紹如何在請(qǐng)求中使用
POST
及
GET
,來(lái)設(shè)置請(qǐng)求中的內(nèi)容頭部和從服務(wù)器響應(yīng)讀取內(nèi)容頭部,理解如何在請(qǐng)求/響應(yīng)模型中編碼請(qǐng)求和處理 XML。
再往后我們將介紹常見(jiàn) Ajax 工具箱。這些工具箱實(shí)際上隱藏了本文所述的很多細(xì)節(jié),使得 Ajax 編程更容易。您也許會(huì)想,既然有這么多工具箱為何還要對(duì)底層的細(xì)節(jié)編碼。答案是,如果不知道應(yīng)用程序在做 什么 ,就很難發(fā)現(xiàn)應(yīng)用程序中的問(wèn)題。
因此不要忽略這些細(xì)節(jié)或者簡(jiǎn)單地瀏覽一下,如果便捷華麗的工具箱出現(xiàn)了錯(cuò)誤,您就不必?fù)项^或者發(fā)送郵件請(qǐng)求支持了。如果了解如何直接使用
XMLHttpRequest
,就會(huì)發(fā)現(xiàn)很容易調(diào)試和解決最奇怪的問(wèn)題。只有讓其解決您的問(wèn)題,工具箱才是好東西。
因此請(qǐng)熟悉
XMLHttpRequest
吧。事實(shí)上,如果您有使用工具箱的 Ajax 代碼,可以嘗試使用
XMLHttpRequest
對(duì)象及其屬性和方法重新改寫(xiě)。這是一種不錯(cuò)的練習(xí),可以幫助您更好地理解其中的原理。
下一期文章中將進(jìn)一步討論該對(duì)象,探討它的一些更有趣的屬性(如
responseXML
),以及如何使用
POST
請(qǐng)求和以不同的格式發(fā)送數(shù)據(jù)。請(qǐng)開(kāi)始編寫(xiě)代碼吧,一個(gè)月后我們?cè)倮^續(xù)討論。
學(xué)習(xí)
-
您可以參閱本文在 developerWorks 全球站點(diǎn)上的
英文原文
。
-
掌握 Ajax,第 1 部分: Ajax 簡(jiǎn)介
(developerWorks,2005 年 12 月)幫助您了解 Ajax,這是一種構(gòu)建網(wǎng)站的高生產(chǎn)率方法。(本文中的參考資料列表都值得訪問(wèn)!)
-
面向 Java 開(kāi)發(fā)人員的 Ajax: 構(gòu)建動(dòng)態(tài)的 Java 應(yīng)用程序
(developerWorks,2005 年 9 月)從 Java 的角度考察了 Ajax 服務(wù)器端。
-
面向 Java 開(kāi)發(fā)人員的 Ajax: Ajax 的 Java 對(duì)象序列化
(developerWorks,2005 年 10 月)從 Java 的角度分析了如何通過(guò)網(wǎng)絡(luò)發(fā)送對(duì)象以及與 Ajax 交互。
-
使用 AJAX 調(diào)用 SOAP Web 服務(wù),第 1 部分: 構(gòu)建 Web 服務(wù)客戶機(jī)
(developerWorks,2005 年 10 月)是關(guān)于集成 Ajax 和現(xiàn)有基于 SOAP 的 web 服務(wù)的相當(dāng)高級(jí)的文章。
-
Google GMail
是一個(gè)很好的例子,說(shuō)明了基于 Ajax 的應(yīng)用程序如何改變 Web 的工作方式。
-
Google Maps
是另一種基于 Google 的 Web 2.0 應(yīng)用程序。
-
Flickr
是一個(gè)很好的例子,說(shuō)明如何使用 Ajax 創(chuàng)建類似桌面的 Web 應(yīng)用程序。
-
Ajax: A New Approach to Web Applications
發(fā)明了 Ajax 一詞,所有 Ajax 開(kāi)發(fā)人員都應(yīng)該讀一讀。
-
Why Ajax Matters Now
告訴您為什么 Ajax 很重要。
-
如果使用的是 Microsoft 瀏覽器 Internet Explorer,請(qǐng)?jiān)L問(wèn)
Microsoft Developer Network's XML Developer Center
。
-
請(qǐng)通過(guò)
在線文檔
進(jìn)一步了解 MSXML,Microsoft XML 解析器。
-
看一看響應(yīng)中包含的所有
HTTP 狀態(tài)碼
列表。
-
developerWorks
Web Architecture 專區(qū)
專門(mén)發(fā)表各種基于 Web 的解決方案的文章。
獲得產(chǎn)品和技術(shù)
-
Elisabeth Freeman、Eric Freeman 和 Brett McLaughlin 合著的
Head Rush Ajax
(2005 年 2 月,O'Reilly Media, Inc.)以 Head First 風(fēng)格將本文中所述的內(nèi)容灌輸?shù)侥念^腦中。
-
Java and XML
, Second Edition(Brett McLaughlin,2001 年 8 月,O'Reilly Media, Inc.)包括作者關(guān)于 XHTML 和 XML 轉(zhuǎn)換的討論。
-
JavaScript: The Definitive Guide
(David Flanagan,2001 年 11 月,O'Reilly Media, Inc.)詳細(xì)介紹了如何使用 JavaScript、動(dòng)態(tài)網(wǎng)頁(yè),第二版增加了關(guān)于 Ajax 的兩章。
- Head First HTML with CSS & XHTML (Elizabeth 和Eric Freeman,2005 年 12 月,O'Reilly Media, Inc.)是學(xué)習(xí) XHTML、CSS 以及如何將兩者結(jié)合起來(lái)的完整參考。
更多文章、技術(shù)交流、商務(wù)合作、聯(lián)系博主
微信掃碼或搜索:z360901061

微信掃一掃加我為好友
QQ號(hào)聯(lián)系: 360901061
您的支持是博主寫(xiě)作最大的動(dòng)力,如果您喜歡我的文章,感覺(jué)我的文章對(duì)您有幫助,請(qǐng)用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧,狠狠點(diǎn)擊下面給點(diǎn)支持吧,站長(zhǎng)非常感激您!手機(jī)微信長(zhǎng)按不能支付解決辦法:請(qǐng)將微信支付二維碼保存到相冊(cè),切換到微信,然后點(diǎn)擊微信右上角掃一掃功能,選擇支付二維碼完成支付。
【本文對(duì)您有幫助就好】元
