摘要:

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

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

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

著名的圖片存儲(chǔ)網(wǎng)站Flickr利用AJAX可謂出神入化。我之所以這么說，是因?yàn)槲艺J(rèn)為Flickr深知AJAX的利與弊，并且牢牢抓住自己的網(wǎng)站的功能特點(diǎn)，并沒有因AJAX而AJAX，而是架驅(qū)于技術(shù)至上，讓AJAX融于網(wǎng)站之中，為網(wǎng)站提供了更好的功能服務(wù)。如Flickr中無論是在多圖列表頁面還是單圖詳細(xì)頁面，修改圖片的標(biāo)題和描述都應(yīng)用了AJAX技術(shù)，讓用戶無需跳轉(zhuǎn)到單獨(dú)的編輯頁面中，編輯后單擊保存，亦使用了異步交互的方式進(jìn)行數(shù)據(jù)提交，這時(shí)，頁面上顯示一個(gè)Loading字符外，其他部分不受任何影響，可謂太貼心的服務(wù)。

再如基于Tag的專業(yè)Blog搜索服務(wù)商Technorati也使用了AJAX，在搜索某個(gè)Tag時(shí)，頁面主導(dǎo)部分會(huì)即刻顯示所有Technorati數(shù)據(jù)庫中查詢到的數(shù)據(jù)條目，在左邊的側(cè)邊欄上會(huì)顯示兩個(gè)Loading圖標(biāo)，過一會(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ù)在一同顯示到頁面時(shí)，會(huì)受到網(wǎng)速影響而變慢，通過AJAX的異步交互方式首先立即顯示本地?cái)?shù)據(jù)，然后由客戶端去和Flickr、Furl、del.icio.us打交道分別取得它們的數(shù)據(jù)，即節(jié)約了流量帶寬又不影響用戶訪問速度，可謂高明。

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

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

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

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

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

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

注：全文完