|
|
本文中，您將開始接觸最基本和基礎性的有關 Ajax 的全部對象和編程方法：XMLHttpRequest 對象。該對象實際上僅僅是一個跨越所有 Ajax 應用程序的公共線程，您可能已經預料到，只有徹底理解該對象才能充分發揮編程的潛力。事實上，有時您會發現，要正確地使用 XMLHttpRequest，顯然不能 使用 XMLHttpRequest。這到底是怎么回事呢？
Web 2.0 一瞥
在深入研究代碼之前首先看看最近的觀點 —— 一定要十分清楚 Web 2.0 這個概念。聽到 Web 2.0 這個詞的時候，應該首先問一問 “Web 1.0 是什么？” 雖然很少聽人提到 Web 1.0，實際上它指的就是具有完全不同的請求和響應模型的傳統 Web。比如，到 Amazon.com 網站上點擊一個按鈕或者輸入搜索項。就會對服務器發送一個請求，然后響應再返回到瀏覽器。該請求不僅僅是圖書和書目列表，而是另一個完整的 HTML 頁面。因此當 Web 瀏覽器用新的 HTML 頁面重繪時，可能會看到閃爍或抖動。事實上，通過看到的每個新頁面可以清晰地看到請求和響應。
Web 2.0（在很大程度上）消除了這種看得見的往復交互。比如訪問 Google Maps 或 Flickr 這樣的站點（到這些支持 Web 2.0 和 Ajax 站點的鏈接請參閱 參考資料）。比如在 Google Maps 上，您可以拖動地圖，放大和縮小，只有很少的重繪操作。當然這里仍然有請求和響應，只不過都藏到了幕后。作為用戶，體驗更加舒適，感覺很像桌面應用程序。這種新的感受和范型就是當有人提到 Web 2.0 時您所體會到的。
需要關心的是如何使這些新的交互成為可能。顯然，仍然需要發出請求和接收響應，但正是針對每次請求/響應交互的 HTML 重繪造成了緩慢、笨拙的 Web 交互的感受。因此很清楚，我們需要一種方法使發送的請求和接收的響應只 包含需要的數據而不是整個 HTML 頁面。惟一需要獲得整個新 HTML 頁面的時候就是希望用戶看到 新頁面的時候。
但多數交互都是在已有頁面上增加細節、修改主體文本或者覆蓋原有數據。這些情況下，Ajax 和 Web 2.0 方法允許在不 更新整個 HTML 頁面的情況下發送和接收數據。對于那些經常上網的人，這種能力可以讓您的應用程序感覺更快、響應更及時，讓他們不時地光顧您的網站。
XMLHttpRequest 簡介
要真正實現這種絢麗的奇跡，必須非常熟悉一個 JavaScript 對象，即 XMLHttpRequest。這個小小的對象實際上已經在幾種瀏覽器中存在一段時間了，它是本專欄今后幾個月中要介紹的 Web 2.0、Ajax 和大部分其他內容的核心。為了讓您快速地大體了解它，下面給出將要用于該對象的很少的幾個方法和屬性。
- open()：建立到服務器的新請求。
- send()：向服務器發送請求。
- abort()：退出當前請求。
- readyState：提供當前 HTML 的就緒狀態。
- responseText：服務器返回的請求響應文本。
如果不了解這些（或者其中的任何 一個），您也不用擔心，后面幾篇文章中我們將介紹每個方法和屬性。現在應該 了解的是，明確用 XMLHttpRequest 做什么。要注意這些方法和屬性都與發送請求及處理響應有關。事實上，如果看到 XMLHttpRequest 的所有方法和屬性，就會發現它們都 與非常簡單的請求/響應模型有關。顯然，我們不會遇到特別新的 GUI 對象或者創建用戶交互的某種超極神秘的方法，我們將使用非常簡單的請求和非常簡單的響應。聽起來似乎沒有多少吸引力，但是用好該對象可以徹底改變您的應用程序。
簡單的 new
首先需要創建一個新變量并賦給它一個 XMLHttpRequest 對象實例。這在 JavaScript 中很簡單，只要對該對象名使用 new 關鍵字即可，如 清單 1 所示。
清單 1. 創建新的 XMLHttpRequest 對象
<script language="Javascript" type="text/Javascript">
var request = new XMLHttpRequest();
</script>
用 XMLHttpRequest 發送請求
得到請求對象之后就可以進入請求/響應循環了。記住，XMLHttpRequest 惟一的目的是讓您發送請求和接收響應。其他一切都是 JavaScript、CSS 或頁面中其他代碼的工作：改變用戶界面、切換圖像、解釋服務器返回的數據。準備好 XMLHttpRequest 之后，就可以向服務器發送請求了。
歡迎使用沙箱
Ajax 采用一種沙箱安全模型。因此，Ajax 代碼（具體來說就是 XMLHttpRequest 對象）只能對所在的同一個域發送請求。以后的文章中將進一步介紹安全和 Ajax，現在只要知道在本地機器上運行的代碼只能對本地機器上的服務器端腳本發送請求。如果讓 Ajax 代碼在 www.breakneckpizza.com 上運行，則必須 www.breakneck.com 中運行的腳本發送請求。
設置服務器 URL
首先要確定連接的服務器的 URL。這并不是 Ajax 的特殊要求，但仍然是建立連接所必需的，顯然現在您應該知道如何構造 URL 了。多數應用程序中都會結合一些靜態數據和用戶處理的表單中的數據來構造該 URL。比如，清單 7 中的 JavaScript 代碼獲取電話號碼字段的值并用其構造 URL。
清單 7. 建立請求 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>
挑戰異步性
本系列的后面一篇文章中，我將用很多時間編寫和使用異步代碼，但是您應該明白為什么 open() 的最后一個參數這么重要。在一般的請求/響應模型中，比如 Web 1.0，客戶機（瀏覽器或者本地機器上運行的代碼）向服務器發出請求。該請求是同步的，換句話說，客戶機等待服務器的響應。當客戶機等待的時候，至少會用某種形式通知您在等待：
- 沙漏（特別是 Windows 上）。
- 旋轉的皮球（通常在 Mac 機器上）。
- 應用程序基本上凍結了，然后過一段時間光標變化了。
這正是 Web 應用程序讓人感到笨拙或緩慢的原因 —— 缺乏真正的交互性。按下按鈕時，應用程序實際上變得不能使用，直到剛剛觸發的請求得到響應。如果請求需要大量服務器處理，那么等待的時間可能很長（至少在這個多處理器、DSL 沒有等待的世界中是如此）。
而異步請求不 等待服務器響應。發送請求后應用程序繼續運行。用戶仍然可以在 Web 表單中輸入數據，甚至離開表單。沒有旋轉的皮球或者沙漏，應用程序也沒有明顯的凍結。服務器悄悄地響應請求，完成后告訴原來的請求者工作已經結束（具體的辦法很快就會看到）。結果是，應用程序感覺不 那么遲鈍或者緩慢，而是響應迅速、交互性強，感覺快多了。這僅僅是 Web 2.0 的一部分，但它是很重要的一部分。所有老套的 GUI 組件和 Web 設計范型都不能克服緩慢、同步的請求/響應模型。
發送請求
一旦用 open() 配置好之后，就可以發送請求了。幸運的是，發送請求的方法的名稱要比 open() 適當，它就是 send()。
send() 只有一個參數，就是要發送的內容。但是在考慮這個方法之前，回想一下前面已經通過 URL 本身發送過數據了：
var url = "/cgi-local/lookupCustomer.php?phone=" + escape(phone);
雖然可以使用 send() 發送數據，但也能通過 URL 本身發送數據。事實上，GET 請求（在典型的 Ajax 應用中大約占 80%）中，用 URL 發送數據要容易得多。如果需要發送安全信息或 XML，可能要考慮使用 send() 發送內容（本系列的后續文章中將討論安全數據和 XML 消息）。如果不需要通過 send() 傳遞數據，則只要傳遞 null 作為該方法的參數即可。因此您會發現在本文中的例子中只需要這樣發送請求（參見 清單 10）。
清單 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);
}
處理服務器響應
發送請求，用戶高興地使用 Web 表單（同時服務器在處理請求），而現在服務器完成了請求處理。服務器查看 onreadystatechange 屬性確定要調用的方法。除此以外，可以將您的應用程序看作其他應用程序一樣，無論是否異步。換句話說，不一定要采取特殊的動作編寫響應服務器的方法，只需要改變表單，讓用戶訪問另一個 URL 或者做響應服務器需要的任何事情。這一節我們重點討論對服務器的響應和一種典型的動作 —— 即時改變用戶看到的表單中的一部分。
回調和 Ajax
現在我們已經看到如何告訴服務器完成后應該做什么：將 XMLHttpRequest 對象的 onreadystatechange 屬性設置為要運行的函數名。這樣，當服務器處理完請求后就會自動調用該函數。也不需要擔心該函數的任何參數。我們從一個簡單的方法開始，如 清單 12 所示。
圖 3. 彈出警告的 Ajax 代碼
清單 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>
結束語
您可能對 XMLHttpRequest 感到有點厭倦了，我很少看到一整篇文章討論一個對象，特別是這種簡單的對象。但是您將在使用 Ajax 編寫的每個頁面和應用程序中反復使用該對象。坦白地說，關于 XMLHttpRequest 還真有一些可說的內容。下一期文章中將介紹如何在請求中使用 POST 及 GET，來設置請求中的內容頭部和從服務器響應讀取內容頭部，理解如何在請求/響應模型中編碼請求和處理 XML。
再往后我們將介紹常見 Ajax 工具箱。這些工具箱實際上隱藏了本文所述的很多細節，使得 Ajax 編程更容易。您也許會想，既然有這么多工具箱為何還要對底層的細節編碼。答案是，如果不知道應用程序在做什么，就很難發現應用程序中的問題。
因此不要忽略這些細節或者簡單地瀏覽一下，如果便捷華麗的工具箱出現了錯誤，您就不必撓頭或者發送郵件請求支持了。如果了解如何直接使用 XMLHttpRequest，就會發現很容易調試和解決最奇怪的問題。只有讓其解決您的問題，工具箱才是好東西。
因此請熟悉 XMLHttpRequest 吧。事實上，如果您有使用工具箱的 Ajax 代碼，可以嘗試使用 XMLHttpRequest 對象及其屬性和方法重新改寫。這是一種不錯的練習，可以幫助您更好地理解其中的原理。
NET技術：使用 JavaScript 和 Ajax 發出異步請求，轉載需保留來源！
鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。
