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