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+)
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>
<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.removeAllOption
s
(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","name","value");
}
</script>
</head>
<body>
城市：<select id="s1"></select>
<input type="button" value="显示城市列表" onclick="showCity()">
</body>
</html>
效果演示：