DWR入门实例(二)

时间：2014-06-28 07:33:18 阅读：338 评论：0 收藏：0 [点我收藏+]

DWR（Direct Web Remoting）

DWR is a Java library that enables Java on the server and JavaScript in a browser to interact and call each other as simply as possible.

Dwr能让在服务器端的java代码和浏览器客户端的javascript代码尽可能简单的相互调用。

DWR is Easy Ajax for Java!

官网：http://directwebremoting.org/dwr/index.html

一、环境搭建

1. 新建web工程。

2. 从官网下载dwr3.0 rc2，也是当前最新版本，并引入类路径。

3. dwr依赖于logging.jar，也需要引入类路径下面。

4. 配置web.xml如下：

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

5. 新建一个java类，代码如下：

package com.yokoboy.dwr.service;

public class DwrDemo {
    public String getHello(String name) {
        return name + " 你好！";
    }
}

6. 在web.xml 同目录下面新建dwr.xml，代码如下：

<?xml version="1.0" encoding="UTF-8"?>  
<dwr>
    <allow>
        <!--配置的一个演示类，javascript="Demo" 表示可以在页面中用Demo这个名称指向DwrDemo这个java类，类中的方法可以在前台调用 -->
        <!-- creater="new"表示每调用一次时,都需要new一个 -->
        <create creator="new" javascript="Demo">
            <param name="class" value="com.yokoboy.dwr.service.DwrDemo" />
        </create>
        
        <!-- java类库类 -->
        <create creator="new" javascript="MyDate">
            <param name="class" value="java.util.Date" />
        </create>

        <!-- 测试阶段使用，运营阶段不要使用 -->
        <!-- convert元素用于数据类型转换，即java类和javascript之间相互转换 -->
        <convert converter="exception" match="java.lang.Exception" />
        <convert converter="bean" match="java.lang.StackTraceElement" />
    </allow>
</dwr>

6. 新建MyDwr.jsp文件，代码如下：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://"
            + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>

<!DOCTYPE HTML>
<html>
<head>
<base href="<%=basePath%>">
<title>Dwr Demo</title>
<script type=‘text/javascript‘ src=‘${pageContext.request.contextPath}/dwr/engine.js‘></script>
<script type=‘text/javascript‘ src=‘${pageContext.request.contextPath}/dwr/util.js‘></script>
<script type=‘text/javascript‘ src=‘${pageContext.request.contextPath}/dwr/interface/Demo.js‘></script>
<script type=‘text/javascript‘ src=‘${pageContext.request.contextPath}/js/jquery1.8.js‘></script>
<script type="text/javascript">
    //此函数中可以调用java类的方法，除了java方法本身的参数外，还要将回调函数名作为参数传给java方法  
    function sayHello(name) {
        Demo.getHello(name, dwrHandler);
    }

    //这是dwr的一个回调函数，data参数即java方法getHello(String name)的返回值  
    function dwrHandler(data) {
        alert(data);
    }
</script>
</head>

<body>
    <input>
    <button onclick="sayHello($(‘input‘).val());">提交</button>
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://"
            + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>

<!DOCTYPE HTML>
<html>
<head>
<base href="<%=basePath%>">
<title>Dwr Demo</title>
<script type=‘text/javascript‘ src=‘${pageContext.request.contextPath}/dwr/engine.js‘></script>
<script type=‘text/javascript‘ src=‘${pageContext.request.contextPath}/dwr/util.js‘></script>
<script type=‘text/javascript‘ src=‘${pageContext.request.contextPath}/dwr/interface/Demo.js‘></script>
<script type=‘text/javascript‘ src=‘${pageContext.request.contextPath}/js/jquery1.8.js‘></script>
<script type="text/javascript">
    //此函数中可以调用java类的方法，除了java方法本身的参数外，还要将回调函数名作为参数传给java方法  
    function sayHello(name) {
        Demo.getHello(name, dwrHandler);
    }

    //这是dwr的一个回调函数，data参数即java方法getHello(String name)的返回值  
    function dwrHandler(data) {
        alert(data);
    }
</script>
</head>

<body>
    <input>
    <button onclick="sayHello($(‘input‘).val());">提交</button>
</body>
</html>