AJAX技术应用方案和开发指南.doc

项目技术文档AJAX技术应用方案和开发指南修订历史记录日期版本说明作者2006/02/240.5新建徐建评 审 记 录 角 色签 名日 期说 明吴志平2006-03-02张敬平2006-03-02杨震2006-03-02徐建2006-03-02蒋建波2006-03-02徐明杰2006-03-02评审结果： AJAX应用方案可与STRUTS方案并存，具体用在哪些方面到详细设计阶段再具体讨论，一般用在对页面进行无刷新操作时。对AJAX方案，要进行组件封装。注意两套方案的整合，以及系统的性能与开发规范。具体详细设计方面要充分考虑对各种页面布局的支持。AJAX技术应用1修订历史记录21AJAX技术应用31.1什么是AJAX31.2AJAX架构与系统架构的集成31.2.1AJAX架构31.2.2系统架构31.2.3架构整合说明31.3AJAX的应用范畴42AjAX的开发指南52.1后台开发52.1.1服务层（M）52.2前台开发52.2.1控制层（C）52.2.2显示层（V）62.3前后台交互配置71 AJAX技术应用方案1.1 什么是AJAXAJAX是Asynchronous JavaScript + XML 的简称, AJAX其实不是一种新的技术,只是W3C中的一些技术与javascript的结合体,其实包含的技术有：1XHTML+CSS：用于界面的展现；2DOM（Document Object Model）：用于界面的动态显示及交互； 3XMLHttpRequest：进行异步数据传输； 4XML：进行异步数据传输的数据载体；5JAVASCRIPT：作为粘合剂将上述所有的东西绑定在一起。1.2 AJAX架构与系统架构的集成1.2.1 AJAX架构AJAX架构采用开源的DWR+JAVASCRIPT+DOM+XHTML1.2.2 系统架构系统架构采用 STRUTS+SPRING+HIBERNATE1.2.3 架构整合说明整合后的架构采用STRUTS（DWR）+ SPRING + HIBERNATE ,也就是说对于系统可以走两条路线，一条是走STRUTS路线，通过STRUTS调用后台的SPRING服务，一条是走DWR路线，通过DWR提供的规范调用后台的SPRING服务，见图一 （图一）两个架构的整合说明1 将dwr.jar拷贝到系统项目的lib目录2 将dwr.xml文件拷贝到WEB-INF目录3修改系统的web.xml文件，在其中增加 dwr-invoker DWR Servlet uk.ltd.getahead.dwr.DWRServlet debug true 1 dwr-invoker /dwr/* 1.3 AJAX的应用范畴客户端需要通过无刷新和后台进行交互，进行数据动态的CRUD操作系统中应用的场景分析：1、 动态的内容选择2、 用户的快速录入3、 局部数据的动态更新和维护2 AjAX的开发指南在图一中可以看出基于ajax开发与传统mvc开发不同的是，ajax开发的显示层和控制层是在客户端通过js+dom+xhtml+xmlHttpRequest来实现，而传统的struts等mvc架构的显示层和控制层是通过服务端的struts+jsp等来实现的，对比如下：struts架构M 服务层 serviceC 控制层 actionV 显示层 jsp+taglib Ajax架构M 服务层 serviceC 控制层 javascriptV 显示层 javascript+dom+xhtml从上面的比较我们就可以很清楚的看出， Ajax架构和Struts架构相同点是服务层结构完全相同，而不同的是控制层和显示层结构，下面以一个简单的CRUD例子介绍AJAX开发规范2.1 后台开发后台开发：指的就是服务层（M）的开发2.1.1 服务层（M）以投保单的维护作为例子，向外提供接口ApplicationFormService , 其中提供四个业务方法：/新增投保单public void createApplicationForm(ApplicationForm obj) ;/获取投保单public ApplicationForm readApplicationForm(String id) ;/修改投保单public void updateApplicationForm(ApplicationForm obj) ;/删除投保单public void deleteApplicationForm(String id) ;/其他的业务操作.2.2 前台开发前台开发：包含控制层（C）和 显示层（V）的开发2.2.1 控制层（C）根据请求访问服务层的业务方法，并调用显示层对返回的结果进行展现/* 新增投保单 */function createApplicationForm() /通过显示层获取数据对象var applicationForm = getApplicationForm();/调用服务层的业务方法,并将结果传给回调方法callBack进行数据填充ApplicationFormService.createApplicationForm(applicationForm,callBack);/* 对返回的结果进行数据填充 */function callback() /对返回的结果进行数据填充，由于是新增操作，所以只是提示一个成功失败信息alert(“新增成功”); 2.2.2 显示层（V）对页面中的数据进行封装和对页面进行数据填充/* 投保单的数据对象 */function ApplicationForm()this.applicationFormId = null;this.applicationFormNo = null;/* 封装投保单的数据对象 */function getApplicationForm()/通过js+dom获取用户录入的数据，并封装成数据对象ApplicationFormvar applicationForm = new ApplicationForm();applicationForm.applicationFormId = document.getElementById(“applicationFormId”).value;applicationForm.applicationFormNo = document.getElementById(“applicationFormNo”).value;return applicationForm;/* 填充投保单的数据对象 */function setApplicationForm(applicationForm)/通过js+dom将数据对象applicationForm的数据填充到界面中document.getElementById(“applicationFormId”).value = applicationForm.applicationFormId;document.getElementById(“applicationFormNo”).value = applicationForm.applicationFormNo;2.3 前后台交互配置看前台控制层