DWR中文文档v0.9 02

lgf444

浏览: 80981 次
性别:
来自: 长沙

最近访客更多访客>>

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

AJAX

DWR JavaScript Servlet Ajax 浏览器

第1章. DWR入门

1.1 简介
DWR是一个可以允许你去创建AJAX WEB站点的JAVA开源库。它可以让你在浏览器中的Javascript代码调用Web服务器上的Java代码，就像在Java代码就在浏览器中一样。

DWR包含2个主要部分：
1. 一个运行在服务器端的Java Servlet，它处理请求并且向浏览器发回响应。
2. 运行在浏览器端的JavaScript，它发送请求而且还能动态更新网页。
DWR工作原理是通过动态把Java类生成为Javascript。它的代码就像Ajax魔法一样，你感觉调用就像发生在浏览器端，但是实际上代码调用发生在服务器端，DWR负责数据的传递和转换。这种从Java到JavaScript的远程调用功能的方式使DWR用起来有种非常像RMI或者SOAP的常规RPC机制，而且DWR的优点在于不需要任何的网页浏览器插件就能运行在网页上。

Java从根本上讲是同步机制，然而AJAX却是异步的。所以你调用远程方法时，当数据已经从网络上返回的时候，你要提供有反调（callback）功能的DWR。

这个图片显示了DWR如何选择一个下拉列表的内容作为JavaScript 的onclick事件的结果。 DWR动态在JavaScript里生成一个AjaxService类，去匹配服务气端的代码。由eventHandler去调用它，然后DWR处理所有的远程细节，包括倒置（converting）所有的参数以及返回Javascript和Java之的值。在示例中，先在eventHandler方法里调用AjaxService的getOptions() 方法，然后通过反调（callback）方法populateList(data) 得到返回的数据，其中data就是String[]{"1", "2", "3"}，最后再使用DWR utility 把data加入到下拉列表。

好了，DWR介绍完了，现在大家肯定很想知道如何做出第一个DWR吧！然后我们在下一章节以一个HelloWorld示例带领大家入门。

1.2 第一个DWR程序：Hello World
有2中方法可以帮助你入门DWR，一个方法是去下载WAR文件并且去完整看一下代码，但是这样并不能帮助你发现DWR是如何简单地集成到你当前地WEB应用，所以以下几个简单地步骤推荐看一下：
1.2.1 将DWR放入你的工程
1）从官方网站下载dwr.jar包。然后将它放在你webapp的WEB-INF/lib目录下。
2）将下载的dwr-版本号-src.zip \java\org\directwebremoting内的engine.js和util.js放入WEB应用中，比如js文件夹下。
1.2.2 编辑配置文件
1. web.xml
以下几行代码必须被添加到WEN-INF/web.xml文件中。注意，要把<servlet>和其他<servlet>放在一起，<servlet-mapping>要和其他<servlet-mapping>放在一起

<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>

2. dwr.xml
在web.xml的同一目录下，创建dwr.xml，并且将要被调用的java类写入其中。

<?xml version="1.0" encoding="UTF-8"?>
 <!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting 2.0//EN" "http://www.getahead.ltd.uk/dwr/dwr20.dtd">
 <dwr> 
<allow> 
<create creator="new" javascript="service">
 <param name="class" value="helloWorld.Service" />
 </create> 
</allow>
 </dwr>

1.2.3 编写service
就像没有dwr一样，写一个简单类并加一个方法是

package helloWorld;
 public class Service { 
     public String sayHello(String yourName) {
	 //可以是访问数据库的复杂代码 
	return "Hello World " + yourName;
    }
 }

1.2.4 测试DWR
将代码放入应用服务器（比如Tomcat），启动。
然后在地址栏输入http://localhost:8080/你的工程/dwr

然后点击service，会看到刚才写的sayHello()的方法，输入自己的名字然后点击“Execute”，如果发现确实是正确的返回结果，说明测试通过了，可以进入下一步了。

1.2.5 编写一个jsp
接下来最后一步就是创建一个jsp文件 1）要引用几个dwr的js，其中engine.js必须要，如果需要用到dwr提供的一些方便的工具要引用util.js 2）然后还要引用dwr自动生成的js，dwr/interface/service.js，注意js名字要和dwr.xml配置的一样 3） js里的service.sayHello和java类的那个有一点区别，多了个参数，用来callback返回的数据

<%@ page language="java" pageEncoding="UTF-8"%> 
<html> 
<head> 
<title>My JSP 'first_dwr.jsp' starting page</title>
 <script type='text/javascript' src='js/util.js'></script> 
<script type='text/javascript' src='js/engine.js'></script> 
<script type='text/javascript' src='dwr/interface/service.js'> </script> 
<script type="text/javascript"> 
function firstDwr(){
   service.sayHello("Jorwen",callBackHello); 
}
   
function callBackHello(data){ 
   alert(data); 
} 
</script> 
</head>
<body> 
<input type="button" name="button" value="测试" onclick="firstDwr()"> 
</body> 
</html>

地址栏输入http://localhost:8080/你的工程/first_dwr.jsp 显示的结果如下：

1.3 本章总结
相信看了此章节，大家一般都能做出这个实例来，也算是DWR刚入门了，在以后的教程里将详细介绍DWR各个功能。帮助大家能开发出任何Ajax需求的功能来。更多进阶的例子可以参考范例精讲，您也可以通过看范例学习DWR然后有疑问再查看该文档的相关章节。

分享到：

DWR中文文档v0.9 03 | DWR中文文档v0.9 01

2008-05-06 12:06
浏览 2992
评论(1)
查看更多

1 楼 fpplzw 2008-11-05

哎，都是直接复制粘贴的
<script type='text/javascript' src='dwr/interface/service.js'> </script> ，这句话什么意思啊？

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论