DWR学习笔记-HelloWorld篇

1. DWR 简介
   DWR是一个Java开源库，帮助你实现Ajax网站。
    它可以让你在浏览器中的Javascript代码调用Web服务器上的Java，就像在Java代码就在浏览器中一样。
    DWR主要包括两部分：
        在服务器上运行的Servlet来处理请求并把结果返回浏览器。
        运行在浏览器上的Javascript，可以发送请求，并动态改变页面。
    DWR会根据你的Java类动态的生成Javascript代码。这些代码的魔力是让你感觉整个Ajax调用都是在浏览器上发生的，但事实上是服务器执行了这些代码，DWR负责数据的传递和转换。
    这种Java和Javascript之间的远程调用会让DWR用户感觉像是曾经习惯使用的RMI或SOAP的RPC机制。而且这一过程还不需要额外的浏览器插件。
    Java是同步的，而Ajax是异步的。所以当你调用一个远程方法时，你要给DWR一个回调函数，当数据从网络上回来时，DWR会调用这个函数.

2. 如何使用DWR
   2.1. 下载DWR
         下载地址http://getahead.ltd.uk/dwr/download
          我下载的是dwr-2.0.5版本
   2.2  安装DWR
        创建一个Web工程，将dwr.jar放到Web工程webapp的WEB-INF/lib目录下  
   2.3 修改配置文件
       修改web.xml文件

 
  <servlet>
    <servlet-name>dwr-invoker</servlet-name>
    <display-name>DWR Servlet</display-name>
    <description>Direct Web Remoter Servlet</description>
    <servlet-class>org.directwebremoting.servlet.DwrServlet</servlet-class>

    <!-- This should NEVER be present in live -->
    <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>

       在webapp/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.org/dwr/dwr20.dtd">

<dwr>
  <allow>
    <create creator="new" javascript="Publisher" scope="application">
      <param name="class" value="hellodwr.HelloDWR"/>
    </create>
  </allow>
</dwr>

 

 2.4 编写HelloDWR类

    

package hellodwr;

public class HelloDWR {
    public String sayHello(String name) {
    	return "Hello " + name;
    }
}

 

 2.5 测试DWR

      这是一个非常有用的功能，特别对于初学者来说，可以查看自己编写的DWR是否部署成功，结果是否正确

      讲工程部署到应用服务器中(本例用Tomcat5.5.26),启动服务。

      访问地址: http://localhost:8080/hellodwr/dwr

   

Classes known to DWR:
HelloDWR (hellodwr.HelloDWR) 

 

  点击HelloDWR,会看到刚才写的sayHello方法，点击execute看看结果

Methods For: HelloDWR (hellodwr.HelloDWR)
To use this class in your javascript you will need the following script includes:

  <script type='text/javascript' src='/hellodwr/dwr/interface/HelloDWR.js'></script>
  <script type='text/javascript' src='/hellodwr/dwr/engine.js'></script>

In addition there is an optional utility script:

  <script type='text/javascript' src='/hellodwr/dwr/util.js'></script>


There are 10 declared methods:

sayHello(  ); [execute] "Hello DWR" ---执行结果

 

 2.6 WEB页面调用

       引入js

<script type='text/javascript' src='<%=appPath%>/dwr/engine.js'></script>
<script type='text/javascript' src='<%=appPath%>/dwr/util.js'></script>
<script type='text/javascript' src='<%=appPath%>/dwr/interface/HelloDWR.js'></script>

 

  js调用

//调用DWR函数
function invokeDWR() {
    HelloDWR.sayHello('DWR', callback);
}

//回调函数
function callback(obj) {
    alert(obj);
}

invokeDWR();//调用dwr，提示"Hello DWR"