技术应用方案和开发指南

1、AJAX技术应用方案和开发指南修订历史记录日期版本说明作者2006/02/240.5新建徐建评审记录角色签名日期说明吴志平2006-03-02张敬平2006-03-02杨震2006-03-02徐建2006-03-02蒋建波2006-03-02徐明杰2006-03-02评审结果：AJAX应用方案可与STRUT幼案弁存，具体用在哪些方面®J详细设计阶段再具体讨论，一般用在对页面进行无刷新操作时。对AJAX方案，要进行组件封装。汴意两套方案的整合，以及系统的性能与开发规范。具体详细设计方面要充分考虑对各种页向布局的支持。AJAX技术应用1修订历史记录21 AJAX技术应用41.1 什么是A

2、JAX41.2 AJAX架构与系统架构的集成41.2.1 AJAX架构41.2.2 系统架构41.2.3 架构整合说明41.3 AJAX的应用范畴52 AjAX的开发指南52.1 后台开发62.1.1 服务层（M）62.2 前台开发62.2.1 控制层（C）62.2.2 显示层（V）62.3 前后台交互配置71AJAX技术应用方案1.1什么是AJAXAJAX是AsynchronousJavaScript+XML的简称，AJAX其实不是一不新的技术，只是W3C中的一些技术与javascript的结合体，其实包含的技术有：1. .XHTML+CSS:用于界面的展现；2. DOM（DocumentO

3、bjectModel）：用于界面的动态显示及交互；3. XMLHttpRequest:进行异步数据传输；4. XML:进行异步数据传输的数据载体；5. JAVASCRIPT:作为粘合剂将上述所有的东西绑定在一起。1.2AJAX架构与系统架构的集成1.2.1 AJAX架构AJAX架构采用开源的DWR+JAVASCRIPT+DOM+XHTML1.2.2 系统架构系统架构采用STRUTS+SPRING+HIBERNATE1.2.3 架构整合说明整合后的架构采用STRUTS（DWR）+SPRING+HIBERNATE，也就是说对于系统可以走两条路线，一条是走STRUTS路线，通过STRUTS调用后台的

4、SPRING服务，一条是走DWR路线，通过DWR提供的规范调用后台的SPRING服务，见图一整合后的系统架构STRUTS架构路线服务层（M）控制层（C）显示层（V）DWR架构路线Spring+HibernateSTRUTSJsp+JSTL端务服2 端户客Javascript+DWRJavascript+dom+xhtml（图一）两个架构的整合说明1 将dwr.jar拷贝到系统项目的lib目录2 将dwr.xml文件拷贝到WEB-INF目录3 修改系统的web.xml文件，在其中增加<servlet><servlet-name>dwr-invoker</servle

5、t-name><display-name>DWRServlet</display-name><servlet-class>uk.ltd.getahead.dwr.DWRServlet</servlet-class><init-param><param-name>debug</param-name><param-value>true</param-value></init-param><load-on-startup>1</load-on-startup

6、></servlet><servlet-mapping><servlet-name>dwr-invoker</servlet-name><url-pattern>/dwr/*</url-pattern></servlet-mapping>4 .3AJAX的应用范畴客户端需要通过无刷新和后台进行交互，进行数据动态的CRUD操作系统中应用的场景分析：1、 动态的内容选择2、 用户的快速录入3、 局部数据的动态更新和维护2AjAX的开发指南在图一中可以看出基于ajax开发与传统mvc开发不同的是，ajax开发的

7、显示层和控制层是在客户端通过js+dom+xhtml+xmlHttpRequest来实现，而传统的struts等mvc架构的显示层和控制层是通过服务端的struts+jsp等来实现的，对比如下：struts架构M服务层serviceC控制层actionV 显示层jsp+taglibAjax架构M服务层serviceC控制层javascriptV 显示层javascript+dom+xhtml从上面的比较我们就可以很清楚的看出，Ajax架构和Struts架构相同点是服务层结构完全相同，而不同的是控制层和显示层结构，下面以一个简单的CRUD例子介绍AJAX开发规2.1 后台开发后台开发：指的就是服

8、务层(M)的开发2.1.1 服务层(M)以投保单的维护作为例子，向外提供接口ApplicationFormService,其中提供四个业务方法：/新增投保单publicvoidcreateApplicationForm(ApplicationFormobj);/获取投保单publicApplicationFormreadApplicationForm(Stringid);/修改投保单publicvoidupdateApplicationForm(ApplicationFormobj);/删除投保单publicvoiddeleteApplicationForm(Stringid);/其他的业务操

9、作2.2 前台开发前台开发：包含控制层(C)和显示层(V)的开发2.2.1 控制层(C)根据请求访问服务层的业务方法，并调用显示层对返回的结果进行展现/*新增投保单*/functioncreateApplicationForm()/通过显示层获取数据对象varapplicationForm=getApplicationForm();/调用服务层的业务方法,并将结果传给回调方法callBack进行数据填充ApplicationFormService.createApplicationForm(applicationForm,callBack);/*对返回的结果进行数据填充*/functionca

10、llback()/对返回的结果进行数据填充，由于是新增操作，所以只是提示一个成功失败信息alert(“新增成功”);2.2.2 显示层(V)对页面中的数据进行封装和对页面进行数据填充/*投保单的数据对象*/functionApplicationForm()this.applicationFormId=null;this.applicationFormNo=null;/*封装投保单的数据对象*/functiongetApplicationForm()/通过js+dom获取用户录入的数据，并封装成数据对象ApplicationFormvarapplicationForm=newApplicatio

11、nForm();applicationForm.applicationFormId=document.getElementById(“applicationFormId”).value;applicationForm.applicationFormNo=document.getElementById(“applicationFormNo”).value;returnapplicationForm;/*填充投保单的数据对象*/functionsetApplicationForm(applicationForm)/通过js+dom将数据对象applicationForm的数据填充到界面中docum

12、ent.getElementById(“applicationFormId”).value=applicationForm.applicationFormId;document.getElementById(“applicationFormNo”).value=applicationForm.applicationFormNo;2.3 前后台交互配置看前台控制层代码中的红色部分，客户端通过javascript可以调用服务层的业务方法，那么这里面的通信和数据传输都是通过DWR来实现的，服务层的接口ApplicationFormService会映射成前台的javascript对象ApplicationFormService，其中的映射关系是通过dwr.xml配置文件完成。<createcreator="new"javascript="ApplicationFormService"><paramname="class"value="com.longri