Ajax框架,DWR介绍，应用，样例
1.簡化JavaScript的開發難度
2.解決瀏覽器的兼容性問題
3. 簡化開發流程
經常使用Ajax框架
Prototype
一個純粹的JavaScript函數庫，對Ajax提供良好支持
jQuery
1．很優秀的JavaScript庫，對Ajax提供了良好的支持
2．與Prototype設計思想不同的是在使用jQuery之后，開發人員操作的不再是DOM對象而是jQuery對象
DWR
1.????????很專業的Java Ajax框架
2.????????通過DWR框架，可將Java類的方法直接暴露給client
Dojo
① Dojo功能強大，包括很多內容，Ajax僅僅是當中之中的一個
② 特點在于控件和控件系統
③ 眼下Dojo仍然在開發完好中，版本號更新速度很快
AjaxTags
由一系列JSP標簽組成，將經常使用的Ajax應用場景封裝為簡單的標簽
使用DWR框架簡化Ajax開發
1. DWR（Direct Web Remoting）是一個Java Ajax框架
2. DWR框架同意開發者在client通過JavaScript代碼調用server端的Java方法
3. DWR框架主要由兩部分組成：
1．clientJavaScript代碼直接調用server端Java方法
2．server上執行的DWR核心Servlet負責處理client請求，將client請求托付到實際的Java對象進行處理，并將結果返回給client
下載DWR框架
DWR的官方網站：
http://directwebremoting.org/dwr/downloads/index.html
各下載項說明：
1. JAR File：該選項僅下載dwr.jar文件
2. WAR File：該選項下載dwr.jar文件及其其它依賴的類庫，還包含DWR的使用范例
3. Sources：該選項下載DWR的源文件
安裝DWR
1．加入dwr.jar文件到WEB-INF/lib文件夾下
2．改動web.xml文件，加入例如以下代碼
1.與web.xml文件位于同一文件夾
2.該文件用于定義Java類和JavaScript之間的相應關系，將Java類的方法暴露給client
其結構例如以下：<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting 3.0//EN""http://getahead.org/dwr/dwr30.dtd"> <dwr><allow><!-- 創建腳本對象 --><create creator="..." javascript="..." scope="..."><!-- 要公布的類名 --><param name="..." value="..." /><!-- 暴露給client的，要公布的方法名 --><include method="…" /><!-- 不暴露給client的 --><exclude method="…" /></create><!-- js和服務端的對象進行轉換 --><convert converter="..." match="..." /></allow> </dwr> dwr.xml具體解釋 （參考dwr.xml）
<allow>元素：定義了DWR可以創建和轉換的類，是dwr.xml中最重要的元素
<create>元素：創建器定義怎樣將一個Java類轉換成JavaScript對象
<convert >元素：類型轉換器，用于定義Java類型和JavaScript類型之間的相應關系
?
<create>元素的屬性：
creator屬性：DWR內置多個創建器用于處理多種類型Java類
javascript屬性：在client給創建的JavaScript對象命名。該名字將在頁面里作為js被導入
scope屬性：作用域。選項能夠是：application, session,request和page。默覺得page
<create>元素的子元素：
<param>元素：用來指定創建器的參數。當中name屬性用來指定參數名稱，value指定參數的值
<include>元素：定義同意訪問的方法列表，其它方法將不暴露給client
<exclude>元素：定義不同意訪問的方法列表，當中method屬性指定不被暴露給client的方法（其它沒指定的方法默認暴露給client）
?
<convert>元素
全部基本類型，boolean、 int 、double等等
包裝類，Boolean、Integer等等
java.lang.String
日期類型，如：java.util.Date 和 java.sql.Times、java.sql.Timestamp等
數組(存放以上類型的)
集合類型 (List、Set、Map、Iterator等等)
Bean轉換器
用于完畢JavaBean對象和JavaScript對象之間的轉換
?DWR默認關閉Bean轉換器
假設須要進行JavaBean對象和JavaScript對象之間的轉換，須要在dwr.xml中顯式設置
?<convert converter="bean"match="www.dwrdemo.DwrBean"/>
為Webproject加入DWR支持，樣例：
創建web Project ：DWRDemo增加DWR jar包 ；
(要增加commons-logging.jar)
改動web.xml文件：加servlet
<servlet><servlet-name>dwr_invoker</servlet-name><servlet-class>org.directwebremoting.servlet.DwrServlet</servlet-class><init-param><!--初始化參數，debug開發時設置--><param-name>debug</param-name><param-value>true</param-value></init-param></servlet><servlet-mapping><servlet-name>dwr_invoker</servlet-name><url-pattern>/dwr/*</url-pattern></servlet-mapping>
創建dwr.xml文件 （參考
dwr30.dtd：/org/directwebremoting/dwr30.dtd
和dwr.xml：/org/directwebremoting/dwr.xml
寫）
?
與web.xml文件位于同一文件夾（能夠放在src下，可是須要要在web.xml配置的
?????? Servlet里面加
????? <init-param>
???????? <param-name>config</param-name>
???????? <param-value>/WEB-INF/classes/dwr.xml</param-value>
?? </init-param>?????
初始化的時候，會調用源代碼里面的相應方法
）<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting 3.0//EN""http://getahead.org/dwr/dwr30.dtd"> <dwr><allow><!-- 創建腳本對象 --><create creator="new" javascript="DwrDemoDate" scope="application" ><!-- 要公布的類名 --><param name="class" value="java.util.Date" /></create></allow> </dwr>
?部署，訪問：http://localhost:8080/DWRDemo/dwr?
?
Bean轉換器
用于完畢JavaBean對象和JavaScript對象之間的轉換
?DWR默認關閉Bean轉換器
假設須要進行JavaBean對象和JavaScript對象之間的轉換，須要在dwr.xml中顯式設置
?<convert converter="bean"match="www.dwrdemo.DwrBean"/>
以下舉例：
樣例 使用Bean轉換器
新建DwrService 在com包下，加入以下方法：public DwrBean getDwrBean(){
return new DwrBean();
}
DwrBean在com包下 加入私有屬性message和它get set方法；
Dwr.xml配置：在<allow>里面加入：
<create creator="new" javascript="DwrService" scope="application">
<!-- 要公布的類名 -->
<param name="class" value="com.DwrService" />
</create>
<convert converter="bean" match="com.DwrBean" />
重新啟動訪問 http://localhost:8080/DWRDemo/dwr 點擊第二個
樣例：使用DWR實現頁面載入時輸出當前的時間等
DWR 怎樣簡化Ajax 開發http://localhost:8080/DWRDemo/dwr/test/DwrDemoDate前面兩行script導入index，編寫js
index.jsp：
</head><!-- 導入DWR的JavaScript文件--> <script type='text/javascript' src='/DWRDemo/dwr/engine.js'></script><!-- 導入DWR為Java對象動態生成的JavaScript文件--> <script type='text/javascript' src='/DWRDemo/dwr/interface/DwrDemoDate.js'></script><script type="text/javascript">function init(){//調用Date對象的toString（）方法，load為回調函數DwrDemoDate.toString(load); }function load(data){document.getElementById("time").innerHTML = data;}</script><body><input id="" type="button" οnclick="init()" value="show" /><dir id="time"></dir></body>
?重新啟動tomcat訪問主頁；http://localhost:8080/DWRDemo/
點擊show，以下顯示出當前時間；
樣例：在頁面輸出client輸入的信息?
在DwrService加入方法：public DwrBean getDwrBean(String message) {
DwrBean db = new DwrBean();
db.setMessage(message);
return db;
}
將public DwrBean getDwrBean()凝視；
在Index.jsp加入
http://localhost:8080/DWRDemo/dwr/test/DwrService前面script
<script type='text/javascript' src='/DWRDemo/dwr/interface/DwrService.js'></script>
?在js和body里面增加： function getMessage(){var msg=document.getElementById("myMsg").value; DwrService.getDwrBean(msg,showMsg);}function showMsg(bean){document.getElementById("message").innerHTML = bean.message;}<body><input id="myMsg"><input id="" type="button" οnclick="getMessage()" value=" showMsg" /><dir id="message"></dir></body> ?重新啟動tomcat，訪問主頁，輸入文字，點擊showMsg使用的是ajax技術；
我們能夠在DwrService里面的方法getDwrBean加入：
System.out.println(message);
重新啟動執行的時候，能夠看到控制臺輸出 我們輸入的信息，意味著我們能夠訪問數據庫等操作；
使用DWR框架能夠異步訪問服務端對象
腳本文件說明：
engine.js
1．engine.js對DWR很重要，它是DWRclient的核心，用來把動態生成的JavaScript對象轉換為server上的Java對象
該函數庫可用于設置一些DWR的全局屬性
???? dwr.engine.setTimeout(time)，以毫秒為單位設置請求超時的時間
????? dwr.engine.setHttpMethod(method)，該方法僅僅能設置兩個值POST和GET
????? dwr.engine.setOrdered(boolean)，Ajax通常都是異步調用，但server響應的順序與調用順序往往不同，使用dwr.engine.setOrfered(true)語句，DWR將保證請求的順序與server響應的順序一致
2．util.js
1.????????util.js文件里包括了一些工具函數，通過這些函數的幫助，將簡化JavaScript操作
2.????????util.js提供一些主要的頁面操作函數，通過這些函數能夠方便的操作HTML元素
3.????????util.js文件與DWR框架關系不是特別大，能夠在不論什么不同的網頁中使用（即便該project沒有DWR支持）
補充說明:
?$( )函數
$( )函數依據指定ID查找頁面中的HTML元素
簡單的講以下兩個一樣的意思：
$(ID)= document.getElementById(ID)
使用 $() 使代碼更簡潔、更清晰
在index.jsp導入：
?????? <script type='text/javascript' src='/DWRDemo/dwr/util.js'></script>
在js里面加入：
//$( )函數
? ??? function test(){
? ??????? var msg=$('message').innerHTML;
? ??????? alert(msg);
? ??? }
body加入；
?<input?id="test1"type="button"onclick="test()"value="使用$( )函數"/>
刷新頁面，要先在myMsg框輸入信息，在點擊showMsg，id為message才有內容，才干夠做上面的實驗，然后點擊使用$( )函數
?
getValue() 和setValue()函數?
getValue()函數和setValue()函數用于簡化訪問和改動HTML元素的值
dwr.util.getValue(id)：返回HTML元素的值
dwr.util.setVlaue(id，value [,options])：依據第一個參數中指定的id找到對應元素，并依據第二個參數value改變該元素的值
在index.jsp導入：
?????? <scripttype='text/javascript' src='/DWRDemo/dwr/util.js'></script>
在js加入：
????? //getValue() 和setValue()函數
????? function set(){
???????? var value=dwr.util.getValue('set');
???????? dwr.util.setValue('myMsg',value);
????? }
?在body加入：
<input?id="set"type="button"onclick="set()"value="getValue()得到的值"/>
刷新頁面，點擊getValue()得到的值后將信息顯示到id為myMsg的輸入框上；
?
列表操作函數
dwr.util.removeAllOption(id)：用于刪除列表中的全部項
dwr.util.addOptions()：用于加入列表項
?
?
?
表格操作函數
DWR提供兩個函數幫助我們操作表格
dwr.util.removeAllRows(id)：刪除table中全部行
dwr.util.addRows(id,array,cellFuncs,[options])：向表中加入數據行
?
源代碼和所用到的jar包下載：
http://pan.baidu.com/s/1i3p9pYX轉載于:https://www.cnblogs.com/mfrbuaa/p/3839715.html
總結
以上是生活随笔為你收集整理的Ajax框架,DWR介绍，应用，样例的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 自定义Dialog（图片，文字说明，单选
- 下一篇： UVA11624_Fire!