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="显示城市列表" onclick="showCity()"></body></html>

效果演示：