掌握Ajax，第2部分: 使用JavaScript和Ajax發出非同步請求

在 Web 請求中使用 XMLHttpRequest

多數 Web 應用程式都使用請求/響應模型從伺服器上獲得完整的 HTML 頁面。常常是點擊一個按鈕， 等待伺服器響應，再點擊另一個按鈕，然後再等待，這樣一個反覆的過程。有了 Ajax 和 XMLHttpRequest 對象，就可以使用不必讓使用者等待伺服器響應的請求/響應模型了。本文中，Brett McLaughlin 介紹了如何建立能夠適應不同瀏覽器的 XMLHttpRequest 執行個體，建立和發送請求，並響應服 務器。

本系列的上一期文章（請參閱 參考資料 中的連結），我們介紹了 Ajax 應用程式，考察了推動 Ajax 應用程式的基本概念。其中的核心是很多您可能已經瞭解的技術：JavaScript、HTML 和 XHTML、一點動 態 HTML 以及 DOM（文件物件模型）。本文將放大其中的一點，把目光放到具體的 Ajax 細節上。

本文中，您將開始接觸最基本和基礎性的有關 Ajax 的全部對象和編程方法：XMLHttpRequest 對象。 該對象實際上僅僅是一個跨越所有 Ajax 應用程式的公用線程，您可能已經預料到，只有徹底理解該對象 才能充分發揮編程的潛力。事實上，有時您會發現，要正確地使用 XMLHttpRequest，顯然不能 使用 XMLHttpRequest。這到底是怎麼回事呢？

Web 2.0 一瞥

在深入研究代碼之前首先看看最近的觀點 —— 一定要十分清楚 Web 2.0 這個概念。聽到 Web 2.0 這個詞的時候，應該首先問一問 “Web 1.0 是什嗎？” 雖然很少聽人提到 Web 1.0，實際上它指的就是 具有完全不同的請求和響應模型的傳統 Web。比如，到 Amazon.com 網站上點擊一個按鈕或者輸入搜尋項 。就會對伺服器發送一個請求，然後響應再返回到瀏覽器。該請求不僅僅是圖書和書目列表，而是另一個 完整的 HTML 頁面。因此當 網頁瀏覽器用新的 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 對象或者建立使用者互動的某種超極神秘的方法，我們 將使用非常簡單的請求和非常簡單的響應。聽起來似乎沒有多少吸引力，但是用好該對象可以徹底改變您 的應用程式。