DWR学习笔记 Hello World

简介

DWR(Direct Web Remoting)是一个用于改善web页面与Java类交互的远程服务器端Ajax开源框架,可以帮助开发人员开发包含AJAX技术的网站。它可以允许在浏览器里的代码使用运行在WEB服务器上的JAVA函数,就像它就在浏览器里一样。

使用DWR

要想在我们的项目中使用DWR,首先要获取到dwr的jar包(下载地址: http://directwebremoting.org/dwr/downloads/index.html),其次还需要下载commons-logging的jar包。

在myeclipse中新建一个web项目,把dwr.jar和commons-loggin-1.1.1.jar放入到lib目录下。

要想dwr在我们的web项目中起作用,还需要将他引入进来,Struts2使用fiter的方式引入到项目中,dwr则是通过Servlet的方式引入到我们的项目中。在web.xml中配置dwr的Servlet。

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5" 
    xmlns="http://java.sun.com/xml/ns/javaee" 
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
    xsi:schemaLocation="http://java.sun.com/xml/ns/javaee 
    http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
  <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>
  
</web-app>
我们还可以通过<init-param>来给dwr传递参数,比如是否开启调试等。更多的参数可以参看官方的文档。

现在将dwr引入进来了,还需要在web-info目录下创建一个名为dwr.xml的文件,他就是dwr的配置文件,我们在这个文件中配置我们要暴露给javascript的java类。

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE dwr PUBLIC
    "-//GetAhead Limited//DTD Direct Web Remoting 3.0//EN"
    "http://getahead.org/dwr/dwr30.dtd">
<dwr>
  <allow>
    <create creator="new" javascript="JHello">
      <param name="class" value="com.luojing.dwr.Hello"/>
    </create>
   </allow>
</dwr>

我们关注一下<create>元素,我们通过这个元素来配置我们的java类和javascript之间的关系。

creator=”new”表示对象的创建方式为使用java中的new关键字。还有其他的选项如static,none。static表示通过静态方法(默认为getInstacne)来获取对象实例。Javascript=”JHello”指定我们的类在javascript中对应的对象的名字,我们可以通过这个名字在javascript中调用我们公开的java方法。

<param class=”class” value=”com.luojing.dwr.Hello”/>用于指定我们要公开的类,当然我们还可以对类中要公开的方法进行配置(通过配置include和exclude)。

接下来编写我们需要开放的类:

public class Hello {
    public String sayHello(String name){
        return "hello " + name;
    }
}

在我们的浏览器中输入:http://localhost/dwr/dwr


这里会显示我们已经公开的类。这里可以看到,显示的模块的名字和我们在dwr.xml中指定的javascripit=”JHello”是一致的。点击名字,可以进入下一个页面:

这里可以看到在JHello中我们已经公开的方法,点击对应的方法后面的excute按钮可以执行这个方法。这里还列出了如果我们要在页面中使用javascript访问该对象时需要引进的js脚本。

下面我们编写一个Jsp页面用于测试:

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <title>DWR TEST</title>
        <script type="text/javascript" src="dwr/engine.js"></script>
        <script type="text/javascript" src="dwr/util.js"></script>
        <script type="text/javascript" src="dwr/interface/JHello.js"></script>
        <script type="text/javascript">
        
        function test(){
            var inputValue = dwr.util.getValue("inputData");
            JHello.sayHello(inputValue, callBackFunc);
        }
        
        var callBackFunc = function (data){
            dwr.util.setValue("serverData",data);
        }
        
       </script>

    </head>

    <body>
        input data :
        <input type="text" name="inputData" />
        <br />
        server data:
        <input type="text" name="serverData" />
        <br />
        <input type="button" value="测试" onclick="test()" /> <br />
    </body>
</html>

对于js脚本引进的顺序,官方好像没做说明,但是我在测试的时候发现,如果将engine.js放在我们interface/Jhello.js之后的话,js会报错。因此最好将engine.js的引用放在最前面,他是dwr的核心成员。

在浏览器中访问我们的文件:

点击”测试按钮”:

可以看到正确的结果被显示在页面上了。

页面中我们还用到了util.js文件,他是dwr提供的辅助工具,他是独立的,我们可以直接使用它。他提供了很多有用的方法来帮助我们操作页面上的元素。

到这里,就完成了使用dwr创建的第一个应用。dwr涉及的内容也不多,学习起来还是比较简单。自己动手做了,就顺便记录下来。

原文地址:https://www.cnblogs.com/jdluojing/p/3212409.html