初始dwr

最新推荐文章于 2017-12-06 11:04:36 发布

原创最新推荐文章于 2017-12-06 11:04:36 发布 · 352 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#dwr

dwr 专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍了一个使用DWR框架实现的示例项目。包括web.xml配置、dwr.xml配置、Java类编写、JavaScript调用及HTML页面展示等内容。通过具体步骤展示了如何搭建DWR环境并实现前后端交互。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

交易系统中有用到dwr,我们今天来看下。

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

DWR框架主要包括如下两个部分。

1) 客户端有JavaScipt，这部分代码使客户端JavaScript可以直接调用远程服务器的Java方法。除此之外，DWR还提供了一些方便的工具函数来简化DOM操作。

2) 服务器上运行的Servlet负责处理用户请求，并将用户请求委托到实际Java对象进行处理，并负责把处理结果返回客户端。

基本原理是：当开发者直接调用远程Java方法时，DWR会负责将这种调用转换成对应的Ajax请求，并使用XMLHttpRequest将请求发送到远程服务端。当服务器处理完成后，DWR负责数据的传递和转换。

---------------------------------------------------以下练习来自网友案例感谢，侵删。-------------------------------------------------------

1.web.xml配置

成功安装DWR需要先修改web.xml文件，修改web.xml文件能保证特定请求被转发DWR的核心Servlet处理，而dwr.xml文件则负责定义Java类和JavaScript对象之间的对应关系。

[html]view plaincopy 
   
 <?xml version="1.0" encoding="GBK"?>  
 <web-app 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" version="2.5">  
     <!-- 配置DWR的核心Servlet -->  
     <servlet>  
         <!-- 指定DWR核心Servlet的名字 -->  
         <servlet-name>dwr-invoker</servlet-name>  
         <!-- 指定DWR核心Servlet的实现类 -->  
         <servlet-class>org.directwebremoting.servlet.DwrServlet</servlet-class>  
         <!--  指定DWR核心Servlet处于调试状态 -->  
         <init-param>  
             <param-name>debug</param-name>  
             <param-value>true</param-value>  
         </init-param>  
     </servlet>  
     <!-- 指定核心Servlet的URL映射 -->  
     <servlet-mapping>  
         <servlet-name>dwr-invoker</servlet-name>  
         <!-- 指定核心Servlet映射的URL -->  
         <url-pattern>/leedwr/*</url-pattern>  
     </servlet-mapping>  
 </web-app>  

2.添加dwr.xml文件

1) 除此之外，还必须增加一个dwr.xml，该文件负责定义Java类和JavaScript对象之间对应关系。

[html]view plaincopy 
   
 <?xml version="1.0" encoding="GBK"?>  
 <!-- 指定DWR配置文件的DTD等信息 -->  
 <!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting 3.0//EN"  
     "http://getahead.org/dwr/dwr30.dtd">  
 <!-- DWR配置文件的根元素是dwr -->  
 <dwr>  
     <allow>  
         <!-- 使用new关键资创建一个Java实例  
             指定创建的JavaScript对象名为hello-->  
         <create creator="new" javascript="hello">  
             <!-- 使用class属性指定创建该Java实例的实现类 -->  
             <param name="class" value="com.owen.dwr.HelloDwr"/>  
         </create>  
         <!-- 对com.owen.dwr.domain.Person类使用Bean转换器 -->  
         <convert converter="bean" match="com.owen.dwr.domain.Person"/>  
         <!-- 对com.owen.dwr.domain.Cat使用Object转换器 -->  
         <convert converter="object" match="com.owen.dwr.domain.Cat">  
             <!-- 指定force="true"强制使用反射访问私有属性 -->  
             <param name="force" value="true"/>  
         </convert>  
     </allow>  
     <signatures>  
         <![CDATA[ 
         import java.util.List; 
         import com.owen.dwr.HelloDwr; 
         import com.owen.dwr.domain.Person; 
         HelloDwr.sendListNoGeneric(List<Person>); 
         ]]>  
     </signatures>  
 </dwr>  

2) dwr.xml文件说明

a) 在上面的配置文件，最重要的元素就是<allow…/>元素，如果一个dwr.xml文件没有定义<allow…/>元素，或者<allow…/>元素为空，则DWR将什么都干不了。<allow…/>元素里常用的元素是<create…/>和<conert…/>，其中<create…/>用于定义如何将一个Java类转换成一个JavaScript对象，而<convert…/>定义如何完成Java对象和JavaScript对象之间的转换。

b) DWR使用反射来确定Java实例和JavaScript对象之间的转换。在时候，参数类型信息并不十分明确，或者参数是一个集合对象，而且没有使用泛型来限制集合元素的类型，这就需要在dwr.xml文件的<signatures…/>元素中明确指定这些类型。

3.创建对应的类

在dwr.xml的文件中，我们添加了几个类，所以这个时候，我们需要提供这些类。

1) Cat.java

[java]view plaincopy 
   
  /** 
  *实体Cat 
  * @author OwenWilliam 2016-5-8 
  * @version 1.0 
  */  
 public class Cat  
 {  
     //Cat类的私有属性  
     private String name;  
     //构造器  
     public Cat(String name)  
     {  
         this.name = name;  
     }  
 }  

2) Person.java

[java]view plaincopy 
   
 package com.owen.dwr.domain;  
   
 /** 
  *实体Person 
  * @author OwenWilliam 2016-5-8 
  * @version 1.0 
  */  
 public class Person  
 {  
     // 私有Field  
     private String name;  
     // 无参数的构造器  
     public Person() {}  
     // 初始化全部成员变量的构造器  
     public Person(String name)  
     {  
         this.name = name;  
     }  
   
     // name的setter和getter方法  
     public void setName(String name)  
     {  
         this.name = name;  
     }  
     public String getName()  
     {  
         return this.name;  
     }  
 }  

3) HelloDwr.java

[java]view plaincopy 
   
  package com.owen.dwr;  
   
 import java.util.*;  
   
 import com.owen.dwr.domain.*;  
   
 /** 
   
  * @author OwenWilliam 2016-5-8 
  * @version 1.0 
  */  
 public class HelloDwr  
 {  
     // 第一个简单的hello方法  
     public String hello(String name)  
     {  
         return name + "，您好！您已经开始了DWR的学习之旅，祝您学得开心...";  
     }  
     // 使用一个JavaBean作为参数的方法  
     public String sendObj(Person p )  
     {  
         return p.getName() + "，您好！您已经学会了使用JavaBean参数...";  
     }  
     // 返回JavaBean实例的方法  
     public Person getBean (String name)  
     {  
         return new Person(name);  
     }  
     // 返回一个普通的Java对象，Cat对象为其属性提供setter和getter方法  
     public Cat getObject(String name)  
     {  
         return new Cat("服务器端" + name);  
     }  
     // 返回一个集合对象  
     public List<Person> getPersonList()  
     {  
         List<Person> result = new ArrayList<Person>();  
         result.add(new Person("集合aaaa"));  
         result.add(new Person("集合bbbb"));  
         result.add(new Person("集合cccc"));  
         return result;  
     }  
     // 返回一个数组对象  
     public Person[] getPersonArray()  
     {  
         Person[] result = new Person[3];  
         result[0] = new Person("数组aaaa");  
         result[1] = new Person("数组bbbb");  
         result[2] = new Person("数组cccc");  
         return result;  
     }  
     // 返回一个Map对象  
     public Map<String, Person> getPersonMap()  
     {  
         // 创建一个Map对象  
         Map<String, Person> result = new HashMap<String, Person>();  
         // 填充Map对象的内容  
         result.put("first" , new Person("Map aaaa"));  
         result.put("second" , new Person("Map bbb"));  
         result.put("third" , new Person("Map cccc"));  
         // 返回Map  
         return result;  
     }  
     // 远程方法的参数是集合  
     public String sendList(List<Person> pl)  
     {  
         String result = "";  
         for (Person p : pl)  
         {  
             result += p.getName() + "<br />";  
         }  
         return result;  
     }  
     // 远程方法的参数是不带泛型的集合  
     public String sendListNoGeneric(List pl)  
     {  
         String result = "";  
         for (Object p : pl)  
         {  
             result += ((Person)p).getName() + "<br />";  
         }  
         return result;  
     }  
   
     // 远程方法的参数是集合  
     public String sendMap(Map<String , Person> pmap)  
     {  
         String result = "";  
         for (String key : pmap.keySet())  
         {  
             result += "键" + key + " 其值为：" +  
                 pmap.get(key).getName() + "<br />";  
         }  
         return result;  
     }  
 }  

4.创建JS文件

创建个js文件名字叫hellodwr.js,这个文件可以直接调用java类中的方法。像hello.hello(name, cb)调用就是直接调用。

[javascript]view plaincopy 
   
 // -------------发送简单字符串参数，返回普通字符串--------------  
 function sendMessage()  
 {  
     // 获取页面中name元素的值  
     var name = document.getElementById("name").value;  
     // 调用远程方法，cb是回调函数  
     hello.hello(name , cb)  
 }  
 function cb(data)  
 {  
     document.getElementById("show").innerHTML = data;  
 }  
 // -----------发送一个JavaBean对象作为参数，返回普通字符串------------  
 function sendObject()  
 {  
     var nameValue = document.getElementById("name").value;  
     // 调用远程方法，使用JavaScript对象作为参数  
     hello.sendObj({name:nameValue} , cb);  
 }  
   
 // ----------------调用返回JavaBean方法-----------------  
 function getBean()  
 {  
     var name = document.getElementById("name").value;  
     // 调用远程方法，beanCb是回调函数  
     hello.getBean(name , beanCb)  
 }  
 function beanCb(data)  
 {  
     // 服务器方法返回JavaBean对象，客户端的data是JavaScript对象  
     document.getElementById("show").innerHTML =   
         data.name + "，您好，您已经学会了使用JavaBean返回值";  
 }  
 // ----------------调用返回getObject方法---------------  
 function getObject()  
 {  
     var name = document.getElementById("name").value;  
     // 调用远程方法，objCb是回调函数  
     hello.getObject(name , objCb)  
 }  
 function objCb(data)  
 {  
     // 服务器方法返回非JavaBean式的对象，客户端的data是JavaScript对象  
     document.getElementById("show").innerHTML =   
         data.name + "，是从服务器返回的猫的名字";  
 }  
 // ---------------调用返回集合的方法--------------  
 function getBeanList()  
 {  
     // 调用远程方法，listCb返回回调函数  
     hello.getPersonList(listCb);  
 }  
 // 远程Java方法返回List对象，集合元素是JavaBean式的对象  
 // 此处的data是JavaScript对象数组  
 function listCb(data)  
 {  
     var result='';  
     // 遍历每个数组元素  
     for (var i = 0 ; i < data.length ; i ++)  
     {  
         result += data[i].name + "<br />";  
     }  
     document.getElementById("show").innerHTML = result;  
 }  
 // ---------------调用返回数组的方法--------------  
 function getBeanArray()  
 {  
     hello.getPersonArray(arrayCb);  
 }  
 function arrayCb(data)  
 {  
     var result = "";  
     // 下面的data是远程Java方法的返回值，  
     // data是个数组，遍历数组。  
     for (var i = 0 ; i < data.length ; i ++)  
     {  
         //依次访问数组元素，数组元素是JSON格式的对象，访问其name属性  
         result += data[i].name + "<br />";  
     }  
     document.getElementById("show").innerHTML = result;  
 }  
 // ---------------调用返回Map对象的方法-------------  
 function getBeanMap()  
 {  
     hello.getPersonMap(mapCb);  
 }  
 // 远程Java方法返回Map对象，集合元素是JavaBean式的对象  
 // 此处的data是JavaScript对象，且每个属性值都是JavaScript对象  
 function mapCb(data)  
 {  
     var result='';  
     for (var key in data)  
     {  
         result += "键为" + key + ",其值为:" + data[key].name + "<br />";  
     }  
     document.getElementById("show").innerHTML = result;  
 }  
   
 // ---------------调用发送集合的方法-------------------  
 function sendBeanList()  
 {  
     // 创建JavaScript数组  
     var args = [  
         {name:"客户端aaa"},  
         {name:"客户端bbb"},  
         {name:"客户端ccc"}  
     ];  
     // Java方法需要List参数，以JavaScript数组作为参数调用远程方法  
     hello.sendList(args , sendListCb);  
 }  
 function sendListCb(data)  
 {  
     document.getElementById("show").innerHTML = data;  
 }  
 // ---------------调用发送无泛型限制的集合--------------------  
 function sendBeanListNoGeneric()  
 {  
     // 创建JavaScript数组  
     var args = [  
         {name:"客户端aaa"},  
         {name:"客户端bbb"},  
         {name:"客户端ccc"}  
     ];  
     // Java方法需要List参数，以JavaScript数组作为参数调用远程方法  
     hello.sendListNoGeneric(args , sendListCb);  
 }  
 // ---------------调用发送Map的方法-------------------------  
 function sendBeanMap()  
 {  
     // 创建JavaScript对象  
     var args = {  
         first:{name:"客户端aaa"},  
         second:{name:"客户端bbb"},  
         third:{name:"客户端ccc"}  
     };  
     // Java方法需要Map参数，以JavaScript对象作为参数调用远程方法  
     hello.sendMap(args , sendMapCb);  
 }  
 function sendMapCb(data)  
 {  
     document.getElementById("show").innerHTML = data;  
 }  

5.创建前端html的文件

html的文件就是要调用hellodwr.js中的方法。

[html]view plaincopy 
   
 <!DOCTYPE html>  
 <html>  
 <head>  
     <meta name="author" content="OwenWilliam" />  
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
     <title> DWR入门 </title>  
     <!-- 导入DWR引擎的核心JavaScript代码库 -->  
     <script type='text/javascript' src='leedwr/engine.js'></script>  
     <!-- 导入开发者为本应用编写的JavaScript代码库 -->  
     <script type='text/javascript' src='hellodwr.js'></script>  
     <!-- 导入DWR为hello对象动态生成的JavaScript代码库 -->  
     <script type='text/javascript' src='leedwr/interface/hello.js'>  
     </script>  
 </head>  
 <body>  
 <h3>DWR入门</h3>  
 请输入您的名字<input id="name" name="name" type="text"/><br />  
 <input type="button" value="发送简单请求" onclick="sendMessage();"/>  
 <input type="button" value="发送对象参数" onclick="sendObject();"/>  
 <input type="button" value="返回JavaBean" onclick="getBean();"/><br />  
 <input type="button" value="返回Object" onclick="getObject();"/>  
 <input type="button" value="返回Bean集合" onclick="getBeanList();"/>  
 <input type="button" value="返回Bean数组" onclick="getBeanArray();"/><br />  
 <input type="button" value="返回Bean Map" onclick="getBeanMap();"/>  
 <input type="button" value="发送Bean集合" onclick="sendBeanList();"/>  
 <input type="button" value="发送不带泛型限制的Bean集合"  
     onclick="sendBeanListNoGeneric();"/><br />  
 <input type="button" value="发送Bean Map" onclick="sendBeanMap();"/>  
 <hr />  
 下面是服务器的回应:<br />  
 <div id= "show"></div>  
 </body>  
 </html>  