|
使用 JavaScript 和 Ajax 發(fā)出異步請(qǐng)求（一） 多數(shù) Web 應(yīng)用程序都使用請(qǐng)求/響應(yīng)模型從服務(wù)器上獲得完整的 HTML 頁(yè)面。常常是點(diǎn)擊一個(gè)按鈕，等待服務(wù)器響應(yīng)，再點(diǎn)擊另一個(gè)按鈕，然后再等待，這樣一個(gè)反復(fù)的過(guò)程。有了 Ajax 和 XMLHttpRequest 對(duì)象，就可以使用不必讓用戶等待服務(wù)器響應(yīng)的請(qǐng)求/響應(yīng)模型了。本文中，Brett McLaughlin 介紹了如何創(chuàng)建能夠適應(yīng)不同瀏覽器的 XMLHttpRequest 實(shí)例，建立和發(fā)送請(qǐng)求，并響應(yīng)服務(wù)器。 本文中，您將開(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。這到底是怎么回事呢? Web 2.0一瞥 在深入研究代碼之前首先看看最近的觀點(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)。比如在 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)站。 XMLHttpRequest 簡(jiǎn)介 要真正實(shí)現(xiàn)這種絢麗的奇跡，必須非常熟悉一個(gè) JavaScript 對(duì)象，即 XMLHttpRequest。這個(gè)小小的對(duì)象實(shí)際上已經(jīng)在幾種瀏覽器中存在一段時(shí)間了，它是本專(zhuān)欄今后幾個(gè)月中要介紹的 Web 2.0、Ajax 和大部分其他內(nèi)容的核心。為了讓您快速地大體了解它，下面給出將要用于該對(duì)象的很少的幾個(gè) 方法和屬性。 ?。畂pen():建立到服務(wù)器的新請(qǐ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ǎn)單的 new 首先需要?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"> 不難吧? 記住，JavaScript 不要求指定變量類(lèi)型，因此不需要像清單2那樣做(在Java語(yǔ)言中可能需要這樣)。 清單 2. 創(chuàng)建 XMLHttpRequest 的 Java 偽代碼 XMLHttpRequest request = new XMLHttpRequest(); 因此在 JavaScript 中用 var 創(chuàng)建一個(gè)變量，給它一個(gè)名字(如 “request”)，然后賦給它一個(gè)新的 XMLHttpRequest 實(shí)例。此后就可以在函數(shù)中使用該對(duì)象了。 錯(cuò)誤處理 在實(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"> if (!request) 一定要理解這些步驟： 1. 創(chuàng)建一個(gè)新變量 request 并賦值 false。后面將使用 false 作為判定條件，它表示還沒(méi)有創(chuàng)建 XMLHttpRequest 對(duì)象。 2. 增加 try/catch 塊: 嘗試創(chuàng)建 XMLHttpRequest 對(duì)象。如果失敗(catch (failed))則保證 request 的值仍然為 false。 3. 檢查 request 是否仍為 false(如果一切正常就不會(huì)是 false)。 4. 如果出現(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í)間?，F(xiàn)在已經(jīng)得到了一段帶有錯(cuò)誤檢查的 XMLHttpRequest 對(duì)象創(chuàng)建代碼，還可以告訴您哪兒出了問(wèn)題。 應(yīng)付 Microsoft 看起來(lái)似乎一切良好，至少在用 Internet Explorer 試驗(yàn)這些代碼之前是這樣的。如果這樣試驗(yàn)的話，就會(huì)看到 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ì)象類(lèi)型(同時(shí)還要支持非 Microsoft 瀏覽器)。請(qǐng)看看 清單 4，它在前述代碼的基礎(chǔ)上增加了對(duì) Microsoft 的支持。 清單 4. 增加對(duì) Microsoft 瀏覽器的支持 <script language="javascript" type="text/javascript"> if (!request) 很容易被這些花括號(hào)迷住了眼睛，因此下面分別介紹每一步: 1. 創(chuàng)建一個(gè)新變量 request 并賦值 false。使用 false 作為判斷條件，它表示還沒(méi)有創(chuàng)建 XMLHttpRequest 對(duì)象。 2. 增加 try/catch 塊: 3. 檢查 request 是否仍然為 false(如果一切順利就不會(huì)是 false)。 4. 如果出現(xiàn)問(wèn)題(request 是 false)則使用 JavaScript 警告通知用戶出現(xiàn)了問(wèn)題。 這樣修改代碼之后再使用 Internet Explorer 試驗(yàn)，就應(yīng)該看到已經(jīng)創(chuàng)建的表單(沒(méi)有錯(cuò)誤消息)。 靜態(tài)與動(dòng)態(tài) 再看一看清單 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"> function createRequest() { if (!request) 如果按照這種方式編寫(xiě)代碼，那么在處理 Ajax 之前需要調(diào)用該方法。因此還需要 清單 6 這樣的代碼。 清單 6. 使用 XMLHttpRequest 的創(chuàng)建方法 <script language="javascript" type="text/javascript"> var request; function createRequest() { if (!request) function getCustomerInfo() { 此代碼惟一的問(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. 上運(yùn)行，則必須 www. 中運(yùn)行的腳本發(fā)送請(qǐng)求。 設(shè)置服務(wù)器 URL 首先要確定連接的服務(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。 清單 7. 建立請(qǐng)求 URL <script language="javascript" type="text/javascript"> if (!request) function getCustomerInfo() { 這里沒(méi)有難懂的地方。首先，代碼創(chuàng)建了一個(gè)新變量 phone，并把 ID 為 “phone” 的表單字段的值賦給它。清單 8 展示了這個(gè)表單的 XHTML，其中可以看到 phone 字段及其 id 屬性。 清單 8. Break Neck Pizza 表單 <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)]。 |
|
|
來(lái)自： masuz > 《Ajax學(xué)習(xí)》
