當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
DWR的使用以及DWR中工具JS文件的使用
生活随笔
收集整理的這篇文章主要介紹了
DWR的使用以及DWR中工具JS文件的使用
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
DWR介紹：
DWR本身是一個AJAX框架。
作用：
允許開發人員在客戶端通過JavaScript代碼調用服務器端的Java方法。
可以使用DWR中的util.js文件中包含了一些工具函數，通過這些函數的幫助，將簡化JavaScript操作。
DWR框架主要由兩部分組成： 1.客戶端JavaScript代碼直接調用服務器端Java方法. 2.服務器上運行的DWR核心Servlet負責處理客戶端請求，將客戶端請求委托到實際的Java對象進行處理，并將結果返回給客戶端.
DWR的使用步驟： ? ?1. 添加 dwr.jar 包到項目中
? ?2. 在 web.xml 中配置 DwrServlet
? ?3. 與 web.xml 同級目錄下創建 dwr.xml 配置文件
? ?4. 在頁面中引用 JS 文件 ，實現與服務器交互（?DWR 框架中如果返回的是自定義類型，則需要作類型轉換
? ? <convert match="返回類的完整路徑" converter="bean"></convert>）
DWR使用：
好了，下面對于DWR的使用來具體說明一下： 1.下載DWR框架： DWR的官方站點： http://directwebremoting.org/dwr/downloads/index.html 各下載項說明： JAR File：該選項僅下載dwr.jar文件 WAR File：該選項下載dwr.jar文件及其其他依賴的類庫，還包括DWR的使用范例 Sources：該選項下載DWR的源文件
2.添加dwr.jar包到項目中： 將dwr.jar包放入到WEB-INF的lib文件夾下，并且這里也要把commons-logging.jar包夜放到其中，因為dwr依賴于commons-logging.jar這個包。 3.在 web.xml 中配置 DwrServlet： 修改web.xml文件，添加如下代碼： <strong><servlet-name>dwr_invoker</servlet-name> <servlet-class>org.directwebremoting.servlet.DwrServlet </servlet-class><init-param><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></strong>
?3. 與 web.xml 同級目錄下創建 dwr.xml 配置文件:
創建dwr.xml文件: –與web.xml文件位于同一目錄 –該文件用于定義Java類和JavaScript之間的對應關系，將Java類的方法暴露給客戶端 –其結構如下： <span style="font-size:10px;"><?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting 2.0//EN""http://getahead.org/dwr/dwr20.dtd"> <dwr><allow><create creator="..." javascript="..." scope="..."><param name="..." value="..."/><include method="…"/><exclude method="…"/></create><convert converter="..." match="..."/></allow> </dwr></span> eg: <dwr><allow><create creator="new" javascript="jDate"><param name="class" value="java.util.Date"></param><include method="toLocaleString"/></create><create creator="new" javascript="jMybean"><param name="class" value="com.huaxin.test.TestMyBean"></param></create><convert match="com.huaxin.bean.MyBean" converter="bean"></convert></allow></dwr>
?<allow>元素：定義了DWR能夠創建和轉換的類，是dwr.xml中最重要的元素 ?<create>元素：創建器定義如何將一個Java類轉換成JavaScript對象 ?<convert>元素：類型轉換器，用于定義Java類型和JavaScript類型之間的對應關系
<create>元素的屬性： –creator屬性：DWR內置多個創建器用于處理多種類型Java類 –javascript屬性：在客戶端給創建的JavaScript對象命名。該名字將在頁面里作為js被導入 <create>元素的子元素： –<param>元素：用來指定創建器的參數。其中name屬性用來指定參數名稱，value指定參數的值 –<include>元素：定義允許訪問的方法列表 –<exclude>元素：定義不允許訪問的方法列表，其中method屬性指定不被暴露給客戶端的方法
還有，creator和javascript是必須屬性，其他可以忽略。creator包含有以下幾個值：
new：Java用“new”關鍵字創造對象
none：它不創建對象 ?(v1.1+)
scripted：通過BSF使用腳本語言創建對象，例如BeanShell或Groovy
spring：通過Spring框架訪問Bean
struts：使用Struts的FormBean ?(v1.1+)
jsf：使用JSF的Bean ?(v1.1+)
pageflow：訪問Weblogic或Beehive的PageFlow ?(v1.1+)
ejb3：使用EJB3 session bean ?(v2.0+)
<convert>元素： ?DWR默認支持的類型有： –所有基本類型，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中顯式設置
?4. 在頁面中引用 JS 文件 ，實現與服務器交互：
可以通過這種方式獲得頁面中所需要的JS文件： 因為在上面的web.xml中有這段配置： <init-param>
? ? ? ? <param-name>debug</param-name>
? ? ? ? <param-value>true</param-value>
? ? </init-param> 所以可以進入debug頁面進行調試：
圖片中圈出的就是：在你的JavaScript使用這個類所需要的腳本。 將這段腳本copy到頁面文件中即可。然后就可以編寫具體的javascript代碼了。
最后介紹一下，DWR中工具類中的兩個重要的函數的使用：
util.js文件中包含了一些工具函數，通過這些函數的幫助，將簡化JavaScript操作 util.js提供一些基本的頁面操作函數，通過這些函數可以方便的操作HTML元素 util.js文件與DWR框架關系不是特別大，可以在任何不同的網頁中使用（即便該工程沒有DWR支持）
列表操作函數： –dwr.util.removeAllOptions(id)：用于刪除列表中的所有項 –dwr.util.addOptions()：用于添加列表項 表格操作函數： DWR提供兩個函數幫助我們操作表格： -dwr.util.removeAllRows(id)：刪除table中所有行 -dwr.util.addRows(id,array,cellFuncs,[options])：向表中添加數據行
使用方法：
1.首先，要在頁面文件中放入圖片中圈出來的腳本才能使用DWR的JS文件中的一些工具方法。 2.在頁面文件中的js標簽中使用具體的函數方法 eg: <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <%String path = request.getContextPath();String basePath = request.getScheme() + "://"+ request.getServerName() + ":" + request.getServerPort()+ path + "/"; %><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <base href="<%=basePath%>"><title>My JSP 'test.jsp' starting page</title><meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="This is my page"> <!--<link rel="stylesheet" type="text/css" href="styles.css">--> <script type='text/javascript' src='/DWRstudy/dwr/util.js'></script><script type="text/javascript">function showCity(){var array = [{name:'山東',value:'魯'},{name:'湖南',value:'湘'},{name:'北京',value:'京'}];dwr.util.removeAllOptions("s1");dwr.util.addOptions("s1",array,"name","value");} </script></head> <body>城市：<select id="s1"></select><input type="button" value="顯示城市列表" οnclick="showCity()"> </body> </html>
效果演示：
總結
以上是生活随笔為你收集整理的DWR的使用以及DWR中工具JS文件的使用的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Andriod中的两种自定义颜色选择器
- 下一篇： gradle idea java ssm