第三部分

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

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

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

8.1 Ajax概述

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

8.1.1 Ajax的來(lái)源

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

Ajax正是這種異步交互模式的代表，它采用XMLHttpRequest對(duì)象進(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年提出來(lái)的——2005年的2月，他發(fā)表了一篇《Ajax: A New Approach to Web Applications》文章，在這篇文章中Ajax概念第一次被提出來(lái)。

8.1.2 Ajax的工作原理

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

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

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

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

8.1.3 Ajax的發(fā)展趨勢(shì)

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

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

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

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

但Ajax目前也有很多問(wèn)題沒(méi)有解決，比如：

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

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

● 不同瀏覽器對(duì)JavaScript的支持存在兼容性問(wèn)題。

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

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

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

● Microsoft Smart Client——Microsoft Smart Client是基于.NET平臺(tái)的應(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ī)制上來(lái)說(shuō)，是非常相似的，只是它們分別支持Java和.NET平臺(tái)。它們都采用B/S模式下載和升級(jí)、安裝應(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的首頁(yè)搜索欄中，輸入英文字母g，用戶看不到它和后臺(tái)進(jìn)行交互，但它卻能及時(shí)地給出搜索建議，如圖8.3所示。

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