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.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",array,"name","value");
	}
</script>

</head>
<body>
	城市：<select id="s1"></select>
	<input type="button" value="显示城市列表" onclick="showCity()">
</body>
</html>

效果演示：