ajax入門詳解__AJAX

一個執行個體

在開始正式講解 Ajax之前，首先讓我們先來看看Google Map使用Ajax改善其產品設計的效果。

1． 在瀏覽器地址欄中輸入http://maps.google.com開啟Google Map的介面。

2． 在頁面頂端的搜尋方塊中輸入“China”，單擊“Search”按鈕。

3． 單擊地圖右上方的“Satellite”按鈕，切換到衛星介面。

4． 調整地圖左上方的尺寸，方法或者縮小目前範圍。可以看到，地圖地區的圖象根據尺規的位置快速的變換。

5． 按住滑鼠左鍵，拖拽地圖，地圖地區的圖象隨著滑鼠的移動而移動這個過程的圖象是即時更新的。效果如下圖所。

 

 

 

由上可以明顯的看出，當使用者拖動地圖進行操作的時候，Web頁上的地圖立即發生相應的變化，頁面卻沒有重新整理，當按住滑鼠左鍵移動地圖的時候，地圖跟著移動，這個過程是快速的，而期間使用者沒有想伺服器提交表單或和單擊一個超連結。如果用傳統的Web應用程式互動思維來理解，這個過程是難以理解的，這正是Ajax的魅力。

l什麼是Ajax?

在研究ajax之前首先讓我們先來討論一個問題 ——什麼是Web 2.0 。聽到 Web 2.0 這個詞的時候，應該首先問一問 “Web 1.0 是什麼。” 雖然很少聽人提到 Web 1.0，實際上它指的就是具有完全不同的請求和響應模型的傳統 Web。比如，到hdu.edu.cn 網站上點擊一個按鈕。就會對伺服器發送一個請求，然後響應再返回到瀏覽器。該請求不僅僅是新內容和項目列表，而是另一個完整的 HTML 頁面。因此當 Web 瀏覽器用新的 HTML 頁面重繪時，可能會看到閃爍或抖動。事實上，通過看到的每個新頁面可以清晰地看到請求和響應。

　　Web 2.0（在很大程度上）消除了這種看得見的往複互動。比如在 Google Maps 上，你可以拖動地圖，放大和縮小，只有很少的重繪操作。當然這裡仍然有請求和響應，只不過都藏到了幕後。作為使用者，體驗更加舒適，感覺很像傳統型應用程式。這種新的感受和範型就是當有人提到 Web 2.0 時您所體會到的。

　　需要關心的是如何使這些新的互動成為可能。顯然，仍然需要發出請求和接收響應，但正是針對每次請求/響應互動的 HTML 重繪造成了緩慢、笨拙的 Web 互動的感受。因此很清楚，我們需要一種方法使發送的請求和接收的響應只 包含需要的資料而不是整個 HTML 頁面。惟一需要獲得整個新 HTML 頁面的時候就是希望使用者看到 新頁面的時候。

　　但多數互動都是在已有頁面上增加細節、修改主體文本或者覆蓋原有資料。這些情況下，Ajax 和 Web 2.0 方法允許在不 更新整個 HTML 頁面的情況下發送和接收資料。對於那些經常上網的人，這種能力可以讓您的應用程式感覺更快、響應更及時，讓他們不時地光顧您的網站。

 

因此在這裡，我們是時候可以對ajax做出一個完整的解釋了，Adaptive Path公司的Jesse James Garrett這樣定義Ajax：

　　Ajax不是一種技術。實際上，它由幾種蓬勃發展的技術以新的強大方式組合而成。Ajax包含： 基於XHTML和CSS標準的表示； 使用Document Object Model進行動態顯示和互動； 使用XMLHttpRequest與伺服器進行非同步通訊； 使用JavaScript綁定一切。

這非常好，但為什麼要以Ajax命名呢。其實術語Ajax是由Jesse James Garrett創造的，他說它是“Asynchronous JavaScript + XML的簡寫”。

l      Ajax工作原理

通過上述的定義，我們應該已經知道Ajax的組成了，即他是由XHTML，XML，CSS，DOM，XMLHttpRequest,JavaScript等技術綜合而成的，然而，真正使用Ajax能實現非同步通訊，要真正實現這種絢麗的奇蹟，必須非常熟悉一個JavaScript 對象，即 XMLHttpRequest。因此我們要瞭解Ajax的工作原理,就要從理解XMLHttpRequest這個對象開始。

下面給出將要用於該對象的很少的幾個 方法和屬性。

　 ·open()：建立到伺服器的新請求。 

　   　·send()：向伺服器發送請求。 

　   　·abort()：退出當前請求。 

   　　·readyState：提供當前 HTML 的就緒狀態。 

   　　·responseText：伺服器返回的請求響應文本。

‘onreadystatechange:回調方法

　·responseXML：伺服器返回的請求響應XML形式組織的文本。

 下面我們簡單的介紹一下這幾個方法的作用。

l         建立一個XMLHttpRequest

     首先需要建立一個新變數並賦給它一個 XMLHttpRequest 對象執行個體。這在 JavaScript 中很簡單，只要對該對象名使用 new 關鍵字即可，如下代碼所示。

＜script language="javascript" type="text/javascript"＞
　var request = new XMLHttpRequest();
＜/script＞
　　在 JavaScript 中用 var 建立一個變數，給它一個名字（如 “request”），然後賦給它一個新的 XMLHttpRequest 執行個體。此後就可以在函數中使用該對象了。
　　錯誤處理
　　在實際上各種事情都可能出錯，而上面的代碼沒有提供任何錯誤處理。較好的辦法是建立該對象，並在出現問題時優雅地退出。比如，任何較早的瀏覽器都不支援 XMLHttpRequest，您需要讓這些使用者知道有些地方出了問題。下面js代碼通過建立getXMLHttpRequest()方法說明如何建立該對象。

代碼1：一個詳細的XMLHttpRequest對象的建立

＜script language="javascript" type="text/javascript"＞

function getXMLHttpRequest(){
　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;
　　　}
　　}
　}
　return request;

}
＜/script＞
　　一定要理解這些步驟：
　　建立一個新變數 request 並賦值 false。後面將使用 false 作為判定條件，它表示還沒有建立 XMLHttpRequest 對象。 
　　·增加 try/catch 塊： 
　　·嘗試建立 XMLHttpRequest 對象。 
　　　　1、如果失敗（catch (failed)）則保證 request 的值仍然為 false。 
　　　　2、檢查 request 是否仍為 false（如果一切正常就不會是 false）。 
　　·如果出現問題則request 返回 false。

此外，在上面的代碼中，我們是不是注意到了一個問題，就是當request = new XMLHttpRequest();出現異常的時候，在catch語句中我們用了request = new ActiveXObject("Msxml2.XMLHTTP");和request = new ActiveXObject("Microsoft.XMLHTTP");等語句進行對象擷取，這是針對IE瀏覽器而進行的操作，因為IE瀏覽器對 XMLHttpRequest 版本有不同的稱呼。事實上，它將其稱為幾種 不同的東西。如果使用較新版本的 Internet Explorer，則需要使用對象 Msxml2.XMLHTTP，而較老版本的 Internet Explorer則使用 Microsoft.XMLHTTP。我們需要支援這兩種物件類型（同時還要支援非 Microsoft 瀏覽器）。

l         用 XMLHttpRequest 發送請求
　　得到請求對象之後就可以進入請求/響應迴圈了。記住，XMLHttpRequest 惟一的目的是讓您發送請求和接收響應。其他一切都是 JavaScript、CSS 或頁面中其他代碼的工作：改變使用者介面、切換映像、解釋伺服器返回的資料。準備好XMLHttpRequest 之後，就可以向伺服器發送請求了。
　　Ajax 採用一種沙箱安全模型。因此，Ajax 代碼（具體來說就是 XMLHttpRequest 對象）只能對所在的同一個域發送請求。如果讓