DWR3.0 如何应用的简单介绍（有实例）

DWR3. 0  dwr 返回值(数组,集合,Map)
示例代码如下：

首先导入项目所需要的包，如下：dwr.jar，commons-logging- 1.0 . 4 .jar，版本可以调整；

1 .web.xml
<?xml version= "1.0"  encoding= "UTF-8" ?>
<web-app xmlns= "http://java.sun.com/xml/ns/j2ee"  xmlns:xsi= "http://www.w3.org/2001/XMLSchema-instance"  version= "2.4"
xsi:schemaLocation= "http://java.sun.com/xml/ns/j2ee  http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd" >

<servlet>
   <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>
   <load-on-startup> 1 </load-on-startup>
</servlet>
<servlet-mapping>
   <servlet-name>dwr-invoker</servlet-name>
   <url-pattern>/dwr /*</url-pattern>
</servlet-mapping>

</web-app>

2.DWRTest.java
package com.micro;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

@SuppressWarnings("unchecked")
public class DWRTest {

/**
   * 第一个简单调用
   */
public  String getStr() {
    return  "第一个dwr示例，调用成功" ;
}

/**
   * 带传递参数的调用，返回String
   */
public  String getInfo(String name, int  age, String address) {
    return  "我的名字叫"  + name + ",现年"  + age + "岁,"  + "来自"  + address;
}

/**
   * 返回数组Array
   */
public  String[] getStrArray() {
    return  new  String[] { "one" , "two" , "three" , "go!"  };
}

/**
   * 返回集合List
   */
public  List getList() {
    List list = new  ArrayList();
    list.add( "welcome" );
    list.add( "to" );
    list.add( "BeiJing" );
    return  list;
}

/**
   * 返回Map类型
   */
public  Map getMap() {
    Map map = new  HashMap();
    map.put( "name" , "周星星" );
    map.put( "hobby" , "逃课" );
    return  map;
}

/**
   * 返回二维数组类型
   */
public  List getArrayList() {
    List list = new  ArrayList();
    list.add( new  String[] { "1" , "2" , "3"  });
    list.add( new  String[] { "one" , "two" , "three" , "four" , "five"  });
    return  list;
}

/**
   * Exception处理
   */
public  List getListTest(List list) {
    try  {
      list.get( 0 );
    } catch  (Exception e) {
      throw  new  NullPointerException( "数据位空" );
    }
    return  list;
}

}

3 .dwr.xml
<?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 javascript= "dwr"  creator= "new" >
    <param name= "class"  value= "com.micro.DWRTest"  />
   </create>

   <!-- 类型转换为JavaBean的处理 -->
   <create javascript= "dwrBean"  creator= "new"  scope= "request" >
    <param name= "class"  value= "com.micro.UserRs"  />
   </create>
   <convert match= "com.micro.User"  converter= "bean" >
    <param name= "include"  value= "name,pass"  />
   </convert>

   <!-- 异常Exception的处理 ,默认情况下dwr对异常的处理就是一个弹出框提示为Error-->
   <create javascript= "dwrException"  creator= "new" >
    <param name= "class"  value= "com.micro.DWRTest"  />
   </create>
   <convert match= "java.lang.NullPointerException"  converter= "exception"  />

</allow>

</dwr>

4 .mydwr.js
/**
* 无参数
*/
function invoke1(){
dwr.getStr(
   function(value){
    alert(value);
   }
);
}

/**
* 有参数
*/
function invoke2(){
dwr.getInfo( "长江七号" , 3 , "火星" ,
   function(value){
    alert(value);
   }
);
}

/**
* 返回数组
*/
function invoke3(){
dwr.getStrArray(
   function(array){
    var str= "" ;
    for (var i= 0 ;i<array.length;i++){
     str += array[i]+ " " ;
    }
    alert(str);
   }
);
}

/**
* 返回集合（集合和数组的处理方式一样）
*/
function invoke4(){
dwr.getList(
   function(list){
    var str= "" ;
    for (var i= 0 ;i<list.length;i++){
     str += list[i];
    }
    alert(str);
   }
);
}
/**
* 返回Map
*/
function invoke5(){
dwr.getMap(

//有如下两种处理方式
   /*1)已知map的key*/
   function(map){
    alert( "姓名:" +map.name+ ",爱好:" +map.hobby);
   }
   /*2).遍历的方式
    function(map){
    for(var key in map){
     alert(key+":"+map[key]);
    }
   }*/
);
}

/**
* 返回数组的集合(二维数组)
*/
function invoke6(){
dwr.getArrayList(
   function(arrayList){
    var str= "" ;
    for (var i= 0 ;i<arrayList.length;i++){
     for (var j= 0 ;j<arrayList[i].length;j++){
      str += arrayList[i][j];
     }
     str+= "\n\r" ;
    }
    alert(str);
   }
);
}

/**
* 同步设置
*/
function invoke7(){
dwr.engine.setAsync( false ); //设置同步，那么后续的方法才能按照顺序执行
invoke1();
invoke2();
}

/**
* 批处理batch（按照先后顺序执行）
*/
function invoke8(){
dwr.engine.beginBatch();
invoke1();
invoke2();
dwr.engine.endBatch();
}

5 .index.jsp
<%@ page language= "java"  pageEncoding= "UTF-8" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" >
<html>
<head>
   <script type= 'text/javascript'  src= 'http://yangchao20020.blog.163.com/blog/dwr/engine.js' ></script>
   <script type= 'text/javascript'  src= 'http://yangchao20020.blog.163.com/blog/dwr/util.js' ></script>
   <script type= 'text/javascript'  src= 'http://yangchao20020.blog.163.com/blog/dwr/interface/dwr.js' ></script>
   <script type= "text/javascript"  src= "http://yangchao20020.blog.163.com/blog/mydwr.js" ></script>
</head>

<body>
   <input type= "button"  value= "DRW1"  onclick= "invoke1()"  />
   <br />
   <input type= "button"  value= "DRW2"  onclick= "invoke2()"  />
   <br />
   <input type= "button"  value= "DRW3"  onclick= "invoke3()"  />
   <br />
   <input type= "button"  value= "DRW4"  onclick= "invoke4()"  />
   <br />
   <input type= "button"  value= "DRW5"  onclick= "invoke5()"  />
   <br />
   <input type= "button"  value= "DRW6"  onclick= "invoke6()"  />
   <br />
   <input type= "button"  value= "DRW7"  onclick= "invoke7()"  />
   <br />
   <input type= "button"  value= "批处理测试"  onclick= "invoke8()"  />
</body>
</html>

上述，index.jsp页面就对上述各种dwr的返回类型和批处理(batch)做了处理，做了简单的测试，Ok，测试通过，下面再介绍几个页面，
对dwr其他功能的一些简单测试：

6 .异常处理：exception.jsp
<%@ page language= "java"  pageEncoding= "UTF-8" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" >
<html>
<head>
   <script type= 'text/javascript'  src= 'http://yangchao20020.blog.163.com/blog/dwr/engine.js' ></script>
   <script type= 'text/javascript'  src= 'http://yangchao20020.blog.163.com/blog/dwr/util.js' ></script>
   <script type= 'text/javascript'  src= 'http://yangchao20020.blog.163.com/blog/dwr/interface/dwrException.js' ></script>
   <script type= "text/javascript"  src= "http://yangchao20020.blog.163.com/blog/mydwr.js" ></script>

   <script type= "text/javascript" >
    function convert(){
     var list;
     dwrException.getListTest(list,
      {
       exceptionHandler:function(msg){
        alert(msg);
       },
       callback:function(data){
        alert(data);
       }
      }
     );
    }

   </script>
</head>

<body>
   <input type= "button"  value= "异常测试"  onclick= "convert()" />
</body>
</html>

7 .dwr.util.getValue()调用，dwrfunc.jsp
<%@ page language= "java"  pageEncoding= "UTF-8" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" >
<html>
<head>
   <script type= 'text/javascript'  src= 'http://yangchao20020.blog.163.com/blog/dwr/engine.js' ></script>
   <script type= 'text/javascript'  src= 'http://yangchao20020.blog.163.com/blog/dwr/util.js' ></script>
   <script type= 'text/javascript'  src= 'http://yangchao20020.blog.163.com/blog/dwr/interface/dwr.js' ></script>
   <script type= "text/javascript"  src= "http://yangchao20020.blog.163.com/blog/mydwr.js" ></script>
</head>

<body>
   <input type= "text"  name= "name"  id= "nameid"  />
   <br/>
   <input type= "button"  value= "EL通过id取值"  onclick= "alert(${'nameid'}.value)"  />
   <br />

   //如果要是有dwr.util提供的功能，必须引入dwr/util.js文件,dwr3之后，有写函数内写name或id都可以
   <br/>
   <input type= "button"  value= "dwr.util通过id"  onclick= "alert($('nameid').value)"  />
   <br />
   <input type= "button"  value= "dwr.util通过name"  onclick= "alert($('name').value)"  />
   <br />
   <input type= "button"  value= "dwr.util通过name/id"  onclick= "alert(dwr.util.getValue('name'))"  />
   <br />

</body>
</html>

8 .对JavaBean的传递和返回
User.java:
package  com.micro;

public  class  User {

private  String name;;
private  String pass;

//get/set方法....
}

UserRs.java:
package  com.micro;

public  class  UserRs {

public  User convertUser(User user) {
    user.setName( "admin" );
    user.setPass( "123456" );
    return  user;
}
}
bean.jsp:
<%@ page language= "java"  pageEncoding= "UTF-8" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" >
<html>
<head>
   <script type= 'text/javascript'  src= 'http://yangchao20020.blog.163.com/blog/dwr/engine.js' ></script>
   <script type= 'text/javascript'  src= 'http://yangchao20020.blog.163.com/blog/dwr/util.js' ></script>
   <script type= 'text/javascript'  src= 'http://yangchao20020.blog.163.com/blog/dwr/interface/dwrBean.js' ></script>
   <script type= "text/javascript"  src= "http://yangchao20020.blog.163.com/blog/mydwr.js" ></script>

   <script type= "text/javascript" >
    function convert(){
     var uname = $( "name" ).value;
     var upass = $( "pass" ).value;
     var obj = {name:uname,pass:upass};

     dwrBean.convertUser(obj,function(data){
      $( "uname" ).value = data.name;
      $( "upass" ).value = data.pass;
     });
    }

   </script>
</head>

<body>
   <input type= "text"  name= "name"  id= "uname"  value= "you name" /><br/>
   <input type= "text"  name= "pass"  id= "upass"  value= "your password" /><br/>
   <input type= "button"  value= "测试处理"  onclick= "convert()" />
</body>
</html>

这些，只是对dwr的简单应用，其中的配置都在dwr.xml中，大家可以举一反三，通常情况下，dwr和spring要结合使用，下面给出一个简单的配置说明：
比如：
<!-- 验证登陆名是否存在 -->
<create creator= "spring"  javascript= "loginServiceDWR"  scope= "request" >
   <param name= "beanName"  value= "coreLoginService"  />
   <include method= "checkLogin"  />
</create>
其中，creator= "spring" ，表明由spring来创建该对象，javascript= "loginServiceDWR" ，说明客户端的调用名称叫 "loginServiceDWR" ，<param name= "beanName"  value= "coreLoginService"  />指明了spring配置文件中，id为 "coreLoginService" 的这么一个bean，<include method= "checkLogin"  />，对外公开的方法是 "checkLogin"  ，调用过程同上述其他类型调用相同，不同就是配置而已。上述代码，仅供参考。

注意：引入dwr的js文件的顺序不能错了，如：

   <script type= 'text/javascript'  src= 'http://yangchao20020.blog.163.com/blog/dwr/engine.js' ></script>
   <script type= 'text/javascript'  src= 'http://yangchao20020.blog.163.com/blog/dwr/util.js' ></script>
   <script type= 'text/javascript'  src= 'http://yangchao20020.blog.163.com/blog/dwr/interface/dwrBean.js' ></script>

先引入dwr自身的，再引入自己的。