kooyee ‘s blog

开源软件， 众人努力的结晶， 全人类的共同财富
posts - 103, comments - 55, trackbacks - 0, articles - 66
   :: 首页 :: 新随笔 :: 联系 :: 聚合  :: 管理

Ajax框架DWR入门

Posted on 2008-02-13 19:02 kooyee 阅读(1081) 评论(0)  编辑  收藏 所属分类: Ajax学习手记

Direct Web Remoting

DWR allows Javascript in a browser to interact with Java on a server and helps you manipulate web pages with the results.

DWR is Easy Ajax for Java
官方网站：http://getahead.ltd.uk/dwr/

//DWR--不错的Ajax框架之一

本文内容：

  1. DWR介绍
  2. DWR原理
  3. DWR开发步骤
  4. dwr.xml说明
  5. DWR核心引擎
  6. DWR工具包

DWR介绍

  • What is DWR?：
  1. 在服务器上运行的Servlet来处理请求并把结果返回浏览器。
  2. 运行在浏览器上的Javascript，可以发送请求，并动态 改变页面。DWR会根据你的Java类动态的生成Javascript代码。这些代码魔力是让你感觉整个Ajax调用都是在浏览器上发生的，但事实上是服务器执行了这些代码，DWR负责数据的传递和转换。
  3. 这种Java和Javascript之间的远程调用会让DWR用户感觉像是曾经习惯使用的RMI或SOAP的RPC机制。而且这一过程还不需要额外的浏览器插件。
  4. Java是同步的，而Ajax是异步的。所以当你调用一个远程方法时，你要给DWR一个回调函数，当数据从网络上回来时,DWR会调用这个函数。
  • DWR的作用:
  1. 有效地从应用程序代码中把 Ajax 的全部请求-响应循环消除掉。
  2. 客户端代码再也不需要直接处理XMLHttpRequest 对象或者服务器的响应。
  3. 不再需要编写对象的序列化代码或者使用第三方工具才能把对象变成 XML。
  4. 不再需要编写 servlet 代码把 Ajax 请求调整成对 Java 域对象的调用

DWR原理

  • DWR是作为Web应用的一个Servlet进行部 署的，是一个黑盒子中的servlet。
  1. 对于公共有的每个类，DWR 动态地生成包含在 Web 页面中的 JavaScript。生成的JavaScript 包含存根函数，代表 Java 类上的 对应方法并在幕后执行XMLHttpRequest。这些请求被发送给DWR。
  2. 把请求翻译成服务器端 Java 对象上的方法调用并把方法的返回值放在servlet 响应中发送回客户端，编码成 JavaScript。

DWR开发步骤

  • Download jar包
  1. http://getahead.org/dwr/download
  2. Copy dwr.jar into WEB-INF/lib
  • 修改web.xml,新增 DwrServlet

代码片断:

<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>
  • 编写服务器端Java类
  1. 不要出现Javascript保留关键字；和保留关键字同名的函数指定被排除。多数Javascript的关键字和Java是相同的。所以你不可能有一个方法叫做”try()”。但是该死”delete()”对与Javascript有着特殊意义，而对Java则不是。
  2. Javascript方法重载是不支持的，所以尽量不要再Java中使用。

一个小例子:

下载: HelloWorld.java
package cn.com.jacken.dwr;
 
public class HelloWorld {
    public String sayHello(String name) {
        return "Hi, " + name;
    }
}
  • 在dwr.xml文件注册Java对象

举例:

<dwr>
    <allow>
        <create creator="new" javascript="HelloWorld" scope="page">
            <param name="class" value="cn.com.jacken.dwr.HelloWorld" />
        </create>
    </allow>
</dwr>
  • 在Web 页面中添加DWR AJAX库

代码片段:

<script src='dwr/engine.js'>
</script>
<script src='dwr/util.js'>
</script>
<script src='dwr/interface/HelloWorld.js'>
</script>

dwr.xml说明

请看另外一篇文章:DWR配置文件dwr.xml详解

DWR核心引擎engine.js

  1. 页面中加入:
    <script type='text/javascript' src='dwr/engine.js' />
  2. 设置超时时间:

    全局设置:

     

    dwr.engine.setTimeout(1000);

    局部设置(优先级高):

    Remote.singleMethod(params, { callback:function(data)
    { ... }, timeout:2000 });
  3. 错误处理:
    全局设置:
    function handler(msg) {
    alert(msg);
    }
    dwr.engine.setErrorHandler(handler);

    局部设置:

    Remote.method(params, {
    callback:function(data) { ... },
    errorHandler:handler
    });
  4. 批量执行 :
    dwr.engine.beginBatch();
    var selValue=…;
    //调用服务器Java程序
    Province.getCitiesByProvince(selValue,callBack);
    Province.getNick(callBack2);
    dwr.engine.endBatch({
    timeout:3000
    });
    //…

DWR工具包

  1. 必须在页面引入util.js
    <script src='dwr/util.js'>
      <    /script>
  2. $(”username”) = document.getElementById(”username”);
  3. setValue(id, value):这个函数能操作大多数HTML元素
  4. getValue(id):getValue(id)是 setValue()对应的”读版本”。
  5. setValues():批量设置值
  6. getValues():批量获取值
  7. getText(id):为select列表设计的。你可能需要取得显示的文字,而不是当前选项的值。
  8. selectRange:选择一个输入框中的一定范围的文字。
  9. ……

只有注册用户登录后才能发表评论。
网站导航: