第三部分

第8章 Ajax技術詳解

近兩年來，Ajax逐漸成為一個炙手可熱的名詞，其良好的用戶體驗，得到人們越來越多的推崇。它整合了XMLHttpRequest、JavaScript、DOM、CSS、XML等眾多技術，使得原來笨拙的Web界面變得交互性十足。

本章從Ajax的來源講起，介紹其工作原理、發展趨勢和應用示例，然后分別介紹Ajax的核心技術，最后介紹目前比較流行的Ajax實現框架，并對它們進行比較。目的是讓讀者明白什么是Ajax，如何應用Ajax。

8.1 Ajax概述

當軟件開發從C/S模式轉入B/S模式時，人們驚呼B/S模式所帶來的便利，但隨著B/S的應用，它的缺點也逐漸暴露出來，這時Ajax的出現也就水到渠成了。Ajax的英文全稱是Asynchronous JavaScript and XML，即異步JavaScript和XML。

8.1.1 Ajax的來源

很明顯，B/S模式的應用很容易部署和維護，因為客戶端所有的操作系統都會有瀏覽器，而且不需要下載和安裝客戶端，用戶可以利用基于瀏覽器的客戶端做事情。但B/S模式是一個同步的請求/響應系統，會導致瀏覽器對整個頁面進行刷新，當服務器負載很小時，這種交互方式并沒有什么問題；但當服務器負載很大時，用戶需要等待很長的時間才能得到想要的數據，這給用戶帶來的交互體驗不是太好。由此可以看出，人們需要一個異步的交互模式。

Ajax正是這種異步交互模式的代表，它采用XMLHttpRequest對象進行數據的異步交互，使用JavaScript增強用戶體驗，使用DOM組織內容，使用CSS顯示外觀，使用XML封裝數據。Ajax不是一種新的技術，而是幾種已有技術的整合，是由Adaptive Path公司的Jesse James Garrett在2005年提出來的——2005年的2月，他發表了一篇《Ajax: A New Approach to Web Applications》文章，在這篇文章中Ajax概念第一次被提出來。

8.1.2 Ajax的工作原理

在傳統的Web交互方式中，首先由用戶通過界面觸發一個HTTP請求到服務器，服務器根據請求的內容進行相應的處理，然后將處理完畢的內容再返回給客戶端。這是一個同步的過程，當服務器處理客戶端提交的請求時，客戶端的用戶只能空閑等待，無論用戶是想處理很少的數據，還是要進行大批量的數據處理，服務器都會給用戶重新返回一個完整的頁面。這種傳統的同步交互模式如圖8.1所示。

在傳統的同步交互模式下，客戶端每次都要浪費時間和帶寬去重新讀取整個頁面。前面講過，如果服務器負載比較小，速度還會比較快；如果此時服務器負載很大，則需要較長的時間才能在服務器端處理完，而此時用戶卻要白白地浪費時間在客戶端等待，這樣的用戶體驗是相當糟糕的。

Ajax卻不一樣，它采用異步機制，使得用戶可以一邊等待反應，一邊查看網頁中的內容。Ajax的工作原理相當于在用戶和服務器之間加了一個引擎，這個引擎用來統一處理提交的數據，它把不需要服務器端處理的數據直接返回給頁面，而只把需要后臺處理的數據傳給服務器端，這種典型的異步交互模式如圖8.2所示。

在這種異步交互模式下，客戶端不需要重新讀取整個頁面，而只讀取所需要的那部分內容，這樣的用戶體驗無疑是不錯的。

8.1.3 Ajax的發展趨勢

Ajax的這種異步交互模式，給Web應用帶來了很多好處：

● 按需取數據——Ajax只把那些需要后臺處理的數據提交到服務器端，從而減輕服務器端的壓力。

● 更好的用戶體驗——Ajax采用異步交互機制，可以使用戶一邊瀏覽網頁，一邊提交數據。

● 數據和呈現分離——Ajax采用DOM來組織內容，采用CSS來顯示外觀，從而使UI設計人員可以只關注界面的展示。

但Ajax目前也有很多問題沒有解決，比如：

● 瀏覽器的“前進”和“后退”按鈕的功能失效。

● 搜索引擎不容易找到網頁的內容。

● 不同瀏覽器對JavaScript的支持存在兼容性問題。

而且目前出現一些新的技術有取代Ajax的趨勢，比如：

● Macromedia Flash——Flash技術可以對視頻和音樂進行交互操作，還可以進行組件和可視化開發，但要運行Flash就必須在瀏覽器上安裝插件。

● Java Web Start——Java Web Start是基于Java技術的應用程序的一種部署解決方案，它使應用程序的部署過程自動完成，不需要進行復雜的升級；但使用Java Web Start的相關技術必須要求客戶端安裝Java運行時環境。

● Microsoft Smart Client——Microsoft Smart Client是基于.NET平臺的應用程序的一種部署解決方案，它部署在IIS服務器上，本質上是基于.NET的WinForm程序，因此要使用Microsoft Smart Client的相關技術必須要求客戶端安裝.NET框架環境。

Java Web Start和Microsoft Smart Client技術從實現機制上來說，是非常相似的，只是它們分別支持Java和.NET平臺。它們都采用B/S模式下載和升級、安裝應用程序，但其實都應該屬于C/S結構的應用程序，而Ajax技術只是增強了B/S的交互模式和響應速度。

8.1.4 Ajax的應用示例

Google是Ajax應用的先行者，它的Suggest（搜索建議）、Map、Gmail等都實現了Ajax技術。比如，在Google的首頁搜索欄中，輸入英文字母g，用戶看不到它和后臺進行交互，但它卻能及時地給出搜索建議，如圖8.3所示。

Google Map的用戶體驗更好，用戶只需要用鼠標在地圖上拖曳即可，如圖8.4所示。