第三部分

第8章 Ajax技術(shù)詳解

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

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

8.1 Ajax概述

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

8.1.1 Ajax的來源

很明顯，B/S模式的應(yīng)用很容易部署和維護(hù)，因?yàn)榭蛻舳怂械牟僮飨到y(tǒng)都會有瀏覽器，而且不需要下載和安裝客戶端，用戶可以利用基于瀏覽器的客戶端做事情。但B/S模式是一個同步的請求/響應(yīng)系統(tǒng)，會導(dǎo)致瀏覽器對整個頁面進(jìn)行刷新，當(dāng)服務(wù)器負(fù)載很小時，這種交互方式并沒有什么問題；但當(dāng)服務(wù)器負(fù)載很大時，用戶需要等待很長的時間才能得到想要的數(shù)據(jù)，這給用戶帶來的交互體驗(yàn)不是太好。由此可以看出，人們需要一個異步的交互模式。

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

8.1.2 Ajax的工作原理

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

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

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

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

8.1.3 Ajax的發(fā)展趨勢

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

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

● 更好的用戶體驗(yàn)——Ajax采用異步交互機(jī)制，可以使用戶一邊瀏覽網(wǎng)頁，一邊提交數(shù)據(jù)。

● 數(shù)據(jù)和呈現(xiàn)分離——Ajax采用DOM來組織內(nèi)容，采用CSS來顯示外觀，從而使UI設(shè)計(jì)人員可以只關(guān)注界面的展示。

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

● 瀏覽器的“前進(jìn)”和“后退”按鈕的功能失效。

● 搜索引擎不容易找到網(wǎng)頁的內(nèi)容。

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

而且目前出現(xiàn)一些新的技術(shù)有取代Ajax的趨勢，比如：

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

● Java Web Start——Java Web Start是基于Java技術(shù)的應(yīng)用程序的一種部署解決方案，它使應(yīng)用程序的部署過程自動完成，不需要進(jìn)行復(fù)雜的升級；但使用Java Web Start的相關(guān)技術(shù)必須要求客戶端安裝Java運(yùn)行時環(huán)境。

● Microsoft Smart Client——Microsoft Smart Client是基于.NET平臺的應(yīng)用程序的一種部署解決方案，它部署在IIS服務(wù)器上，本質(zhì)上是基于.NET的WinForm程序，因此要使用Microsoft Smart Client的相關(guān)技術(shù)必須要求客戶端安裝.NET框架環(huán)境。

Java Web Start和Microsoft Smart Client技術(shù)從實(shí)現(xiàn)機(jī)制上來說，是非常相似的，只是它們分別支持Java和.NET平臺。它們都采用B/S模式下載和升級、安裝應(yīng)用程序，但其實(shí)都應(yīng)該屬于C/S結(jié)構(gòu)的應(yīng)用程序，而Ajax技術(shù)只是增強(qiáng)了B/S的交互模式和響應(yīng)速度。

8.1.4 Ajax的應(yīng)用示例

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

Google Map的用戶體驗(yàn)更好，用戶只需要用鼠標(biāo)在地圖上拖曳即可，如圖8.4所示。