DWR 3.0 入门示例教程
2014-01-09 00:00
309 查看
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里面的方法。
相关文章推荐
- DWR 3.0 入门示例教程
- DWR3.0框架入门(3) —— ScriptSession的维护及优化
- 【OpenCV入门教程之一】 安装OpenCV:OpenCV 3.0、OpenCV 2.4.8、OpenCV 2.4.9 +VS 开发环境配置
- 【入门教程】使用Cocos2D 3.0构建简单的iPhone游戏
- 【OpenCV入门教程之一】 安装OpenCV:OpenCV 3.0、OpenCV 2.4.8、OpenCV 2.4.9 +VS 开发环境配置
- jQuery 入门教程(41): jQuery UI Tab 示例(一)
- jQuery 入门教程(43): jQuery UI Tooltip 示例
- vue3.0 CLI - 2.6 - 组件的复用入门教程
- jQuery 入门教程(24): jQuery UI Autocomplete示例(二)
- DWR3.0框架入门(3) —— ScriptSession的维护及优化
- ffmpeg入门系列教程(新API)示例 02
- DWR3.0框架入门(3) —— ScriptSession的维护及优化
- AngularJS入门教程之过滤器用法示例
- jQuery 入门教程(33): jQuery UI Dialog 示例(一)
- DWR入门教程
- jQuery 入门教程(25): jQuery UI Autocomplete示例(三)
- DWR3.0框架入门(2) —— DWR的服务器推送
- java入门教程-1.6第一个Java程序示例——Hello World!
- dwr 3.0 配置 + 不同参数,不同返回值调用方法 示例
- [JavaScript][AJAX][DWR](Dwr教程)dwr_ajax入门教程