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