Thinking in AJAX（一）

AJAX - X眾所周知，異步交互、JavaScript腳本和XML封裝數(shù)據(jù)是AJAX的三大特征。其實(shí)，在實(shí)際應(yīng)用中，不需要牢牢套死這三條大律，在我看來，AJAX - X，即去掉用XML封裝數(shù)據(jù)，也不失為一種好的設(shè)計(jì)思路，如果應(yīng)用恰當(dāng)，更顯輕盈步伐和巧妙思路。

一般讀取AJAX返回的XML結(jié)構(gòu)的數(shù)據(jù)時(shí)使用XMLHttp的responseXML對象屬性，同時(shí)，XMLHttp也提供了另外一個(gè)屬性，即ResponseText，通過這個(gè)屬性，XMLHttp可以接受來自服務(wù)器的文本結(jié)構(gòu)的字符串信息。去掉XML的AJAX可以使用ResponseText這個(gè)對象屬性，很靈活的操控返回?cái)?shù)據(jù)的格式，可以自定義格式，比如我通常喜歡用c語言的那種文件流方式定義返回的字符串結(jié)構(gòu)，有文件頭和具體的文件信息實(shí)體，文件頭分為狀態(tài)信息以及文件字符長度，我摒棄了文件字符長度的定義，規(guī)定死接受的ResponseTex字符串中的第一位為狀態(tài)碼，比如設(shè)定常量值0表示一起正常，非0的數(shù)字表示不正常，甚至有錯(cuò)誤等。如果有非0值，程序自動(dòng)取第二位起到257位(長度為256)的字符串組成為狀態(tài)信息，從258位開始到末尾的字符串就是服務(wù)器返回的正常結(jié)果信息。
substring(0,1)取狀態(tài)碼
substring(1,256)取服務(wù)器錯(cuò)誤信息(錯(cuò)誤信息不夠256位用空格補(bǔ)齊，取到數(shù)據(jù)后進(jìn)行Trim處理)
substring(256,末尾)取服務(wù)器返回的數(shù)據(jù)信息
三次substring即完成了一個(gè)簡單但完整的交互工作。比起XML解析組件來說要快的多。

用ResponseText比封裝為XML處理數(shù)據(jù)快和簡單是一個(gè)原因，另一個(gè)原因是可操控性更大更靈活，打開Google Suggest，在搜索框輸入字符可以給你給出拼寫提示，Suggest就是應(yīng)用了AJAX技術(shù)，不過它在從服務(wù)器返回?cái)?shù)據(jù)時(shí)并沒有使用XML封裝，也沒有自定義ResponseText格式，而是直接將返回代碼組織成js腳本，通過瀏覽器返回后直接執(zhí)行，如eval(XMLHttp.ResponseText)這樣的方式進(jìn)行執(zhí)行，http://www.google.com/complete/search?hl=en&js=true&qu=ajax 通過這個(gè)鏈接你可以看到Suggest利用AJAX得到的返回?cái)?shù)據(jù)，此頁面是在Google Suggest的搜索框中輸入"AJAX"后得系統(tǒng)動(dòng)態(tài)返回的數(shù)據(jù)。

瀏覽器段拿到這段代碼后直接eval就可以了，至于sendRPCDone這個(gè)函數(shù)，那當(dāng)然得實(shí)現(xiàn)定義后并裝載到頁面中啦。XMLHttp這個(gè)名字以XML開頭，讓很多人禁錮了思想和創(chuàng)意，完全拋棄X，你也可以做出純AJAX的實(shí)例來。

當(dāng)然，對于大型系統(tǒng)來講，為了保持?jǐn)?shù)據(jù)接口的一致和整齊，還是用XML來傳遞更嚴(yán)謹(jǐn)更統(tǒng)一點(diǎn)，聽說微軟已經(jīng)發(fā)起了重寫XML Parse組件的號召，估計(jì)下一個(gè)版本的XMLHttp還是DOMParser還是MSXML2.DOMDocument都會(huì)大大提高效率，減少資源占用的。

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

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

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

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

著名的圖片存儲網(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è)國外成功應(yīng)用AJAX的網(wǎng)站，我們發(fā)現(xiàn)他們都使用的是輕量級的AJAX，就是那種交互簡單，數(shù)據(jù)較少的操作。這也符合AJAX的本意，雖然像www.backbase.com和bindows都在RIA上有驚人的表現(xiàn)能力，但是速度慢、搜索引擎支持不好、開發(fā)難度大等毛病還是無法讓用戶滿意的，請記住：AJAX的最終目的是為了提高用戶體驗(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ù)器固有的這種請求/響應(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ì)如下所示：

• 三層對應(yīng)的文件對象：view.jsp(視圖)、action.do(控制器)、model.java(模型)
  
• view.jsp是用戶看到的界面，并通過內(nèi)置的AJAX對象異步方式給action.do發(fā)送請求，AJAX.OnReadyStateChange開始監(jiān)聽
  
• action.do接收到view.jsp發(fā)過來的請求(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對象的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亦可。