DWR介绍:
DWR本身是一个AJAX框架。
作用:
允许开发人员在客户端通过JavaScript代码调用服务器端的Java方法。
可以使用DWR中的util.js文件中包含了一些工具函数,通过这些函数的帮助,将简化JavaScript操作。
DWR框架主要由两部分组成:
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框架:
2.添加dwr.jar包到项目中:
将dwr.jar包放入到WEB-INF的lib文件夹下,并且这里也要把commons-logging.jar包夜放到其中,因为dwr依赖于commons-logging.jar这个包。
3.在 web.xml 中配置 DwrServlet:
<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文件位于同一目录
–其结构如下:
<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>
元素的属性:
<create>
元素的子元素:
还有,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+)
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
–
数组
(
存放以上类型的
)
–
集合类型
(List
、
Set
、
Map
、
Iterator
等等
)
•
Bean
转换器
–
用于完成
JavaBean
对象和
JavaScript
对象之间的转换
–
如果需要进行
JavaBean
对象和
JavaScript
对象之间的转换,需要在
dwr.xml
中显式设置
因为在上面的web.xml中有这段配置:
<init-param>
<param-name>debug</param-name>
<param-value>true</param-value>
</init-param>
<param-name>debug</param-name>
<param-value>true</param-value>
</init-param>
所以可以进入debug页面进行调试:
图片中圈出的就是:
在你的JavaScript使用这个类所需要的脚本。
最后介绍一下,
DWR中工具类中的两个重要的函数的使用:
列表操作函数:
表格操作函数:
DWR
提供两个函数帮助我们操作表格:
使用方法:
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","name","value"); } </script> </head> <body> 城市:<select id="s1"></select> <input type="button" value="显示城市列表" onclick="showCity()"> </body> </html>
效果演示: