当柳上原的风吹向天际的时候...

真正的快乐来源于创造

  BlogJava :: 首页 :: 联系 :: 聚合  :: 管理
  368 Posts :: 1 Stories :: 201 Comments :: 0 Trackbacks

 

 

 

 

 

 

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

posted on 2012-02-29 10:31 何杨 阅读(154) 评论(0)  编辑  收藏 所属分类: Teambiz

只有注册用户登录后才能发表评论。


网站导航: