DWR 3.0 入門示例教程

時間 2019-11-08

標籤 dwr 3.0 入門示例教程欄目 Ajax 简体版

原文原文鏈接

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

Dwr能讓在服務器端的java代碼和瀏覽器客戶端的javascript代碼儘量簡單的相互調用。html

DWR is Easy Ajax for Java!java

官網：http://directwebremoting.org/dwr/index.htmljquery

1、環境搭建web

1. 新建web工程。瀏覽器

2. 從官網下載dwr3.0 rc2，也是當前最新版本，並引入類路徑。服務器

3. dwr依賴於logging.jar，也須要引入類路徑下面。app

4. 配置web.xml以下：jsp

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