开发者社区> zting科技> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

Ajax框架DWR入门

简介:
+关注继续查看

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. ……
分类: JAVA


本文转自左正博客园博客,原文链接:http://www.cnblogs.com/soundcode/archive/2010/12/20/1911883.html,如需转载请自行联系原作者

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
jQuery Ajax 简单的实现跨域请求
jQuery Ajax 简单的实现跨域请求
64 0
Ajax-20:Jquery发送jsonp请求
Ajax-20:Jquery发送jsonp请求
36 0
jquery ajax超时设置
jquery ajax超时设置 var ajaxTimeoutTest = $.ajax({   url:'', //请求的URL   timeout : 1000, //超时时间设置,单位毫秒   type : 'get', //请求方式,get或post   data :{}, //请求...
1109 0
jQuery| AJAX 简介
AJAX 是与服务器交换数据的技术,它在不重载全部页面的情况下,实现了对部分网页的更新。 什么是 AJAX? AJAX = 异步 JavaScript 和 XML(Asynchronous JavaScript and XML)。
759 0
第111天:Ajax之jQuery实现方法
由于jQuery中的Ajax方法是用了内置的deferred模块,是Promise模式的一种实现,而我们这里没有讲过,所以我们就不使用这一模式啦。 我们只定义一个Ajax方法,他可以简单的get,post,jsonp请求就可以了。
1094 0
+关注
3549
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载