初步认识DWR框架

来源：互联网发布：科学知乎编辑：程序博客网时间：2024/06/05 05:05

通过DWR框架，java开发者能够很方便的使用Ajax技术，使得java开发者在不熟悉使用Ajax进行异步数据交换的情况下能够顺利达到客户端跟服务端进行异步数据交换。

DWR（Direct Web Remoting）是一个用于改善web页面与Java类交互的远程服务器端Ajax开源框架，可以帮助开发人员开发包含AJAX技术的网站。它可以允许在浏览器里的代码使用运行在WEB服务器上的JAVA函数，就像它就在浏览器里一样。

它包含两个主要的部分:允许JavaScript从WEB服务器上一个遵循了AJAX原则的Servlet中获取数据.另外一方面一个JavaScript库可以帮助网站开发人员轻松地利用获取的数据来动态改变网页的内容.

DWR采取了一个类似AJAX的新方法来动态生成基于JAVA类的JavaScript代码。这样WEB开发人员就可以在JavaScript里使用Java代码，就像它们是浏览器的本地代码(客户端代码)一样；但是Java代码运行在WEB服务器端而且可以自由访问WEB 服务器的资源。出于安全的理由，WEB开发者必须适当地配置哪些Java类可以安全的被外部使用。[1]

这个从JAVA到JavaScript的远程功能方法给DWR的用户带来非常像传统的RPC机制,就像RMI或者SOAP一样,而且拥有运行在WEB上但是不需要浏览器插件的好处.

DWR不认为浏览器/WEB服务器协议是重要的,而更乐于保证编程界面的简单自然.对此最大的挑战就是把AJAX的异步特性和正常JAVA方法调用的同步特性相结合.在异步模式下,结果数据在开始调用之后的一段时间之后才可以被异步访问获取到.DWR允许WEB开发人员传递一个回调函数,来异步处理Java函数调用过程.

下面的例子是一个入门上手的简单例子。例子的项目名为 test，使用myeclipse8.5，数据库为mysql5.0，dwr为2.0开发。项目所需的包名:mysql-connector-java-5.0.8-bin.jar连接mysql数据库用的驱动包)，dwr.jar（dwr框架包），commons-logging-1.0.4.jar（dwr框架所需的日志包），使用dwr框架，其中dwr.ar，commons-logging-1.0.4.jar两个包缺一不可。文章首先把项目的代码全部贴出，代码的具体用处和说明在文章第二节会说明。

第一节

第一步：新建一个名为test的web项目工程。

第二步：编写连接数据库的Conn类。示例项目中所有的java类都是放在com.joyun.test包中。

[java] view plaincopy
<span style="font-size:14px;">package com.joyun.test;  
  
import java.sql.Connection;  
import java.sql.DriverManager;  
import java.sql.PreparedStatement;  
import java.sql.ResultSet;  
  
public class Conn {  
      
    public Connection connDB() throws Exception{  
        //1、注册驱动  
        Class.forName("com.mysql.jdbc.Driver");  
        String url = "jdbc:mysql://localhost:3306/joyunblog";  
        //2、加载驱动  
        Connection conn=DriverManager.getConnection(url, "root", "admin");  
        return conn;  
          
    }  
      
}  
</span>  

第三步：编写一个User类。

[java] view plaincopy
<span style="font-size:14px;">package com.joyun.test;  
  
public class User {  
      
    private String name = null;  
    private String password = null;  
      
    public String getName() {  
        return name;  
    }  
    public String getPassword() {  
        return password;  
    }  
    public void setName(String name) {  
        this.name = name;  
    }  
    public void setPassword(String password) {  
        this.password = password;  
    }  
      
  
}</span>  

第四步：编写UserDao类。

[java] view plaincopy
<span style="font-size:14px;">package com.joyun.test;  
  
import java.sql.Connection;  
import java.sql.PreparedStatement;  
import java.sql.SQLException;  
  
public class UserDao {  
      
    public boolean save(User user){  
        boolean b = false;  
        String name = user.getName();  
        String password = user.getPassword();  
        Connection conn = null;  
        try {  
            try {  
                conn = new Conn().connDB();  
            } catch (Exception e) {  
                // TODO Auto-generated catch block  
                e.printStackTrace();  
            }     
            String sql = "insert into myself(myname,mypassword,createtime,updatetime)" +  
                "values(+"+name+","+password+",now(),now())";     
            PreparedStatement ps = conn.prepareStatement(sql);  
            int i = ps.executeUpdate();  
            if(i==1){  
                b = true;  
            }  
              
        }catch (SQLException e) {  
            // TODO Auto-generated catch block  
            e.printStackTrace();  
        }  
        return b;  
    }  
}  
</span>  

第五步：编写UserJs类。

[java] view plaincopy
<span style="font-size:14px;">package com.joyun.test;  
  
public class UserJs {  
    UserDao userDao = new UserDao();  
      
    public boolean save(User user){  
        return userDao.save(user);  
    }  
  
}</span>  

第六步：编写jsp页面。该页面为index.jsp页面，代码如下：

[html] view plaincopy
<span style="font-size:14px;"><%@ page language="java" import="java.util.*" pageEncoding="gbk"%>  
<%@ page contentType="text/html; charset=gb2312" %>   
<%  
String path = request.getContextPath();  
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";  
request.setCharacterEncoding("gb2312");  
%>  
  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
<html>  
  <head>  
    <base href="<%=basePath%>">  
      
    <title>My JSP 'index.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 src="<%=basePath%>dwr/engine.js"></script>  
    <script src="<%=basePath%>dwr/util.js"></script>  
    <script src="<%=basePath%>dwr/interface/UserJs.js"></script>  
      
    <script type="text/javascript">  
    function OnSave(){  
        var user = {};  
        user.name = regForm.name.value;  
        user.password = regForm.password.value;  
        UserJs.save(user, saveFun);   
        }  
    function saveFun(data){  
        if(data){  
            alert("注册成功!");  
            }  
        else{  
            alert("注册失败!");  
            }  
        }  
    </script>  
  </head>  
  <body>   
     <form name="regForm">              
            口  令：<input type="password" name="password"><br>  
            姓  名：<input type="text" name="name"><br>  
            <input type="button" name="submitBtn" value="提交" onclick="OnSave()"><br>  
      </form>  
 </body>  
</html>  
</span>  

第七步：在WEB-INF文件下新建一个dwr.xml文件，该文件与web.xml同一目录。dwr.xml文件代码如下：

[html] view plaincopy
<span style="font-size:14px;"><?xml version="1.0" encoding="UTF-8"?>  
<!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting 2.0//EN"   
"http://www.getahead.ltd.uk/dwr/dwr20.dtd">  
<dwr>  
  <allow>  
    <create creator="new" javascript="UserJs">  
        <param name="class" value="com.joyun.test.UserJs"/>  
    </create>  
    <convert converter="bean" match="com.joyun.test.User"/>  
  </allow>  
</dwr>  
  
</span>  

第八步：编写web.xml。

[html] view plaincopy
<span style="font-size:14px;"><?xml version="1.0" encoding="UTF-8"?>  
<web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee"  
 xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee   http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">  
   
    <servlet>  
        <servlet-name>dwr-invoker</servlet-name>  
        <display-name>DWR Servlet</display-name>  
        <description>Direct Web Remoter Servlet</description>  
        <servlet-class>uk.ltd.getahead.dwr.DWRServlet</servlet-class>  
        <init-param>  
          <param-name>debug</param-name>  
          <param-value>true</param-value>  
        </init-param>  
        <init-param>  
          <param-name>scriptCompressed</param-name>  
          <param-value>false</param-value>  
        </init-param>  
        <load-on-startup>1</load-on-startup>  
     </servlet>  
        
    <servlet-mapping>  
        <servlet-name>dwr-invoker</servlet-name>  
        <url-pattern>/dwr/*</url-pattern>  
    </servlet-mapping>  
      
       
    <welcome-file-list>  
        <welcome-file>index.jsp</welcome-file>  
    </welcome-file-list>  
    <login-config>  
        <auth-method>BASIC</auth-method>  
    </login-config>  
      
</web-app>  
</span>  

第九步：发布项目。

第二节

项目说明我们从后面的步骤往前面讲。

第一步：web.xml配置文件的说明。

[html] view plaincopy
<span style="font-size:14px;"><servlet>  
        <servlet-name>dwr-invoker</servlet-name>  
        <display-name>DWR Servlet</display-name>  
        <description>Direct Web Remoter Servlet</description>  
        <servlet-class>uk.ltd.getahead.dwr.DWRServlet</servlet-class>  
        <init-param>  
          <param-name>debug</param-name>  
          <param-value>true</param-value>  
        </init-param>  
        <init-param>  
          <param-name>scriptCompressed</param-name>  
          <param-value>false</param-value>  
        </init-param>  
        <load-on-startup>1</load-on-startup>  
     </servlet>  
        
    <servlet-mapping>  
        <servlet-name>dwr-invoker</servlet-name>  
        <url-pattern>/dwr/*</url-pattern>  
    </servlet-mapping></span>  

我们通过servelet对dwr的请求拦截。<servlet-class>uk.ltd.getahead.dwr.DWRServlet</servlet-class>，其实这个类我们也可以用org.directwebremoting.servlet.DwrServlet代替。如果我们设置了debug为true的话，我们通过http://ip:port/webapp/dwr/index.html访问调试信息，如本项目中，我们这样访问：http://localhost:8080/test/dwr/index.html。

第二步：dwr.xml配置文件的说明。

dwr.xml文件的结构如下：

[html] view plaincopy
<!DOCTYPE dwr PUBLIC  
    "-//GetAhead Limited//DTD Direct Web Remoting 3.0//EN"  
    "http://directwebremoting.org/schema/dwr30.dtd">  
  
<dwr>  
  
  <!-- init is only needed if you are extending DWR -->  
  <init>  
    <creator id="..." class="..."/>  
    <converter id="..." class="..."/>  
  </init>  
  
  <!-- without allow, DWR isn't allowed to do anything -->  
  <allow>  
    <filter class="..."/>  
    <create creator="..." javascript="..."/>  
    <convert converter="..." match="..."/>  
  </allow>  
  
  <!-- you may need to tell DWR about method signatures -->  
  <signatures>  
    ...  
  </signatures>  
  
</dwr>  

该文件中必须要有allow标签，否则dwr就不会接受从jsp页面传来的方法调用了。该文件的具体用法请参考dwr官网说明文档。

本项目中该文件的allow标签如下：

[html] view plaincopy
<allow>  
<create creator="new" javascript="UserJs">  
        <param name="class" value="com.joyun.test.UserJs"/>  
   </create>  
<convert converter="bean" match="com.joyun.test.User"/>  
 </allow>  

其中creator="new"，说明用户每次访问该页面时都会创建一个新的实例。UserJs就是我们供前台页面调用的java类，该java类中有个save的方法。converter是类型转换，因为我们后台UserJS类的save方法参数是一个User对象。match就是要匹配转换的的User类的路径，即包名+类名。

第三步：index.jsp页面中，请注意js脚本。

[javascript] view plaincopy
<span style="font-size:14px;"><script type="text/javascript">  
    function OnSave(){  
        var user = {};  
        user.name = regForm.name.value;  
        user.password = regForm.password.value;  
        UserJs.save(user, saveFun);   
        }  
    function saveFun(data){  
        if(data){  
            alert("注册成功!");  
            }  
        else{  
            alert("注册失败!");  
            }  
        }  
</script></span>  

当用户在该页面点击<input type="button" name="submitBtn" value="提交" onclick="OnSave()"> 提交会触发OnSave脚本方法，

在脚本OnSave方法中我们生命了一个user对象，该对象有name和password两个属性，这两个属性的值是用户在输入框输入的值。OnSave方法中调用后台UserJs类的save方法进行保存，这里的save方法命名是有两个参数，而后台UserJs类的save只有一个user对象作为参数啊。其实这里就是dwr框架的使用了。dwr框架通过方法回传的这一解决办法类实现异步数据的交换。即在脚本中调用UserJs.save(user, saveFun);方法时，首先是到拦截器重，即我们再web.xml中配置的拦截器，经过拦截器处理后，通过回传的这种形式返回服务端的处理结果，而data就是服务端UserJs类的save方法的返回值。ps：本人水平有限，在这里讲的不是很明白，大家多多包涵或者自己到百度查阅更详细的资料。其实简单来讲js脚本中跟后台java类的交互中间还会通过dwr拦截，dwr拦截器会对其进行处理让服务端跟客户端进行数据交互，这就是为什么java程序员可以在不很了解设置不了解Ajax的情况下使用dwr框架能够进行异步数据交换，因为这部分的工作已经被dwr框架取代了。
另外在index.jsp中：

这三个脚本的引入，其中前两个脚本是必须要引入的，后面的脚本是对应我们的java类，其中UserJs.js是我们再dwr.xml配置文件<create creator="new" javascript="UserJs"> javascript中对应的值，

第四步：UserJs类

该类就是供脚本js调用的类。

==========================================================================================

后记：在实际工作中，dwr框架通常都是跟ssh框架结合起来使用的！

更多dwr参考文档请访问：http://directwebremoting.org/dwr/documentation/index.html

0 0