DWR入门

原创 2013年12月04日 09:45:12

DWR : direct web remoting
它允许java server和 JavaScript尽可能简单的相互调用

从DWR2.0开始就需要使用commons-logging包

DWR2.0与DWR3.0差别很大

engine.execute(,,,,callback);
一对{}在JS中就表示一个对象,因此JSON——{username:"huangbiao",id:1}就表示一个对象

javabean:可重用的组件
关于map循环
for(var data in map){
 alert(data + "?" + map[data]);
}

 

初级入门
1、和lib文件夹在同一路径级别下添加dwr.xml和web.xml相关的配置信息
2、在JSP页面中尽量按照如下顺序引入,因为大家都是这么弄的,而且JS是顺序加载的,如果不按照这个顺序可能会引起其他问题(简单测试改换顺序是没有影响的),给编写代码中养成良好的习惯
<script type='text/javascript' src='dwr/interface/service.js'> </script>
<script type='text/javascript' src='dwr/engine.js'></script>
<script type='text/javascript' src='dwr/util.js'></script>
3、src='dwr/interface/service.js' 中的service就当作是服务器端需要处理的对象——前提是需要在dwr.xml文件中配置
4、dwr.xml配置信息如下
<allow>
 <create creator="new" javascript="service">
  <param name="class" value="hb.server.Test1"></param>
 </create>
</allow>
其中creator表示创建对象的方式是“new”一个新的对象,javascript="service"表示与页面对应的名称是service,因此在页面中需要与src='dwr/interface/service.js'对应,格式是固定的
里面的参数name="class"表示指明这个类的路径 value="hb.server.Test1"表示这个类的全路径
5、web.xml配置信息的描述

<servlet>
 <display-name>DWR Servlet</display-name>
 <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>
 上述描述方式实际上就是一个servlet,当路径为/dwr/*时就执行这个servlet,因为在JSP页面中在加载js页面的时候就会执行这个方法,例如:
<script type='text/javascript' src='dwr/util.js'></script>,文件中的src='dwr/util.js'与配置的servlet匹配,这样就会触发这个servlet效果
6、这样就能够准确的定位到具体是那个类的哪个方法处理这个请求,然后是否有返回值都能够一目了然
7、如果想深入的了解DWR的解析方式或者对对象、字符串、数组的解析方式可以查看engin.js的方法实现


DWR深入理解
一、JAVA对象与javascript的交互过程
1、服务器端返回一个对象
dwr.xml配置信息如下:

<allow>
 <create creator="new" javascript="returnHTMLData">
  <param name="class" value="hb.server.returnHTMLData"></param>
 </create>
 <convert converter="bean" match="hb.object.Person"></convert>
</allow>
 

告诉服务器hb.object.Person这个类作为javabean对象来处理
服务器端的server代码处理

public class returnHTMLData {
 public Person returnPerson(){
  Person person = new Person();
  person.setId(1);
  person.setPassword("huangbiao");
  person.setUsername("1234");
  return person;
 }
}
 
JSP页面的js代码

function invoke(){
 returnHTMLData.returnPerson(function(data){
  alert(data.id);
  alert(data.password);
  alert(data.username);
 });
}
 2、JS向服务器端发送一个对象

<allow>
 <create creator="new" javascript="getHTMLData">
  <param name="class" value="hb.server.GetHTMLData"></param>
 </create>
 <convert converter="bean" match="hb.object.Person"></convert>
</allow>
 
服务器端的server代码处理

public class GetHTMLData {
 public void printPerson(Person person){
  System.out.println(person.getId());
  System.out.println(person.getPassword());
  System.out.println(person.getUsername());
 }
}
 

JSP页面的js代码
 

function invoke(){
//把JSON组织的代码当作是一个对象传递给server
 var dataJson = {id:2,password:"123456",username:"huangbiao"};
 getHTMLData.printPerson(dataJson);
}
 
二、调用服务器端返回的容器——List、Set、Map
1、List和Set是一类处理方式,对应的都是数组
配置信息如下
<allow>
 <create creator="new" javascript="returnHTMLCollection">
  <param name="class" value="hb.server.returnListData"></param>
 </create>
 <convert converter="bean" match="hb.object.Person"></convert>
</allow>
服务器对应的JAVA代码
public class returnListData {
 public Collection getCollection(){
  Collection<Person> list = new ArrayList<Person>();                   
  for(int i = 0; i < 3; i++){                                     
   Person person = new Person();                           
   person.setId(i);                                        
   person.setPassword("password" + i);                     
   person.setUsername("username" + i);                     
   list.add(person);                                       
  }                                                               
  return list;                                                    
 }                                                                       
}
JSP页面的js代码
function invoke(){
 returnHTMLCollection.getCollection(function(data){
  for(var i = 0; i < 3; i++){
   alert(data[i].id);
  }
 });
}

 

数据内容

  data = [                    
       {                      
          username:"user1",   
          password:"password2"
       },                     
       {                      
          username:"user2",   
          password:" password2"
       }                      
   ]; 


2、使用Map对应的处理方式
配置信息
<allow>
 <create creator="new" javascript="returnMapData">
  <param name="class" value="hb.server.returnMapData"></param>
 </create>
 <convert converter="bean" match="hb.object.Person"></convert>
</allow>
服务器对应的JAVA代码
public class returnMapData {
 public Map getMapdata(){
  Map map = new HashMap<Integer, Person>();
  for(int i = 0; i < 3; i++){
   Person person = new Person();
   person.setId(i);
   person.setPassword("password" + i);
   person.setUsername("username" + i);   
   map.put(i, person);                                    
  }                                                              
  return map;                                                    
 }                                                                      
}                                                                              
JSP页面的js代码                                                    
function invoke(){                                                 
 /*                                                         
 returnMapData.getMapdata(function(data){                   
  for(var i = 0; i < 3; i++){                        
   alert(data[i].id);                         
  }                                                  
 });                                                        
 */                                                         
 returnMapData.getMapdata(function(data){                   
    for(var property in data){                       
     var bean = data[property];                           
     alert(bean.username);                                
     alert(bean.password);
    }
 });
}

 

data = {                    
    "key1":{                
        username:"user1",   
       password:"password2" 
    },                      
    "key2":{                
       username:"user2",    
       password:" password2"
    }                       
};

DWR3.0框架入门(1) —— 实现ajax

框架简介:DWR(Direct Web Remoting)      是一个用于改善web页面与Java类交互的远程服务器端Ajax开源框架,可以帮助开发人员开发包含AJAX技术的网站。它可以允许在...

DWR入门教程(代码要稍微调整一下才能用)

DWR(Direct Web Remoting)是一个WEB远程调用框架.利用这个框架可以让AJAX开发变得很简单.利用DWR可以在客户端利用JavaScript直接调用服务端的Java方法并返回...

DWR3.0框架入门(3) —— ScriptSession的维护及优化

1.ScriptSession使用中存在的问题      在上一节实现了服务器的推送功能,但是根据 ScriptSession的生命周期我们可以得出以下几点的问题: (1)Scri...

WEB远程调用框架-DWR入门介绍

DWR介绍DWR全称:Direct Web Remoting,直接Web远程调用。是JAVA EE领域中的一个ajax框架,通过使用该框架,可以更简单的开发出Ajax应用。相比于直接使用JS进行aja...

DWR入门教程之HelloWorld

说明:这本是林信良(良葛格)的专栏 的文章,但是受不了繁体字的折磨,改成中文了呵呵。   Java 开发人员与网页设计人员的桥梁 DWR… 呃!我懒得写简介了 … 直接来看看可以做什么吧! …  ...

一个简单的DWR入门例子

http://di201yao.iteye.com/blog/164095 什么是DWR?     DWR是一个Open Source的 java项目。DWR可以让JavaScript调用运行在...

DWR3.0框架入门(1) —— 实现ajax

框架简介:DWR(Direct Web Remoting)      是一个用于改善web页面与Java类交互的远程服务器端Ajax开源框架,可以帮助开发人员开发包含AJAX技术的网站。它可以允许在...

DWR入门教程

DWR(Direct Web Remoting)是一个WEB远程调用框架.利用这个框架可以让AJAX开发变得很简单.利用DWR可以在客户端利用JavaScript直接调用服务端的Java方法并返回值给...

DWR使用入门教程

1.    DWR简介 DWR(Direct Web Remoting)是一个Ajax的开源框架,用于改善web页面与Java类交互的远程服务器端的交互体验,可以帮助开发人员开发包含AJAX技术的网站...
  • aeaiesb
  • aeaiesb
  • 2014年10月23日 11:04
  • 357

DWR入门

DWR入门教程 DWR(Direct Web Remoting)是一个WEB远程调用框架.利用这个框架可以让AJAX开发变得很简单.利用DWR...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:DWR入门
举报原因:
原因补充:

(最多只允许输入30个字)