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等元素，使得控制文件编写简单方便。