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