2008.05.29

小武的DWR入门Demo

技术·学习星期四小武

今天花了点时间研究了一下DWR,跑了一个demo,记录一下我的研究过程.

DWR（Direct Web Remoting）是一个开源的类库,可以帮助开发人员开发包含AJAX技术的网站.它可以允许在浏览器里的代码使用运行在WEB服务器上的JAVA函数,就像它就在浏览器里一样.

英文不错的可以直接看官方的英文入门,http://getahead.org/dwr/getstarted

两种方式入门dwr

1.直接从http://getahead.org/dwr/download下载war的程序部署到本机,体验一下dwr能做什么.

2.动手跑一个Hello World,复杂点,但是推荐这种方式.

动手操作步骤:

开始之前请在myeclipse下建立web工程dwrWeb

1.下载jar包,放到你的java web应用的WEB-INF/lib 目录下.

注意:从dwr2.0开始,需要用到commons-logging包,没有的到这里下载: http://commons.apache.org/logging/

2.编辑web.xml,加入servlet,让web应用支持dwr

  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee"
  3.  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  4.  xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
  5. http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
  6.  servlet="">
  7.  <servlet>
  8.   <servlet-name>dwr-invoker</servlet-name>
  9.   <display-name>DWR Servlet</display-name>
  10.   <servlet-class>
  11.    org.directwebremoting.servlet.DwrServlet
  12.   </servlet-class>
  13.  </servlet>
  14.  <servlet-mapping>
  15.    <servlet-name>dwr-invoker</servlet-name>
  16.    <url-pattern>/dwr/*</url-pattern>
  17.  </servlet-mapping>
  18. </web-app>

Tips:servlet-class中的uk.ltd.getahead.dwr.DWRServlet是dwr1.0的写法,2.0中虽然可用,但是不推荐.

在web.xml的同级目录下建立dwr.xml文件,这个配置文件定义了dwr可以创建和调用哪些java类

  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <!DOCTYPE dwr PUBLIC
  3.    "-//GetAhead Limited//DTD Direct Web Remoting 2.0//EN"
  4.    "http://getahead.org/dwr/dwr20.dtd">
  5. <dwr>
  6.   <allow>
  7.     <create creator="new" javascript="Demo">
  8.       <param name="class" value="com.yufeng.Demo"/>
  9.     </create>
  10.   </allow>
  11. </dwr>

注意的一点:
<create creator=”new” javascript=”Demo”>中的javascript的值不能是关键字

3.建立java类文件

package com.yufeng;
  1.  
  2. public final class Demo
  3. {
  4.  public String hello(String name)
  5.  {
  6.   return "恭喜恭喜," + name + "你的dwr程序成功运行!Hava fun!";
  7.  }
  8. }

4.建立js文件

function hello() {
  1.   var name = dwr.util.getValue("name");
  2.   Demo.hello(name, function(data) {
  3.     dwr.util.setValue("result", data);
  4.   });

5.建立html文件

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  2. <html>
  3.  <head>
  4.   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5.   <script type='text/javascript' src='/dwrWeb/dwr/interface/Demo.js'></script>
  6.   <script type='text/javascript' src='/dwrWeb/dwr/engine.js'></script>
  7.   <script type='text/javascript' src='/dwrWeb/dwr/util.js'></script>
  8.   <script type='text/javascript' src='hello.js'></script>
  9.  </head>
  10.  
  11.  <body>
  12.   <input type="text" name="name" value="Hello World!">
  13.   <br>
  14.   <input type="button" onclick="hello();" value="提交">
  15.   <br>
  16.   <span id="result" style="background: #eeffdd; padding: 10px"></span>
  17.  </body>
  18. </html>

前三个js并不是实际存在于我们的项目中的,而是通过的路径的映射指向了其他的文件.

好了,大功告成,部署到tomcat上运行http://localhost:8080/dwrWeb看看吧.
效果如下:

下载完整的eclipse工程

, , ,

相关文章

引用地址：http://t263.net/dwr-demo.html

汶川挺住，我们在行动！ 放假前一天加班到22点
Rss 2.0Trackback

已经有2层楼了

  1. 我的和你的一樣，為什麽我的就不行呢？

    我的在javascript中不認識dwr下定義的java類


    瀚海 Says @ 08-07-29 10:25 上午

  2. @瀚海 你把完整的工程下载了看看吧

    小武 Says @ 08-08-8 1:19 下午

欢迎发表评论