JSP学习笔记(九十五)：学习使用dwr

一、下载

我使用的版本是2.0.5，下载地址：http://directwebremoting.org/dwr/download

二、使用

1.把dwr.jar添加到项目中;

2.web.xml中添加如下内容：

  <servlet>
        <servlet-name>dwr-invoker</servlet-name>
        <display-name>DWR Servlet</display-name>
        <servlet-class>uk.ltd.getahead.dwr.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>

 

添加完上面的内容以后，访问 /dwr/文件夹里的内容就会通过dwr去解析了

3.web.xml 同文件夹下添加文件dwr.xml，文件内容为：

<!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting 2.0//EN" "http://getahead.org/dwr//dwr20.dtd">

<dwr>
    <allow>
        <create creator="new" javascript="Demo">
            <param name="class" value="com.test.web.dwr.Demo" />
        </create>
    </allow>
</dwr>

dwr.xml里面使用了类com.test.web.dwr.Demo，添加对应的类：

package com.test.web.dwr;

import org.directwebremoting.WebContext;
import org.directwebremoting.WebContextFactory;

public class Demo {
    public String d(String str)
    {
        return "hello, " + str;
    }
    
    public String c()
    {
        String html = "";
        try {
            WebContext wctx = WebContextFactory.get();
            html = wctx.forwardToString("/ab.htm");
        } catch (Exception e) {
        } 
        return html;
    }
}

 

dwr.xml和建立的类是做什么的呢，接着往下看，呆会讲解这些文件是如何被串起来的

4.在页面上使用dwr，我们建立一个html页面：

<script type='text/javascript' src='dwr/engine.js'></script>
<script type='text/javascript' src='dwr/util.js'></script>
<script type='text/javascript' src='dwr/interface/Demo.js'></script>
<script type="text/javascript">
    function handleGetData(str) {
        alert(str);
    }

    function update()
    {
        var name = dwr.util.getValue("demoName");
        Demo.d(name, handleGetData);
    }

    function forword()
    {
        Demo.c(function(data)
                {
            dwr.util.setValue("content",data,{escapeHtml:false});
                });
    }

    function show()
    {
        var code = dwr.util.getValue("code");
        Demo.e(code,function(data)
                {
            dwr.util.setValues(data);
                });
    }

</script>
<p>Name: <input type="text" id="demoName" /> <input value="Send"
    type="button" onclick="update();" /> <br />
Reply: <span id="demoReply"></span></p>

<input type="button" value="html" onclick="forword();" />
<div id="content"></div>

 

<script type='text/javascript' src='dwr/engine.js'></script> 这句话是必须的，是dwr使用的基本js库，dwr/engine.js这个文件本身是不存在，这里还是web.xml的配置在起作用；

<script type='text/javascript' src='dwr/util.js'></script> 这句话是可选的，如果需要使用dwr的一些函数，比如dwr.util.getValue，dwr.util.setValue等，需要添加这么一句；

<script type='text/javascript' src='dwr/interface/Demo.js'></script> 这句话里面的Demo.js是根据dwr.xml文件来的：<create creator="new" javascript="Demo">，Demo.js里面是什么呢，就是对应的类com.test.web.dwr.Demo的内容了，然后就可以把Demo类的方法在html页面中动态调用了。

到次，dwr的使用流程应该就比较清楚了，然后我再来说下dwr的用法:

先来讲第一个update()函数，先用dwr.util.getValue("demoName");获取demoName的内容，然后执行com.test.web.dwr.Demo类中的d方法，d方法返回的内容，以回调函数的方式传回，并且alert了出来

再来看第二个forword()函数，执行com.test.web.dwr.Demo类中的c方法，以回调函数的方式传回，并且放到content里面。c方法抓了网页/ab.htm的内容。