眾所周知，異步交互、JavaScript腳本和XML封裝數(shù)據(jù)是AJAX的三大特征。其實，在實際應(yīng)用中，不需要牢牢套死這三條大律，在我看來，AJAX - X，即去掉用XML封裝數(shù)據(jù)，也不失為一種好的設(shè)計思路，如果應(yīng)用恰當(dāng)，更顯輕盈步伐和巧妙思路。
一般讀取AJAX返回的XML結(jié)構(gòu)的數(shù)據(jù)時使用XMLHttp的responseXML對象屬性，同時，XMLHttp也提供了另外一個屬性，即ResponseText，通過這個屬性，XMLHttp可以接受來自服務(wù)器的文本結(jié)構(gòu)的字符串信息。去掉XML的AJAX可以使用ResponseText這個對象屬性，很靈活的操控返回數(shù)據(jù)的格式，可以自定義格式，比如我通常喜歡用c語言的那種文件流方式定義返回的字符串結(jié)構(gòu)，有文件頭和具體的文件信息實體，文件頭分為狀態(tài)信息以及文件字符長度，我摒棄了文件字符長度的定義，規(guī)定死接受的ResponseTex字符串中的第一位為狀態(tài)碼，比如設(shè)定常量值0表示一起正常，非0的數(shù)字表示不正常，甚至有錯誤等。如果有非0值，程序自動取第二位起到257位(長度為256)的字符串組成為狀態(tài)信息，從258位開始到末尾的字符串就是服務(wù)器返回的正常結(jié)果信息。
|
|
substring(0,1)取狀態(tài)碼
substring(1,256)取服務(wù)器錯誤信息(錯誤信息不夠256位用空格補(bǔ)齊，取到數(shù)據(jù)后進(jìn)行Trim處理)
substring(256,末尾)取服務(wù)器返回的數(shù)據(jù)信息
三次substring即完成了一個簡單但完整的交互工作。比起XML解析組件來說要快的多。
|
用ResponseText比封裝為XML處理數(shù)據(jù)快和簡單是一個原因，另一個原因是可操控性更大更靈活，打開Google Suggest，在搜索框輸入字符可以給你給出拼寫提示，Suggest就是應(yīng)用了AJAX技術(shù)，不過它在從服務(wù)器返回數(shù)據(jù)時并沒有使用XML封裝，也沒有自定義ResponseText格式，而是直接將返回代碼組織成js腳本，通過瀏覽器返回后直接執(zhí)行，如eval(XMLHttp.ResponseText)這樣的方式進(jìn)行執(zhí)行，http://www.google.com/complete/search?hl=en&js=true&qu=ajax 通過這個鏈接你可以看到Suggest利用AJAX得到的返回數(shù)據(jù)，此頁面是在Google Suggest的搜索框中輸入"AJAX"后得系統(tǒng)動態(tài)返回的數(shù)據(jù)。
sendRPCDone(frameElement, "ajax", new Array("ajax", "ajax amsterdam", "ajax fc", "ajax ontario", "ajax grips", "ajax football club", "ajax public library", "ajax football", "ajax soccer", "ajax pickering transit"), new Array("3,840,000 results", "502,000 results", "710,000 results", "275,000 results", "8,860 results", "573,000 results", "40,500 results", "454,000 results", "437,000 results", "10,700 results"), new Array(""));
瀏覽器段拿到這段代碼后直接eval就可以了，至于sendRPCDone這個函數(shù)，那當(dāng)然得實現(xiàn)定義后并裝載到頁面中啦。XMLHttp這個名字以XML開頭，讓很多人禁錮了思想和創(chuàng)意，完全拋棄X，你也可以做出純AJAX的實例來。
當(dāng)然，對于大型系統(tǒng)來講，為了保持?jǐn)?shù)據(jù)接口的一致和整齊，還是用XML來傳遞更嚴(yán)謹(jǐn)更統(tǒng)一點，聽說微軟已經(jīng)發(fā)起了重寫XML Parse組件的號召，估計下一個版本的XMLHttp還是DOMParser還是MSXML2.DOMDocument都會大大提高效率，減少資源占用的。
一、AJAX最值得稱贊的是異步交互，而不是無刷新
很多人都看好AJAX無刷新的技術(shù)，以至于認(rèn)同AJAX就是用來做無刷新的。這個認(rèn)識是錯誤的，什么是無刷新？無刷新就是頁面無需重載，那什么又是異步交互？異步交互就是一個簡單的多線程，當(dāng)你在一個blog里看文章時，同時也可以利用AJAX進(jìn)行無刷新的回復(fù)提交，看起來雖然也是無刷新，但這里最重要的是異步，即你能一邊看文章，一邊又能向服務(wù)器提交你的回復(fù)信息，利用好這個異步，才能算是掌握了AJAX的精髓。很多場合，無刷新是呈現(xiàn)給用戶的視覺體驗，而異步交互卻是默默無聞的工作在臺后，這種情況導(dǎo)致大多數(shù)人的錯誤理解了AJAX的權(quán)重之分。
二、推薦在WEB上輕量級的應(yīng)用AJAX
著名的圖片存儲網(wǎng)站Flickr利用AJAX可謂出神入化。我之所以這么說，是因為我認(rèn)為Flickr深知AJAX的利與弊，并且牢牢抓住自己的網(wǎng)站的功能特點，并沒有因AJAX而AJAX，而是架驅(qū)于技術(shù)至上，讓AJAX融于網(wǎng)站之中，為網(wǎng)站提供了更好的功能服務(wù)。如Flickr中無論是在多圖列表頁面還是單圖詳細(xì)頁面，修改圖片的標(biāo)題和描述都應(yīng)用了AJAX技術(shù)，讓用戶無需跳轉(zhuǎn)到單獨的編輯頁面中，編輯后單擊保存，亦使用了異步交互的方式進(jìn)行數(shù)據(jù)提交，這時，頁面上顯示一個Loading字符外，其他部分不受任何影響，可謂太貼心的服務(wù)。
再如基于Tag的專業(yè)Blog搜索服務(wù)商Technorati也使用了AJAX，在搜索某個Tag時，頁面主導(dǎo)部分會即刻顯示所有Technorati數(shù)據(jù)庫中查詢到的數(shù)據(jù)條目，在左邊的側(cè)邊欄上會顯示兩個Loading圖標(biāo)，過一會兒，這兩個Loading就會顯示具體的內(nèi)容了，顯示的是此Tag相關(guān)的Flickr的圖片和書簽服務(wù)網(wǎng)站(Furl&del.icio.us)的鏈接，因為這兩部分內(nèi)容是取自其他網(wǎng)站，如果由服務(wù)器統(tǒng)一先取得數(shù)據(jù)在一同顯示到頁面時，會受到網(wǎng)速影響而變慢，通過AJAX的異步交互方式首先立即顯示本地數(shù)據(jù)，然后由客戶端去和Flickr、Furl、del.icio.us打交道分別取得它們的數(shù)據(jù)，即節(jié)約了流量帶寬又不影響用戶訪問速度，可謂高明。
通過以上兩個國外成功應(yīng)用AJAX的網(wǎng)站，我們發(fā)現(xiàn)他們都使用的是輕量級的AJAX，就是那種交互簡單，數(shù)據(jù)較少的操作。這也符合AJAX的本意，雖然像http://www.backbase.com/和bindows都在RIA上有驚人的表現(xiàn)能力，但是速度慢、搜索引擎支持不好、開發(fā)難度大等毛病還是無法讓用戶滿意的，請記住：AJAX的最終目的是為了提高用戶體驗，為了方便用戶交互，而不是因技術(shù)而技術(shù)的。
三、AJAX的MVC架構(gòu)設(shè)計
很多人認(rèn)為在成熟的框架中應(yīng)用AJAX會破壞框架的完整性，比較常見的說法有三層架構(gòu)的WEB應(yīng)用中破壞MVC模式，其實不然。MVC的理論我就不多說了，經(jīng)典的那三個層、五條線大家都很熟悉，在WEB應(yīng)用中，因為瀏覽器/服務(wù)器固有的這種請求/響應(yīng)的斷開式網(wǎng)絡(luò)通訊模式，決定了在Model層無法實現(xiàn)主動向View層發(fā)出數(shù)據(jù)更新事件，所以一般常見的成熟MVC框架中都將經(jīng)典MVC理論稍作修改：由Model層處理完業(yè)務(wù)后通知Control層，然后由Control層承擔(dān)向View發(fā)送數(shù)據(jù)更新的義務(wù)。但是AJAX天生具有監(jiān)聽功能，AJAX實現(xiàn)異步響應(yīng)的那個OnReadyStateChange事件就具有在客戶端程序中才會有的事件監(jiān)聽功能。現(xiàn)在想來，利用AJAX實現(xiàn)的MVC模型有如下圖這樣：
理想化的設(shè)計如下所示：
- 三層對應(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ù)更新的通知，這個通知的消息有可能是XML封裝的數(shù)據(jù)，也有可能是一段文本，甚至是一段HTML代碼，當(dāng)然，既然用MVC，不推薦有Model發(fā)送HTML，推薦還是用XML封裝業(yè)務(wù)數(shù)據(jù)即可。
- view.jsp頁面中AJAX對象的OnReadyStateChange接收到了數(shù)據(jù)更新通知，根據(jù)實際情況用DOM進(jìn)行頁面呈現(xiàn)更新。
通過以上幾步一氣呵成，一個典型的基于MVC的三層交互就完成了。當(dāng)然，熟悉WEB下的MVC框架的用戶，如熟悉Struts的Java開發(fā)人員可能不習(xí)慣由Model層給View直接發(fā)送數(shù)據(jù)更新通知，那咱們也可以轉(zhuǎn)變一下，Model層業(yè)務(wù)處理完畢將更新通知先發(fā)送給Control，由Control去通知View亦可。