本文中，您將開始接觸最基本和基礎(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è)概念。聽到 Web 2.0 這個(gè)詞的時(shí)候，應(yīng)該首先問(wèn)一問(wèn) “Web 1.0 是什么？” 雖然很少聽人提到 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)求不僅僅是圖書和書目列表，而是另一個(gè)完整的 HTML 頁(yè)面。因此當(dāng) Web 瀏覽器用新的 HTML 頁(yè)面重繪時(shí)，可能會(huì)看到閃爍或抖動(dòng)。事實(shí)上，通過(guò)看到的每個(gè)新頁(yè)面可以清晰地看到請(qǐng)求和響應(yīng)。

　　Web 2.0（在很大程度上）消除了這種看得見的往復(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)站。

　　XMLHttpRequest 簡(jiǎn)介

　　要真正實(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)。聽起來(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">
var request = new XMLHttpRequest();
</script>

　　用 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)求。

　　設(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">
   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>

　　挑戰(zhàn)異步性

　　本系列的后面一篇文章中，我將用很多時(shí)間編寫和使用異步代碼，但是您應(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ì)用某種形式通知您在等待：

1. 沙漏（特別是 Windows 上）。
2. 旋轉(zhuǎn)的皮球（通常在 Mac 機(jī)器上）。
3. 應(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ù)，甚至離開表單。沒(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)模型。

　　發(fā)送請(qǐ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)求（參見 清單 10）。

　　清單 10. 發(fā)送請(qǐng)求

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);
   }

　　處理服務(wù)器響應(yīng)

　　發(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)作編寫響應(yīng)服務(wù)器的方法，只需要改變表單，讓用戶訪問(wèn)另一個(gè) URL 或者做響應(yīng)服務(wù)器需要的任何事情。這一節(jié)我們重點(diǎn)討論對(duì)服務(wù)器的響應(yīng)和一種典型的動(dòng)作 —— 即時(shí)改變用戶看到的表單中的一部分。

　　回調(diào)和 Ajax

　　現(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)單的方法開始，如 清單 12 所示。

　　圖 3. 彈出警告的 Ajax 代碼

　　清單 12. 回調(diào)方法的代碼

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

結(jié)束語(yǔ)

　　您可能對(duì) XMLHttpRequest 感到有點(diǎn)厭倦了，我很少看到一整篇文章討論一個(gè)對(duì)象，特別是這種簡(jiǎn)單的對(duì)象。但是您將在使用 Ajax 編寫的每個(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。

　　再往后我們將介紹常見 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ì)象及其屬性和方法重新改寫。這是一種不錯(cuò)的練習(xí)，可以幫助您更好地理解其中的原理。

NET技術(shù)：使用 JavaScript 和 Ajax 發(fā)出異步請(qǐng)求，轉(zhuǎn)載需保留來(lái)源！

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。