TeamBiz中Ajax的基本運用
作者：何楊
撰寫日期：2012年2月23日
版本：1.03
更新日期：2012年2月28日
第一部分：功能說明
提供前臺頁面到后臺程序的異步請求響應(yīng)通道。
第二部分：核心組件
| 名稱 | 路徑 | 說明 |
| Prototype1.6.0.3 | teambiz\WebRoot\page\js\prototype-1.6.0.3.js | Prototype是一個有歷史的JS類庫，TeamBiz中主要使用了它的Ajax部分及$函數(shù)。 注意，Teambiz并非對Prototype產(chǎn)生依賴，Prototype為Teambiz提供的僅是Ajax.Rquest對象及$函數(shù)而已，因為teambiz已經(jīng)包含了普適版本的$函數(shù)，因此換用別的JS框架并不困難。 |
| AjaxAction | teambiz\src\com\ibm\heyang\action\base\AjaxAction.java | AjaxAction是所有響應(yīng)Ajax異步請求的Action的基類，它主要提供以下四項功能： 1.設(shè)置Response； 2.將url中的請求參數(shù)解碼后放入RequestParamMap對象中； 3.強制子類實現(xiàn)函數(shù)process； 4.當子類的process函數(shù)中出現(xiàn)異常時，接受異常并包裝成XML傳給前臺頁面。 |
| RequestParamMap | teambiz\src\com\ibm\heyang\action\base\RequestParamMap.java | RequestParamMap內(nèi)部包含一個哈希表，以鍵值對的方式存儲前臺URL中的參數(shù)及其值。 RequestParamMap對象的生成在于AjaxAction的getRequestParamMap函數(shù)中。 它主要提供以下功能： 1.將參數(shù)集約化，此舉能簡化后臺函數(shù)的編寫。 2.當后臺函數(shù)使用其內(nèi)部不存在的參數(shù)時，它能自主拋出一個異常，通過AjaxAction的包裝傳給前臺，使得編寫函數(shù)的程序員能快速進行錯誤定位。 3.對前臺編寫的參數(shù)進行UTF-8解碼，此舉與前臺對URL進行兩次UTF8編碼配合，統(tǒng)一解決了非ASC碼字符傳送產(chǎn)生亂碼的問題。 |
| Ajax.Request | 定義于prototype-1.6.0.3.js中 | Prototype中定義的Ajax請求對象，其參數(shù)有四個，URL，請求方法，成功函數(shù)和失敗函數(shù)。相對于傳統(tǒng)方式，它的可控性更高。 |
第三部分：前臺和后臺的約定
考慮到代碼解讀和人工解讀的雙重便利性，TeamBiz采用XML而不是JSON作為前后臺數(shù)據(jù)的載體，此XML采用了一些約定以規(guī)范化編碼。
在Ajax異步調(diào)用過程中，后臺需要兩組數(shù)據(jù)來說明響應(yīng)細節(jié)，一個是狀態(tài)，如果它的值是OK的話，說明已經(jīng)取得了請求想要的數(shù)據(jù)，此時向前臺傳出的XML會類似如下格式：
<response>
<status>ok</status>
<node>
<a>a</a>
<b>b</b>
</node>
</response>
如果它的值是NG的話，說明后臺能響應(yīng)，但由于某種原因（用戶未登錄，用戶缺乏權(quán)限，參數(shù)缺失，后臺組件尚未就緒，異常拋出等，前二者需要程序員編碼，后兩者框架已經(jīng)代為實現(xiàn)），不能傳回請求想要的數(shù)據(jù)，此時向前臺傳出的XML會類似如下格式：
<response>
<status>ng</status>
<text>請登錄后再來執(zhí)行此操作</text>
</response>
后臺進行如上約定后，前臺就可以采用如下統(tǒng)一的格式來處理XHR響應(yīng)：
new Ajax.Request(url,{
method:'get',
onSuccess: function(ajaxObj){
// alert(ajaxObj.responseText); // 這里不要隨意刪去，有時需要打開屏蔽以觀察后臺傳來的XML文本
var status=ajaxObj.responseXML.getElementsByTagName("status")[0].firstChild.data;
if(status=="ok"){
....// 狀態(tài)為ok時的處理
}
else{
....// 狀態(tài)為ng時的處理
}
},
onFailure: function(){
....// 后臺沒有響應(yīng)時的處理
}
}
);
第四部分：使用步驟
| 步驟 | 說明 | 參照 |
| 在前臺編寫向后臺發(fā)出請求的JS函數(shù)。 | 在此函數(shù)需要進行三件事： 1.編寫URL。 2.對URL進行UTF8編碼。 3.會使用一個Ajax.Request對象向后臺發(fā)出請求。 | teambiz\WebRoot\page\js\common.js中fetchMenuFromBg函數(shù)。 |
| 在后臺編寫響應(yīng)前端請求的Action | 此Action需要繼承自AjaxAction。在其process函數(shù)中主要進行以下三件事： 1.權(quán)限驗證。 2.使用后端組件取得前端想要的數(shù)據(jù)。 3.以XML方式將數(shù)據(jù)傳回。 | teambiz\src\com\ibm\heyang\action\menu\FetchMenuAction.java |
| 在struts-config.xml注冊Action | 由于完全不需要靜態(tài)或動態(tài)的form，此Action格式很簡單，僅包含path，type和scope三部分。 | teambiz\WebRoot\WEB-INF\struts-config.xml中的 <action path="/FetchMenu" type="com.ibm.heyang.action.menu.FetchMenuAction" scope="request" > </action> |
第五部分：小結(jié)
TeamBiz中全部向后臺的請求都是通過Ajax異步方式實現(xiàn)的，相對于傳統(tǒng)方式，它有以下優(yōu)勢：
1.由于只需要提取必要的資源，因此占用資源少。
2.有多種狀態(tài)，多個函數(shù)用來處理后臺的響應(yīng)，這使得控制更加多樣化。
3.由于前臺在請求時處于靜止狀態(tài)，因此無需刻意保存前臺頁面數(shù)據(jù)。
4.由于不需要編寫form，forward等元素，使得控制文件編寫簡單方便。