DWR 3.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>

其中用到了jquery,需要自行導入。

 

發布網站,訪問MyDwr.jsp即可查看效果!

 

二、說明

 1. 查看jsp源代碼,最上面引入了幾個js文件,實際上是不存在的,不用考慮它們在哪兒。

 2. 其中engine.js和util.js是固定的。另外的一個js的名稱就是dwr.xml中配置的類名。
   這些js的路徑基本是:app_root/dwr/....模式的,一定要寫對。

3. 訪問 “app_root/dwr” ,這是dwr本身提供了一個測試環境,可以直接執行服務器端函數中的方法。

    其中MyDate里面的函數是java.util.Date類里面的方法。

4. 打開web.xml 文件。里面配置了一個servlet,“url-pattern”配置的是“/dwr/*”,所以攔截所有已dwr開頭的請求。
    url-pattern”如果改成了/ddd/*,頁面中都需吧dwr該成ddd

5. 再看dwr.xml文件(這個文件名不能改,必須是dwr),里面“create了兩個javascript”,再看源代碼中,確實使用Demo作為實例來引用             com.yokoboy.dwr.service.DwrDemo里面的方法。 

 

參考:

  http://www.cnblogs.com/cyjch/archive/2012/02/16/2353758.html

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM