zoukankan      html  css  js  c++  java
  • DWR入门实例(二)

    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能让在server端的java代码和浏览器client的javascript代码尽可能简单的相互调用。

    DWR is Easy Ajax for Java!

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

     

     

    一、 环境搭建

    1. 新建webproject。

    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本身提供了一个測试环境,能够直接运行server端函数中的方法。

        当中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里面的方法。

  • 相关阅读:
    webpack--------类似gulp的工具,在gulp后面出来的
    canvas 绘制矩形
    HTML5 Canvas基础知识
    视差滚动效果
    闭包的理解
    AJAX 跨域
    json与jsonp的区别
    针对AJAX与JSONP的异同
    如何使用JSONP
    JSONP的客户端的具体实现
  • 原文地址:https://www.cnblogs.com/mengfanrong/p/5091901.html
Copyright © 2011-2022 走看看