一、DWR简介

　　dwr是一个Ajax框架，官方网站：http://directwebremoting.org/dwr/，最新版本3.0.1，要求jdk1.6及以上。

　　如下图所示，可以通过DWR来调用Java方法，并通过DWR封装的工具类来对页面元素进行简单处理：

　　上面的展示是对Ajax的封装，简化了用户的操作，当然最常用的还是逆向Ajax（需要DWR2.0及以上版本），就是俗称的服务器端推送：

　　逆向Ajax相对比较难一点，下面先展示js调用Java方法的例子。

二、DWR示例-js调用Java方法

2.1 创建Web项目

　　创建Web项目，并将dwr-3.0.1-RELEASE.jar和commons-logging-1.2.jar放入WEB-INF/lib下，dwr-3.0.1-RELEASE.jar是DWR必须要的jar包，最新版本为3.0.1-RELEASE，它依赖commons-logging-1.2.jar日志包。最终项目结构如下：

　　若使用Maven，则Maven坐标如下：

<dependency>

    <groupId>org.directwebremoting</groupId>

    <artifactId>dwr</artifactId>

    <version>3.0.1-RELEASE</version>

</dependency>

<dependency>

    <groupId>commons-logging</groupId>

    <artifactId>commons-logging</artifactId>

    <version>1.2</version>

</dependency>

　　Maven创建Web项目查看（待续）。本项目使用jdk1.7，tomcat7搭建。

2.2 修改web.xml

　　DWR的js调用Java代码，本质上还是通过Ajax来访问，因此需要在web.xml中配置DWR接收js请求的servlet，配置如下：

<?xml version="1.0" encoding="UTF-8"?>

<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://xmlns.jcp.org/xml/ns/javaee" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"

    id="WebApp_ID" version="3.1">

    <display-name>testweb</display-name>

    <servlet>

        <servlet-name>dwr-invoker</servlet-name>

        <!-- 接收js的Ajax请求的servlet -->

        <servlet-class>org.directwebremoting.servlet.DwrServlet</servlet-class>

    </servlet>

    <servlet-mapping>

        <servlet-name>dwr-invoker</servlet-name>

        <!-- 拦截指定的URL -->

        <url-pattern>/dwr/*</url-pattern>

    </servlet-mapping>

    <welcome-file-list>

        <welcome-file>index.html</welcome-file>

        <welcome-file>index.jsp</welcome-file>

    </welcome-file-list>

</web-app>

　　若使用的不是jdk1.7及Tomcat7注意修改web.xml的头信息，为低版本。

2.3 创建被调用的Java类

　　创建一个普通的Java类即可，如下：

package yiwangzhibujian;

import java.util.Date;

/**

 * @author yiwangzhibujian

 */

@SuppressWarnings("deprecation")

public class HelloWorld{

    /**

     * 无参无返回值

     */

    public void helloNN(){

        System.out.println(new Date().toLocaleString() + " js访问helloNN方法");

    }

    /**

     * 有参无返回值

     */

    public void helloYN(String name){

        System.out.println(new Date().toLocaleString() + " js访问helloYN方法，name=" + name);

    }

    /**

     * 无参有返回值

     */

    public String helloNY(){

        System.out.println(new Date().toLocaleString() + " js访问helloNY方法");

        return "Hello World!";

    }

    /**

     * 有参有返回值

     */

    public String helloYY(String name){

        System.out.println(new Date().toLocaleString() + " js访问helloYY方法，name=" + name);

        return "Hello " + name;

    }

}

　　通过DWR调用Java方法使用普通的Java类即可，不需要访问servlet。

2.4 创建DWR配置文件

　　在WEB-INF根路径下创建DWR的配置文件，dwr.xml

<!DOCTYPE dwr PUBLIC

    "-//GetAhead Limited//DTD Direct Web Remoting 3.0//EN"

    "http://getahead.org/dwr/dwr30.dtd">

<dwr>

    <allow>

        <create creator="new" javascript="HelloWorld">

            <param name="class" value="yiwangzhibujian.HelloWorld" />

        </create>

    </allow>

</dwr>

　　create=“new”，即通过默认的构造方法使用new来创建对象，javascript="HelloWorld"，HelloWorld表示调用类的名称，即在js中Java对象的名字，<param>即用来配置DWR访问的类。简单来说，value就是js要调用的类，javascript属性即是为这个类起一个简单的别名。

2.5 创建JSP页面

　　本示例简单的在index.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 PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<base href="<%=basePath%>">

<title>My JSP 'index.jsp' starting page</title>

<meta http-equiv="pragma" content="no-cache">

<meta http-equiv="cache-control" content="no-cache">

<meta http-equiv="expires" content="0">

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

<meta http-equiv="description" content="This is my page">

<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/HelloWorld.js'></script>

<style type="text/css">

td{

    border: solid 1px;

}

</style>

</head>

<body>

    <table>

        <tr>

            <td>无参无返回值</td>

            <td colspan="3"><input type="button" value="helloNN" onclick="helloNN();"></td>

        </tr>

        <tr>

            <td>有参无返回值</td>

            <td colspan="2"><input type="text" id="helloYNName"></td>

            <td><input type="button" value="helloYN" onclick="helloYN();"></td>

        </tr>

        <tr>

            <td>无参有返回值</td>

            <td><input type="button" value="helloNY" onclick="helloNY();"></td>

            <td colspan="2"><input type="text" id="helloNYValue"></td>

        </tr>

        <tr>

            <td>有参有返回值</td>

            <td><input type="text" id="helloYYName"></td>

            <td><input type="button" value="helloYY" onclick="helloYY();"></td>

            <td><input type="text" id="helloYYValue"></td>

        </tr>

    </table>

</body>

<script type="text/javascript">

//无参无返回值

function helloNN(){

    HelloWorld.helloNN();

}

//有参无返回值

function helloYN(){

    var name = dwr.util.getValue("helloYNName");

    HelloWorld.helloYN(name);

}

//无参有返回值

function helloNY(){

    HelloWorld.helloNY(function(data) {

        dwr.util.setValue("helloNYValue", data);

    });

}

//有参有返回值

function helloYY(){

    var name = dwr.util.getValue("helloYYName");

    HelloWorld.helloYY(name, function(data) {

        dwr.util.setValue("helloYYValue", data);

    });

}

</script>

</html>

　　必须引入的两个js，第二个js不是真实存在的js文件，而是项目启动访问后动态生成的js，这个js的名称HelloWorld，需与dwr.xml配置文件中javascript属性值一样，以下两个文件的顺序不能变：

<script type='text/javascript' src='dwr/engine.js'></script>

<script type='text/javascript' src='dwr/interface/HelloWorld.js'></script>

　　使用DWR还可以使用它的一个工具js：

<script type='text/javascript' src='dwr/util.js'></script>

　　引入此js后，可以使用它的一些简单的方法，比如获取元素的值，设置元素的值等，也可以使用普通js或者jquery来获取：

//获取指定id元素的值

var name = dwr.util.getValue("helloYYName");

//设置指定id元素的值为data

dwr.util.setValue("helloYYValue", data);

　　若不是用DWR的util工具，可以不需要引入util.js工具js。

+提示　　　　

　　engine.js在jar包中，具体位置为：org.directwebremoting包内

　　util.js也在jar包中，具体路径为：org.directwebremoting.ui.servlet包内

2.6 启动项目访问测试

　　最终项目目录结构如下：

　　启动项目后访问：http://localhost:8080/dwr/，将有如下页面：

　　按顺序测试并输入指定的值，最终结果如下：

　　控制台输出内容如下：

　　经测试无误。

三、原理简单分析

3.1.访问页面时

　　当访问带有DWR页面的时候，引入js的请求会被，匹配到web.xml中的DWR的servlet（org.directwebremoting.servlet.DwrServlet）：

<servlet>

    <servlet-name>dwr-invoker</servlet-name>

    <!-- 接收js的Ajax请求的servlet -->

    <servlet-class>org.directwebremoting.servlet.DwrServlet</servlet-class>

</servlet>

<servlet-mapping>

    <servlet-name>dwr-invoker</servlet-name>

    <!-- 拦截指定的URL -->

    <url-pattern>/dwr/*</url-pattern>

</servlet-mapping>

　　servlet会动态创建engine.js文件，并根据dwr/interface/HelloWorld.js，这种特定路径的文件名HelloWorld，去DWR配置文件dwr.xml中去查找相关配置：

<create creator="new" javascript="HelloWorld">

    <param name="class" value="yiwangzhibujian.HelloWorld" />

</create>

　　查找到配置的对象后，并根据对象的所有方法动态创建HelloWorld对象，也会将所有方法生成相应的js方法，生成的HelloWorld.js如下：

if (typeof dwr == 'undefined' || dwr.engine == undefined) throw new Error('You must include DWR engine

 before including this file');

(function() {

if (dwr.engine._getObject("HelloWorld") == undefined) {

var p;

p = {};

p.helloNN = function(callback) {

return dwr.engine._execute(p._path, 'HelloWorld', 'helloNN', arguments);

};

p.helloNY = function(callback) {

return dwr.engine._execute(p._path, 'HelloWorld', 'helloNY', arguments);

};

p.helloYN = function(p0, callback) {

return dwr.engine._execute(p._path, 'HelloWorld', 'helloYN', arguments);

};

p.helloYY = function(p0, callback) {

return dwr.engine._execute(p._path, 'HelloWorld', 'helloYY', arguments);

};

dwr.engine._setObject("HelloWorld", p);

}

})();

　　可以看到动态生成的对象包含java对象的所有方法，调用js方法会通过底层的Ajax调用相应的Java方法。

3.2 使用原因

DWR是开源免费的
封装Ajax实现，可以很方便的调用
除此以外还有反向Ajax，即服务器推送功能，后续介绍

　　这一篇简单的介绍了DWR，并展示了一个js调用Java的例子，可以看出DWR对Ajax封装的非常好，调用起来很方便。下面一篇将会介绍逆向Ajax的用法。

【DWR系列01】-DWR简介及入门例子的更多相关文章

Redux系列01：从一个简单例子了解action、store、reducer
其实,redux的核心概念就是store.action.reducer,从调用关系来看如下所示 store.dispatch(action) --> reducer(state, action) ...
SpagoBI系列----------[01]SpagoBI简介及安装步骤
商务智能套件SpagoBI提供一个基于J2EE的框架用于管理BI对象如报表.OLAP分析.仪表盘.记分卡以及数据挖掘模型等的开源BI产品.它提供的BI管理器能够控制.校验.验证与分发这些BI对象. ...
【DWR系列03】- DWR主要类详解
img { border: 1px solid black } 一.简介首先应该了解这个jar包主要的类,了解了类,就了解了DWR.DWR的在线javadoc:http://directwebrem ...
【DWR系列02】-DWR逆向Ajax即服务器推送
.literal { background-color: #f2f2f2; border: 1px solid #cccccc; padding: 1px 3px 0; white-space: no ...
C#刷遍Leetcode面试题系列连载（1） - 入门与工具简介
目录为什么要刷LeetCode 刷LeetCode有哪些好处? LeetCode vs 传统的 OJ LeetCode刷题时的心态建设 C#如何刷遍LeetCode 选项1: VS本地Debug + ...
Quartz入门例子简介从入门到菜鸟(一)
转: Quartz入门例子简介从入门到菜鸟(一) 2016年11月19日 22:58:24 爱种鱼的猫阅读数:4039 刚接触quartz这个词并不是在学习过程中...而是WOW里面的界面插件 ...
[.NET MVC4 入门系列01]Helloworld MVC 4 第一个MVC4程序
[.NET MVC4 入门系列01]Helloworld MVC 4 第一个MVC4程序一.练习项目: http://www.asp.net/mvc/tutorials/mvc-4/gettin ...
php从入门到放弃系列-01.php环境的搭建
php从入门到放弃系列-01.php环境的搭建一.为什么要学习php 1.php语言适用于中小型网站的快速开发: 2.并且有非常成熟的开源框架,例如yii,thinkphp等: 3.几乎全部的CMS ...
005 01 Android 零基础入门 01 Java基础语法 01 Java初识 05 Eclipse简介
005 01 Android 零基础入门 01 Java基础语法 01 Java初识 05 Eclipse简介 Eclipse是一款集成开发工具--IDE. 集成开发环境(IDE,Integrated ...

随机推荐

ES6箭头函数与展开运算符
箭头函数:省去了关键字function和return: eg: reduce=(a,b)=>a+b;//返回a+b的值 redduce=(a,b)=>{console.log(a);con ...
Web.xml详解(转)
这篇文章主要是综合网上关于web.xml的一些介绍,希望对大家有所帮助,也欢迎大家一起讨论. ---题记一. Web.xml详解: (一) web.xml加载过程(步骤) 首 ...
JQuery中$.each 和$(selector).each()的区别详解
PS:晚上在写页面时,发现了一个问题,$.each 和$(selector).each()有哪些区别?百度搜索关键词,首页显示出来一些前人的经验,总结一下,发上来. 1.$(selector).eac ...
Codeforces Round #352 (Div. 2) ABCD
Problems # Name A Summer Camp standard input/output 1 s, 256 MB x3197 B Different is Good ...
CMakeLists.txt
vtkRendering.libvtkCommon.lib ${VTK_LIBRARIES} vtkRendering vtkCommon
Mysql基础（二）
学习路线:数据约束-> 数据库的设计过程-> 存储过程的相关知识-> 触发器-> 权限管理 (一)数据约束 1.1.默认值的设置创建员工表emp 将默认地址设置为'中国'my ...
EBS 中HOST主机并发请求模板
#!/bin/sh########################################################################################### ...
nodeJS爬虫---慕课网
源代码一(爬取html源码) //引入http模块var http = require('http');//引入url地址var url = 'http://www.imooc.com/learn/2 ...
WebApi官方系列
一.入门 1.1Asp.Net WebApi2 入门 1.2WebApi2的Action返回值 1.3WebApi2自动生成帮助页二.路由 2.1WebApi2的路由规则 2.2WebApi2的Ac ...
SQL分页获取数据
SQL Server分页 select * from (') t Oracle分页 SELECT * FROM (' ORDER BY MaterialNM) t

【DWR系列01】-DWR简介及入门例子

一、DWR简介

二、DWR示例-js调用Java方法

2.1 创建Web项目

2.2 修改web.xml

2.3 创建被调用的Java类

2.4 创建DWR配置文件

2.5 创建JSP页面

+提示

2.6 启动项目访问测试

三、原理简单分析

3.1.访问页面时

3.2 使用原因

这一篇简单的介绍了DWR，并展示了一个js调用Java的例子，可以看出DWR对Ajax封装的非常好，调用起来很方便。下面一篇将会介绍逆向Ajax的用法。

【DWR系列01】-DWR简介及入门例子的更多相关文章

随机推荐

热门专题

+提示　　　　

　　这一篇简单的介绍了DWR，并展示了一个js调用Java的例子，可以看出DWR对Ajax封装的非常好，调用起来很方便。下面一篇将会介绍逆向Ajax的用法。