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等元素，使得控制文件編寫簡單方便。