AJAX工作原理

一、 ajax技術的背景

不可否認，ajax技術的流行得益於google的大力推廣，正是由於google earth、google suggest以及gmail等對ajax技術的廣泛應用，催生了ajax的流行。而這也讓微軟感到無比的尷尬，因為早在97年，微軟便已經發明了ajax中的關鍵技術，並且在99年IE5推出之時，它便開始支援XmlHttpRequest對象，並且微軟之前已經開始在它的一些產品中應用ajax，比如說MSDN網站菜單中的一些應用。遺憾的是，不知道出於什麼想法，當時微軟發明了ajax的核心技術之後，並沒有看到它的潛力而加以發展和推廣，而是將它擱置起來。對於這一點來說，我個人是覺得非常奇怪的，因為以微軟的資源和它的戰略眼光來說，應該不會看不到ajax技術的前景，唯一的解釋也許就是因為當時它的主要競爭者Netscape的消失反而使它變得麻痹和遲鈍，畢竟巨人也有打盹的時候，比如IBM曾經在對微軟戰略上的失誤。正是這一次的失誤，成就了它現在的競爭者google在ajax方面的領先地位，而事實上google目前在ajax技術方面的領先是微軟所無法達到的，這一點在後面我講述ajax缺陷的時候也會提到。現在微軟也意識到了這個問題，因此它也開始在ajax領域奮起直追，比如說推出它自己的ajax架構atlas，並且在.NET2.0也提供了一個用來實現非同步回調的介面，即ICallBack介面。那麼微軟為什麼對自己在ajax方面的落後如此緊張呢？現在就讓我們來分析一下ajax技術後面隱藏的深刻意義。

二、什麼是ajax

ajax即“Asynchronous Javascript AND XML”（非同步JavaScript和XML），是指一種建立互動式網頁應用的網頁開發技術。ajax包括使用XHTML和CSS標準實現Web頁面，使用DOM實現動態顯示和互動,使用XML進行資料交換和處理，最後使用javaScript綁定和處理所有資料。ajax將一些伺服器負擔的工作下放至用戶端，利用用戶端的某些能力來處理資料，減少使用者實際和心理上的等待時間，使用者不在遇到因為頁面重新整理導致瀏覽器長時間空白，甚至停止回應的糟糕結果，這給了使用者最佳的體驗效果。ajax基於標準化的XML，被廣泛使用並且支援，利於維護和修改。ajax調用外部資料很方便，在需要頁面與資料分離的情況下，可以應用ajax擷取資料。

三、ajax所包含的技術

大家都知道ajax並非一種新的技術，而是幾種原有技術的結合體。它由下列技術組合而成。
1.使用CSS和XHTML來表示。
2. 使用DOM模型來互動和動態顯示。
3.使用XMLHttpRequest來和伺服器進行非同步通訊。
4.使用javaScript來綁定和調用。

四、ajax原理和XmlHttpRequest對象

ajax的原理簡單來說通過XmlHttpRequest對象來向伺服器發非同步請求，從伺服器獲得資料，然後用javascript來操作DOM而更新頁面。這其中最關鍵的一步就是從伺服器獲得請求資料。要清楚這個過程和原理，我們必須對 XMLHttpRequest有所瞭解。XMLHttpRequest是ajax的核心機制，它是在IE5中首先引入的，是一種支援非同步請求的技術。簡單的說，也就是javascript可以及時向伺服器提出請求和處理響應，而不阻塞使用者。達到無重新整理的效果。通過能更清楚的理解ajax的工作原理

ajax工作原理">

XMLHttpRequest的工作原理。
XMLHttpRequest對象的屬性有：
onreadystatechange 每次狀態改變所觸發事件的事件處理常式。
responseText 從伺服器處理序返回資料的字串形式。
responseXML 從伺服器處理序返回的DOM相容的文檔資料對象。
status 從伺服器返回的數字代碼，比如常見的404（未找到）和200（已就緒）
statusText 伴隨狀態代碼的字串資訊
readyState 對象狀態值
0 (未初始化) 對象已建立，但是尚未初始化（尚未調用open方法）

1 (初始化) 對象已建立，尚未調用send方法

2 (發送資料) send方法已調用，但是當前的狀態及http頭未知

3 (資料傳送中) 已接收部分資料，因為響應及http頭不全，這時通過responseBody和responseText擷取部分資料會出現錯誤

4 (完成) 資料接收完畢,此時可以通過通過responseXml和responseText擷取完整的回應資料

由於各瀏覽器之間存在差異，所以建立一個XMLHttpRequest對象可能需要不同的方法。這個差異主要體現在IE和其它瀏覽器之間。下面是一個比較標準的建立XMLHttpRequest對象的方法

如上所示，函數首先檢查XMLHttpRequest的整體狀態並且保證它已經完成（readyStatus=4），即資料已經發送完畢。然後根據伺服器的設定詢問請求狀態，如果一切已經就緒（status=200），那麼就執行下面需要的操作。
對於XmlHttpRequest的兩個方法，open和send，其中open方法指定了：
a、向伺服器提交資料的類型，即post還是get。
b、請求的url地址和傳遞的參數。
c、傳輸方式，false為同步，true為非同步。預設為true。如果是非同步通訊方式(true)，客戶機就不等待伺服器的響應；如果是同步方式(false)，客戶機就要等到伺服器返回訊息後才去執行其他動作。我們需要根據實際需要來指定同步方式，在某些頁面中，可能會發出多個請求，甚至是有組織有計劃有隊形大規模的高強度的request，而後一個是會覆蓋前一個的，這個時候當然要指定同步方式。
d、Send方法用來發送請求。

從XMLHttpRequest的工作流程，我們可以看出，XMLHttpRequest是完全用來向伺服器發出一個請求的，它的作用也局限於此，但它的作用是整個ajax實現的關鍵，因為ajax無非是兩個過程，發出請求和響應請求。並且它完全是一種用戶端的技術。而XMLHttpRequest正是處理了伺服器端和用戶端通訊的問題所以才會如此的重要。

我們可以把伺服器端看成一個資料介面，它返回的是一個純文字流，當然，這個文字資料流可以是XML格式，可以是Html，可以是Javascript代碼，也可以只是一個字串。這時候，XMLHttpRequest向伺服器端請求這個頁面，伺服器端將文本的結果寫入頁面，這和普通的web開發流程是一樣的，不同的是，用戶端在非同步擷取這個結果後，不是直接顯示在頁面，而是先由javascript來處理，然後再顯示在頁面。至於現在流行的很多ajax控制項，比如magicajax等，可以返回DataSet等其它資料類型，只是將這個過程封裝了的結果，本質上他們並沒有什麼太大的區別。

五、ajax的優缺點

ajax的優點:
1、最大的一點是頁面無重新整理，在頁面內與伺服器通訊，給使用者的體驗非常好。

2、使用非同步方式與伺服器通訊，不需要打斷使用者的操作，具有更加迅速的響應能力。

3、可以把以前一些伺服器負擔的工作轉嫁到用戶端，利用用戶端閑置的能力來處理，減輕伺服器和頻寬的負擔，節約空間和寬帶租用成本。並且減輕伺服器的負擔，ajax的原則是“按需取資料”，可以最大程度的減少冗餘請求，和響應對伺服器造成的負擔。

4、基於標準化的並被廣泛支援的技術，不需要下載外掛程式或者小程式。

ajax的缺點:
因為平時我們大多注意的都是ajax給我們所帶來的好處諸如使用者體驗的提升。而對ajax所帶來的缺陷有所忽視。下面所闡述的ajax的缺陷都是它先天所產生的。

1、ajax幹掉了back按鈕，即對瀏覽器後退機制的破壞。後退按鈕是一個標準的web網站的重要功能，但是它沒法和js進行很好的合作。這是ajax所帶來的一個比較嚴重的問題，因為使用者往往是希望能夠通過後退來取消前一次操作的。那麼對於這個問題有沒有辦法？答案是肯定的，用過Gmail的知道，Gmail下面採用的ajax技術解決了這個問題，在Gmail下面是可以後退的，但是，它也並不能改變ajax的機制，它只是採用的一個比較笨但是有效辦法，即使用者單擊後退按鈕訪問記錄時，通過建立或使用一個隱藏的IFRAME來重現頁面上的變更。（例如，當使用者在Google Maps中單擊後退時，它在一個隱藏的IFRAME中進行搜尋，然後將搜尋結果反映到ajax元素上，以便將應用程式狀態恢複到當時的狀態。）但是，雖然說這個問題是可以解決的，但是它所帶來的開發成本是非常高的，和ajax架構所要求的快速開發是相背離的。這是ajax所帶來的一個非常嚴重的問題。

2、安全問題
技術同時也對IT企業帶來了新的安全威脅，ajax技術就如同對企業資料建立了一個直接通道。這使得開發人員在不經意間會暴露比以前更多的資料和伺服器邏輯。ajax的邏輯可以對用戶端的安全掃描技術隱藏起來，允許駭客從遠端伺服器上建立新的攻擊。還有ajax也難以避免一些已知的安全弱點，諸如跨網站腳步攻擊、SQL注入攻擊和基於credentials的安全漏洞等。
3、對搜索引擎的支援比較弱。
4、破壞了程式的異常機制。至少從目前看來，像ajax.dll，ajaxpro.dll這些ajax架構是會破壞程式的異常機制的。關於這個問題，我曾經在開發過程中遇到過，但是查了一下網上幾乎沒有相關的介紹。後來我自己做了一次實驗，分別採用ajax和傳統的form提交的模式來刪除一條資料……給我們的調試帶來了很大的困難。
5、另外，像其他方面的一些問題，比如說違背了url和資源定位的初衷。例如，我給你一個url地址，如果採用了ajax技術，也許你在該url地址下面看到的和我在這個url地址下看到的內容是不同的。這個和資源定位的初衷是相背離的。
6、一些手持功能（如手機、PDA等）現在還不能很好的支援ajax，比如說我們在手機的瀏覽器上開啟採用ajax技術的網站時，它目前是不支援的，當然，這個問題和我們沒太多關係。

六、ajax的幾種架構

目前我們採用的比較多的ajax架構主要有ajax.dll,ajaxpro.dll,magicajax.dll 以及微軟的atlas架構。ajax.dll和ajaxpro.dll這兩個架構差別不大，而magicajax.dll只是封裝得更厲害一些，比如說它可以直接返回DataSet資料集，前面我們已經說過，ajax返回的都是字串，magicajax只是對它進行了封裝而已。但是它的這個特點可以給我們帶來很大的方便，比如說我們的頁面有一個列表，而列表的資料是不斷變化的，那麼我們可以採用magicajax來處理，操作很簡單，添加magicajax之後，將要更新的清單控制項放在magicajax的控制項之內，然後在pageload裡面定義更新間隔的時間就ok了，atlas的原理和magicajax差不多。但是，需要注意的一個問題是，這幾種架構都只支援IE，沒有進行瀏覽器安全色方面的處理，用反編譯工具察看他們的代碼就可以知道。
除了這幾種架構之外，我們平時用到的比較多的方式是自己建立xmlHttpRequest對象，這種方式和前面的幾種架構相比更具有靈活性。另外，在這裡還提一下aspnet2.0內建的非同步回調介面，它和ajax一樣也可以實現局部的無重新整理，但它的實現實際上也是基於xmlhttprequest對象的，另外也是只支援IE，當然這是微軟的一個競爭策略。

七、ajax簡單樣本

樣本實現的功能是當使用者在WEB頁面的下拉式清單方塊中選擇某個省的名稱時，會在頁面上顯示該省的省會名稱，而此時頁面並不重新整理。省會名稱將由服務端傳送至瀏覽器。這個樣本包含三個部分（這裡的服務端是PHP程式）

1、HTML頁面，包含下拉式清單方塊和要顯示省會名稱的位置

2、JavaScript程式，實現發送請求和處理響應。

3、服務端的PHP程式，用來接受瀏覽器的請求，向瀏覽器傳送結果資料。

（用戶端）HTML頁面：

<strong>ajax</strong>簡單應用
請選擇一個省（自治區）

（服務端）PHP程式

'合肥','fj'=>'福州','gs'=>'蘭州','gx'=>'南寧','gd'=>'廣州','gz'=>'貴陽','hn'=>'海口','hb'=>'石家莊','hh'=>'鄭州','hlg'=>'哈爾濱',);if (empty($_GET['prov'])){echo iconv("UTF-8", "UTF-8", '您還沒有選擇省（自治區）'); //注意：你的PHP檔案使用的是GB2312編碼儲存的話，那iconv('GB2312','UTF-8','您還沒有選擇省（自治區）');}else{$prov = $_GET['prov'];$city = $city_arr[$prov];echo iconv("UTF-8", "UTF-8", '所選省（自治區）省會（首府）為：'.$city); //注意：你的PHP檔案使用的是GB2312編碼儲存的話，那iconv('GB2312','UTF-8','所選省（自治區）省會（首府）為：'.$city);}?>

運行效果

ajax工作原理">

以上就介紹了AJAX工作原理，包括了方面的內容，希望對PHP教程有興趣的朋友有所協助。

