Ajax的內部實現機制、原理與實踐

一、Ajax是什麼

AJAX全稱為"Asynchronous JavaScript and XML"（非同步JavaScript和XML），Ajax不是一個技術，它實際上是幾種技術，每種技術都有其獨特這處，合在一起就成了一個功能強大的新技術。作為建立互動式網頁應用的網頁開發技術，它有以下特點：

使用XHTML+CSS來表示資訊
使用JavaScript操作DOM（Document Object Model）進行動態顯示及互動
使用XML和XSLT進行資料交換及相關操作
使用XMLHttpRequest對象與Web伺服器進行非同步資料交換
使用JavaScript將所有的東西綁定在一起
使用SOAP以XML的格式來傳送方法名和方法參數
類似於DHTML或LAMP，AJAX不是指一種單一的技術，而是有機地利用了一系列相關的技術。事實上，一些基於AJAX的"派生/合成"式（derivative/composite）的技術正在出現，如"AFLAX"。

AJAX的應用使用支援以上技術的Web瀏覽器作為運行平台。這些瀏覽器目前包括：Mozilla、Firefox、Internet Explorer、Opera、Konqueror及Mac OS的Safari。但是Opera不支援XSL格式對象，也不支援XSLT。（摘自於：http://zh.wikipedia.org/zh-cn/AJAX）

二、Ajax誕生的背景，為什麼使用Ajax

我們都知道，使用者通過瀏覽器產生一個請求後，此請求通過HTTP協議，向伺服器請求所要的資源，如果是一個圖片連結，則請求的就是一個圖片資源，如果是一個檔案連結，則請求的是一個檔案資源，多數情況下，請求的是整個網頁，網頁又根據自身的HTML代碼，請求各個具體的資源，比片、音頻等。隨著網站的發展，使用者量越來越大，伺服器的壓力也越來越大，這就暴露出了一個問題，即：大多數使用者在請求資源時，新請求的那個網頁中，與現在的那個網頁有很多相同的地方。但是由於請求的是整個網頁，它會重新從伺服器擷取所有的資源（當然，有很多圖片、檔案之類的會從用戶端中擷取），這就是大大的浪費。

為瞭解決這個問題，Ajax就誕生了，它主要的作用就是，通過XMLHttpRequest對象擷取伺服器資源，局部重新整理使用者正在瀏覽頁面，大大減輕了伺服器的壓力，由於只擷取的是需要更新的資源，相對整個頁面的資源來說，瀏覽器也伺服器之間的資料互動量也大大減少（大約只有原來的5%），大大加快了頁面的載入速度。

 

三、Ajax發展史

該技術原屬於微軟的一個研發小組，為了允許用戶端發送HTTP請求，研發出來的，但沒有得到廣泛應用。後經Google廣泛用於它的應用程式進行非同步通訊互動，如google討論群組、google地圖等，Ajax這個詞由《Ajax: A New Approach to Web Applications》一文所創，該文的迅速流傳提高了人們使用該項技術的意識，後來就出現了瘋狂的Ajax革命。

 

四、Ajax實踐

AJAX 的要點是 XMLHttpRequest 對象，所有的實現也是通過XMLHttpRequest對象操作的。但是在瀏覽器大戰的今天，不同的瀏覽器建立 XMLHttpRequest 對象的方法是有差異的。IE 瀏覽器使用 ActiveXObject，而其他的瀏覽器使用名為 XMLHttpRequest 的 JavaScript 內建對象。

// Mozilla, Safari,Opera 8.0+...function ajaxFunction(){    var http_request;    if (window.XMLHttpRequest) {         http_request = new XMLHttpRequest();                        } else if (window.ActiveXObject) {     // IE        try {            http_request = new ActiveXObject("Msxml2.XMLHTTP");         } catch (e) {            try {                http_request = new ActiveXObject("Microsoft.XMLHTTP");            } catch (e) {                alert("您的瀏覽器不支援Ajax");                return false;            }        }                http_request.onreadystatechange = alertContents;        http_request.open('GET', url, true);        http_request.send(null);}function alertContents() {    if (http_request.readyState == 4) {        if (http_request.status == 200) {            alert(http_request.responseText);        } else {            alert('There was a problem with the request.');        }    }}

解釋：首先建立一個XMLHttpRequest對象http_request，如果支援window.XMLHttpRequest，則用new XMLHttpRequest() 來建立此對象。這條語句針對 Firefox、Opera 以及 Safari 瀏覽器，如果不支援，則嘗試針對Internet Explorer 6.0+ 的Msxml2.XMLHTTP組件建立XMLHttpRequest，如果也不支援，則嘗試針對 Internet Explorer 5.5+ 的Microsoft.XMLHTTP組件，如果仍然不支援，則說明使用者的瀏覽器版本太低了，提示使用者“您的瀏覽器不支援AJAX”。

XMLHttpRequest對象的onreadystatechange方法用於，狀態改變時要執行的方法，用來處理這個響應。

readyState的狀態是：

　　0 請求未初始化（open() 之前）
　　1 請求已提出，正在裝載 （調用 send() 之前）
　　2 裝載完畢，請求已發送（這裡通常可以從響應得到內容標題部）
　　3 互動中，請求處理中（響應中通常有部分資料可用，但是伺服器還沒有完成響應）
　　4 請求已完成（可以訪問伺服器響應並使用它）
所以當readyState等於4時，就表示一個完整的伺服器響應已經收到了，接著，函數會檢查HTTP伺服器響應的狀態值。當HTTP伺服器響應的值為200時，表示狀態正常。這時候才真正執行用戶端要執行的操作。

讀取從伺服器返回過來的資料，有兩種方式：

　　1、http_request.responseText：以文本字串的方式返回伺服器的響應
　　2、http_request.responseXML：以XMLDocument對象方式返迴響應

 

五、Ajax缺陷與不足

1、可能破壞瀏覽器後退按鈕的正常行為；
2、使用動態網頁面更新使得使用者難於將某個特定的狀態儲存到收藏夾中；
3、Ajax的無重新整理重載，由於頁面的變化沒有重新整理重載那麼明顯，所以容易給使用者帶來困擾——使用者不太清楚現在的資料是新的還是已經更新過的；現有的解決有：在相關位置提示、資料更新的地區設計得比較明顯、資料更新後給使用者提示等；
4、一些手持功能（如手機、PDA等）現在還不能很好的支援Ajax。

 

六、Ajax工具

1、jQuery 開源JS架構，寫得更少，做得更多；
2、ASP.NET AJAX Extension 微軟AJAX工具箱；
3、ExtJS 一個自YUI延伸出來的Ajax架構。