首页 > 代码库 > dwr使用步骤

dwr使用步骤

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

一:基本步骤:
    1.为工程添加jar包:dwr.jar   common-logging.jar
    如果本工程使用struts,则struts内置了common-logging.jar,不需要重复引入
    2.web.xml部分,添加dwr的servlet配置
        <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>
        </servlet>
        <servlet-mapping>
            <servlet-name>dwr-invoker</servlet-name>
            <url-pattern>/dwr/*</url-pattern>
        </servlet-mapping>
        注意:
            <init-param>
                <param-name>debug</param-name>
                <param-value>true</param-value>
            </init-param>
            该配置项是开启dwr控制台的开关,如果该项为false,则dwr控制台失效.
    3.在/WEB-INF下建立dwr.xml
        <?xml version="1.0" encoding="UTF-8"?>
        <!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting 2.0//EN" "http://getahead.ltd.uk/dwr/dwr20.dtd">
        <dwr>
            <allow>
                <create creator="new" javascript="test">
                    <param name="class" value="http://www.mamicode.com/test.TestDao" />
                </create>
                <!-- 如果需要实体类,则需要配置为如下  match:类路径 converter="bean":固定参数 -->
                <convert match="bean.*" converter="bean"></convert>
            </allow>
        </dwr>
        注意:creator="new" 代表本类的创建方式
        javascript="test" 代表本类在javascript中的名称
        name="class" 代表把某个类配置到dwr中 value="":代表类路径
    4.建立相关的类:
        package test;
        public class TestDao {
            public void hello(){
                System.out.println("Hello JavaScript . . .");
            }
            public void sayHello(String name){
                System.out.println("Hello " + name);
            }
            public int add(int a , int b){
                return a+b;
            }
        }
    5.把工程部署到tomcat中,通过下列地址测试dwr环境是否完成:
        http://ip:port/appName/dwr
        如果看到控制台,点击进入,测试方法是否可以正常运行
    6.在需要调用dwr相关资源的页面中,按照控制台的提示cope资源:
        <script type=‘text/javascript‘ src=http://www.mamicode.com/‘${pageContext.request.contextPath }/dwr/interface/test.js‘></script>
        <script type=‘text/javascript‘ src=http://www.mamicode.com/‘${pageContext.request.contextPath }/dwr/engine.js‘></script>
    7.调用dwr资源的脚本写法:
        dwr名称.方法名称(参数... ,{
            callback:function(返回值){
                处理返回的逻辑块
            }
        })
        例如:
            test.hello();
            test.sayHello("诡异小孩");
            test.add(10,10,{
                    callback:function(data){
                        alert(data);
                    }
                });
            test.add(10,10,callback);
            function callback(data){
                alert(data);
            }

二:基本应用:
    返回数据解析:
        1.简单对象:
            test.getTest({
                callback:function(data){
                        alert(data.id+":"+data.name+":"+data.age+":"+data.sex+":"+data.birthday);
                }
            });
        2.简单列表:
            test.queryForList({
                callback:function(data){
                    for(var i=0;i<data.length;i++){
                        alert(data[i]);
                    }
                }
            });
        3.对象列表:
        test.queryAll({
            callback:function(data){
                for(var i=0;i<data.length;i++){
                    alert(data[i].id+":"+data[i].name+":"+data[i].age+":"+data[i].sex+":"+data[i].birthday);
                }
            }
        });
        4.向后台传对象:
            var myObject={‘id‘:108,‘name‘:‘小

白‘,‘age‘:24,‘sex‘:‘女‘,‘birthday‘:‘1989-11-01‘};
            test.setObject(myObject);
           
    参数解析:
        preHook:交互结束之前执行
        callback:交互结束之后返回
        postHook:在返回结束之后执行
        timeout:设置响应超时时间
        errorHandler:设置异常捕获
        test.query({
                    callback:function(data){alert("处理返回"+data);},
                    preHook:function(){alert("返回之前...");},
                    timeout:4000,
                    errorHandler:function(msg){alert("如果响应时间超过timeout的值,则服务器超时...");}
                });