一、AJAX最值得稱贊的是異步交互，而不是無(wú)刷新

很多人都看好AJAX無(wú)刷新的技術(shù)，以至于認(rèn)同AJAX就是用來(lái)做無(wú)刷新的。這個(gè)認(rèn)識(shí)是錯(cuò)誤的，什么是無(wú)刷新？無(wú)刷新就是頁(yè)面無(wú)需重載，那什么又是異步交互？異步交互就是一個(gè)簡(jiǎn)單的多線程，當(dāng)你在一個(gè)blog里看文章時(shí)，同時(shí)也可以利用AJAX進(jìn)行無(wú)刷新的回復(fù)提交，看起來(lái)雖然也是無(wú)刷新，但這里最重要的是異步，即你能一邊看文章，一邊又能向服務(wù)器提交你的回復(fù)信息，利用好這個(gè)異步，才能算是掌握了AJAX的精髓。很多場(chǎng)合，無(wú)刷新是呈現(xiàn)給用戶的視覺(jué)體驗(yàn)，而異步交互卻是默默無(wú)聞的工作在臺(tái)后，這種情況導(dǎo)致大多數(shù)人的錯(cuò)誤理解了AJAX的權(quán)重之分。

二、推薦在WEB上輕量級(jí)的應(yīng)用AJAX

著名的圖片存儲(chǔ)網(wǎng)站 Flickr 利用AJAX可謂出神入化。我之所以這么說(shuō)，是因?yàn)槲艺J(rèn)為Flickr深知AJAX的利與弊，并且牢牢抓住自己的網(wǎng)站的功能特點(diǎn)，并沒(méi)有因AJAX而AJAX，而是架驅(qū)于技術(shù)至上，讓AJAX融于網(wǎng)站之中，為網(wǎng)站提供了更好的功能服務(wù)。如Flickr中無(wú)論是在多圖列表頁(yè)面還是單圖詳細(xì)頁(yè)面，修改圖片的標(biāo)題和描述都應(yīng)用了AJAX技術(shù)，讓用戶無(wú)需跳轉(zhuǎn)到單獨(dú)的編輯頁(yè)面中，編輯后單擊保存，亦使用了異步交互的方式進(jìn)行數(shù)據(jù)提交，這時(shí)，頁(yè)面上顯示一個(gè)Loading字符外，其他部分不受任何影響，可謂太貼心的服務(wù)。 再如基于Tag的專業(yè)Blog搜索服務(wù)商 Technorati 也使用了AJAX，在搜索某個(gè)Tag時(shí)，頁(yè)面主導(dǎo)部分會(huì)即刻顯示所有Technorati數(shù)據(jù)庫(kù)中查詢到的數(shù)據(jù)條目，在左邊的側(cè)邊欄上會(huì)顯示兩個(gè)Loading圖標(biāo)，過(guò)一會(huì)兒，這兩個(gè)Loading就會(huì)顯示具體的內(nèi)容了，顯示的是此Tag相關(guān)的Flickr的圖片和書簽服務(wù)網(wǎng)站(Furl&del.icio.us)的鏈接，因?yàn)檫@兩部分內(nèi)容是取自其他網(wǎng)站，如果由服務(wù)器統(tǒng)一先取得數(shù)據(jù)在一同顯示到頁(yè)面時(shí)，會(huì)受到網(wǎng)速影響而變慢，通過(guò)AJAX的異步交互方式首先立即顯示本地?cái)?shù)據(jù)，然后由客戶端去和Flickr、Furl、del.icio.us打交道分別取得它們的數(shù)據(jù)，即節(jié)約了流量帶寬又不影響用戶訪問(wèn)速度，可謂高明。

通過(guò)以上兩個(gè)國(guó)外成功應(yīng)用AJAX的網(wǎng)站，我們發(fā)現(xiàn)他們都使用的是輕量級(jí)的AJAX，就是那種交互簡(jiǎn)單，數(shù)據(jù)較少的操作。這也符合AJAX的本意，雖然像 www.backbase.com 和 bindows 都在RIA上有驚人的表現(xiàn)能力，但是速度慢、 搜索引擎支持不好 、開(kāi)發(fā)難度大等毛病還是無(wú)法讓用戶滿意的，請(qǐng)記住：AJAX的最終目的是為了提高用戶體驗(yàn)，為了方便用戶交互，而不是因技術(shù)而技術(shù)的。

三、AJAX的MVC架構(gòu)設(shè)計(jì)

很多人認(rèn)為在成熟的框架中應(yīng)用AJAX會(huì)破壞框架的完整性，比較常見(jiàn)的說(shuō)法有三層架構(gòu)的WEB應(yīng)用中破壞MVC模式，其實(shí)不然。MVC的理論我就不多說(shuō)了，經(jīng)典的那三個(gè)層、五條線大家都很熟悉，在WEB應(yīng)用中，因?yàn)闉g覽器/服務(wù)器固有的這種請(qǐng)求/響應(yīng)的斷開(kāi)式網(wǎng)絡(luò)通訊模式，決定了在Model層無(wú)法實(shí)現(xiàn)主動(dòng)向View層發(fā)出數(shù)據(jù)更新事件，所以一般常見(jiàn)的成熟MVC框架中都將經(jīng)典MVC理論稍作修改：由Model層處理完業(yè)務(wù)后通知Control層，然后由Control層承擔(dān)向View發(fā)送數(shù)據(jù)更新的義務(wù)。但是AJAX天生具有監(jiān)聽(tīng)功能，AJAX實(shí)現(xiàn)異步響應(yīng)的那個(gè)OnReadyStateChange事件就具有在客戶端程序中才會(huì)有的事件監(jiān)聽(tīng)功能。現(xiàn)在想來(lái)，利用AJAX實(shí)現(xiàn)的MVC模型有如下圖這樣：

理想化的設(shè)計(jì)如下所示：

• 三層對(duì)應(yīng)的文件對(duì)象：view.jsp(視圖)、action.do(控制器)、model.java(模型)
• view.jsp是用戶看到的界面，并通過(guò)內(nèi)置的AJAX對(duì)象異步方式給action.do發(fā)送請(qǐng)求，AJAX.OnReadyStateChange開(kāi)始監(jiān)聽(tīng)
• action.do接收到view.jsp發(fā)過(guò)來(lái)的請(qǐng)求(GET或者POST方式)，通過(guò)Request判斷后發(fā)送給相應(yīng)的業(yè)務(wù)/數(shù)據(jù)模型model.java
• model.java開(kāi)始執(zhí)行業(yè)務(wù)操作，執(zhí)行完畢直接給view.jsp頁(yè)面發(fā)送數(shù)據(jù)更新的通知，這個(gè)通知的消息有可能是XML封裝的數(shù)據(jù)，也有可能是一段文本，甚至是一段HTML代碼，當(dāng)然，既然用MVC，不推薦有Model發(fā)送HTML，推薦還是用XML封裝業(yè)務(wù)數(shù)據(jù)即可。
• view.jsp頁(yè)面中AJAX對(duì)象的OnReadyStateChange接收到了數(shù)據(jù)更新通知，根據(jù)實(shí)際情況用DOM進(jìn)行頁(yè)面呈現(xiàn)更新。

通過(guò)以上幾步一氣呵成，一個(gè)典型的基于MVC的三層交互就完成了。當(dāng)然，熟悉WEB下的MVC框架的用戶，如熟悉Struts的Java開(kāi)發(fā)人員可能不習(xí)慣由Model層給View直接發(fā)送數(shù)據(jù)更新通知，那咱們也可以轉(zhuǎn)變一下，Model層業(yè)務(wù)處理完畢將更新通知先發(fā)送給Control，由Control去通知View亦可。

Thinking in AJAX(二) —— 基于AJAX的WEB設(shè)計(jì)