DWR简单例子与使用向导

最新推荐文章于 2024-09-21 09:29:16 发布

IT源哥

最新推荐文章于 2024-09-21 09:29:16 发布

阅读量2.1k

点赞数

分类专栏：前端技术文章标签： dwr javascript ajax class function web

前端技术专栏收录该内容

30 篇文章 0 订阅

订阅专栏

DWR简单例子与使用向导

什么是DWR？
DWR是一个Open Source的 java项目。DWR可以让JavaScript调用运行在Web服务器里面的JAVA程序。简单一点或者专业一点就是Easy AJAX for JAVA.

下面将一步一步的介绍怎么完成一个简单DEMO
1，从官方网站下载DWR https://dwr.dev.java.net/files/documents/2427/32252/dwr.war 把他直接放到TOMCAT_HOME/webapps 下面
2，编写一个Java类如下：

   DWRTest.java
package com.test.ajax;
/**
*
* @author 方见华
*
*/
public class DWRTest {
public DWRTest(){

}
public String getMyName(){
  return "James Fang";
}
}

3, 把DRWTest类配置在dwr.xml中，dwr.xml是DWR的配置文件，所有需要在JavaScript中调用的java的类都必须在这个文件中描述。这个文件的位于TOMCAT_HOME/webapps/dwr/WEB-INF/dwr.xml. 在<allow>标签中添加以下内容

4, 编写调用DWRTest类 getMyName的方法的HTML文件，test.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>DWR - My First AJAX</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<script type='text/javascript' src='/dwr/dwr/interface/MyTest.js'></script>
<script type='text/javascript' src='/dwr/dwr/engine.js'></script>
<script type='text/javascript' src='/dwr/dwr/util.js'></script>
<script language="javascript">
var mycall=function callBack(data){
DWRUtil.setValue("demo1",data);

}
function showMyName(){
MyTest.getMyName(mycall);
}

function clearName(){
demo1.value="";
}
</script>
</head>
<body>
<h1>Ajax Test Page</h1>
<input type="button" value="setMyName" οnclick="javascript:showMyName()"><input type="button" value="Clear" οnclick="javascript:clearName()"><br>
<input type="text" id="demo1"></select><br>
</body></html>

5, 运行，在浏览器中输入 http://localhost:8080/dwr/test.html

DWR让Ajax更简单

最近看了一个java实现的Ajax的框架——DWR，觉得很不错。下面自己编写小例子，例子实现的是在在页面上点一个“查看当前时间”的按钮，然后在页面不刷新的情况下，从服务器端返回当前时间并显示在页面。步骤如下：

1、到 http://getahead.ltd.uk/dwr/download下载dwr.jar文件。

2、用eclipse新建一个项目，我的项目名就叫dwr。

3、把刚才下载的dwr.jar放到web-inf/lib下面。

4、在web.xml中加入一下内容：

<servlet>
    <servlet-name>dwr-invoker</servlet-name>
    <display-name>DWR Servlet</display-name>
    <description>Direct Web Remoter Servlet</description>
    <servlet-class>uk.ltd.getahead.dwr.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>

5、在web.xml的所在目录下新建dwr.xml，内容如下：

<?xml version="1.0" encoding="UTF-8"?>
<dwr>
<allow>
    <create creator="new" javascript="Test">
      <param name="class" value="com.wuahui.test.ajax.AjaxTest"/>
    </create>
</allow>
</dwr>

6、创建服务器端的程序com.wuahui.test.ajax.AjaxTest.java，代码如下：

package com.wuahui.test.ajax;

import java.util.Date;

public class AjaxTest {

    public String dispCurrentTime(){
        return new Date().toString();
    }
}

7、在web目录下创建前台页面myAjax.html，内容如下：

<html>
<head>
<title>DWR Test</title>

<script type='text/javascript' src='dwr/interface/Test.js'></script>
<script type='text/javascript' src='dwr/engine.js'></script>
<script type='text/javascript' src='dwr/util.js'></script>
</head>
<body οnlοad='DWRUtil.useLoadingMessage()'>
<input class='ibutton' type='button' οnclick='Test.dispCurrentTime(reply0);' value='查看当前时间' title='查看服务器上的时间'/>
<script type='text/javascript'>
    var reply0 = function(data)
    {
      if (data != null && typeof data == 'object') alert(DWRUtil.toDescriptiveString(data, 2));
      else DWRUtil.setValue('timestr', DWRUtil.toDescriptiveString(data, 1));
    }
</script>
<span id='timestr' class='reply'></span>
</body></html>

8、把项目部署到Tomcat上面运行http://localhost:8080/dwr/myAjax.htmlå³å¯ã

AJAX DWR基本使用向导

    前言aJax也许很多人比较熟悉，但是dwr可以是应用ajax变得非常的简单，大大提高开发效率，而且dwr还提供了很多有用的js代码，可以说是如虎添翼。

    应用解释可能有部分人根本不知道aJax和dwr是什么东西，用来做什么的？既然标题是基本使用，那我就从dwr有什么用来说说。一般来说，不管是jsp 或者是asp要访问数据库都得submit一个form，然后获取数据库或者执行部分逻辑，接着web跳了另外一页把执行的结果显示出来。这个过程web 相对于是刷新了一下。那么有什么办法可以令web不刷新，而页面又可以和数据库交互数据呢？有，就是ajax技术，利用web 对象把数据以xml方式submit到web server，然后返回结果，中间全部用javascript操作，页面不闪动或者刷新。但是自己操作xml对象未免有点小烦，能不能把这些工作集成到一个对象里面呢？能，就是dwr.下面开始教你如何使用。

    如何使用

    下载软件包http://getahead.ltd.uk/dwr/这里就可以

    安装软件包解压软件包，把dwr.jar 文件拷贝到你web项目的WEB-INF/lib 目录中，同时编辑WEB-INF/web.xml文件，在此文件中加入
#

   1. <servlet>
   2.   <servlet-name>dwr-invoker</servlet-name>
   3.   <display-name>DWR Servlet</display-name>
   4.   <servlet-class>uk.ltd.getahead.dwr.DWRServlet</servlet-class>
   5.   <init-param>
   6.      <param-name>debug</param-name>
   7.      <param-value>true</param-value>
   8.   </init-param>
   9. </servlet>
10.
11. <servlet-mapping>
12.   <servlet-name>dwr-invoker</servlet-name>
13.   <url-pattern>/dwr/*</url-pattern>
14. </servlet-mapping>

另外，在WEB-INF目录中建立一个dwr.xml 文件，文件内容入下

   1. <!DOCTYPE dwr PUBLIC
   2.     "-//GetAhead Limited//DTD Direct Web Remoting 1.0//EN"
   3.     "http://www.getahead.ltd.uk/dwr/dwr10.dtd">
   4.
   5. <dwr>
   6.   <allow>
   7.     <create creator="new" javascript="JDate">
   8.       <param name="class" value="java.util.Date"/>
   9.     </create>
10.     <create creator="new" javascript="Demo">
11.       <param name="class" value="your.java.Bean"/>
12.     </create>
13.   </allow>
14. </dwr>

    这个可以说也是dwr的配置文件最后，重新启动你的tomcat或者resin等jsp web server.
#     测试安装效果在ie敲入http://localhost：8080/[YOUR-WEBAPP]/dwr/
#     如果成功显示页面，那说明你安装正确了。
#     应用于网页测试页会显示JDate （java.util.Date），这个是也是例子，通过javascript调用web server中的java.util.Date，也相当于调用web server里面的一个bean.那么我们如何使用他呢？
#     你可以在自己的html文件中加入
#

   1. <script type='text/javascript' src='/sc/dwr/interface/JDate.js'></script>
   2.   <script type='text/javascript' src='/sc/dwr/engine.js'></script>

比如我们要用bean中的toLocaleString方法返回一个时间string.那么你可以在javascript中编写

   1. function displayLocaleDate()
   2. {
   3.    var str = JDate.toLocaleString();
   4.    alert(str);
   5. }

    当运行displayLocaleDate（）方法就会弹出时间。
#     总结以上只是个调用服务器Date javabean的简单例子，你可以更加自己的需要写相应的bean，可以做出非常出色的基于web聊天网站，或者实时图表显示应用。