DWR简单入门

一、DWR简介

DWR是一个可以允许你去创建AJAX WEB站点的Java开源库。它可以让你在浏览器中的JavaScript代码调用Web服务器上的Java代码，就像在Java代码就在浏览器中一样。

二、Hello DWR

1、去官网下载jar包：http://www.directwebremoting.org/dwr/ ，下载说明：

dwr.jar 核心包。dwr.war 例子程序。dwr-src.jar 源代码

2、下载完jar包后，用myeclipse 建一个WebProject ，解压dwr.war 在WEB-INF 中的lib文件夹中拷贝commons-logging-1.0.4.jar、dwr.jar、log4j-1.2.12.jar三个包到自己项目中的lib文件夹下。

3、配置web.xml

 1 <?xml version="1.0" encoding="UTF-8"?>
 2 <web-app version="3.0" 
 3     xmlns="http://java.sun.com/xml/ns/javaee" 
 4     xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
 5     xsi:schemaLocation="http://java.sun.com/xml/ns/javaee 
 6     http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd">
 7   <display-name></display-name>    
 8   <servlet>
 9       <servlet-name>dwr-invoker</servlet-name>
10       <servlet-class>org.directwebremoting.servlet.DwrServlet</servlet-class>
11       <init-param>
12           <param-name>debug</param-name>
13           <param-value>true</param-value>
14       </init-param>
15   </servlet>
16   <servlet-mapping>
17       <servlet-name>dwr-invoker</servlet-name>
18       <url-pattern>/dwr/*</url-pattern>
19   </servlet-mapping>
20   <welcome-file-list>
21     <welcome-file>index.jsp</welcome-file>
22   </welcome-file-list>
23 </web-app>

4、编写dwr.xml 此文件与web.xml在同一个目录下

1 <?xml version="1.0" encoding="UTF-8"?>
2 <!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting 3.0//EN" "http://getahead.org/dwr/dwr30.dtd">
3 <dwr>
4   <allow>
5     <create creator="new" javascript="service" scope="application">
6         <param name="class" value="helloWorld.Service"></param>
7     </create>
8   </allow>
9 </dwr>

5、编写java代码

首先建包helloWorld,在此包下建立java类Service

1 package helloWorld;
2 
3 public class Service {
4     public String sayHello(String yourName) {
5         return "Hello World"+yourName;
6         
7     }
8 }

6、此时我们可以测试我们是否正确安装了dwr

把项目部署到tomcat 启动tomcat ，然后在地址栏输入http://localhost:8080/你的工程/dwr
如果安装正确会显示

Modules known to DWR:

service (NewCreator for helloWorld.Service)

此时你就完成了测试了，那么我们怎么用呢，点击service进入会发生什么呢？试试。。。。

我们发现了这个：

To use this class in your javascript you will need the following script includes:

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

In addition there is an optional utility script:

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

这三个script我们把它们引用到自己的jsp中。

那么我们开始编写jsp吧.

 1 <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
 2 <%
 3     String path = request.getContextPath();
 4     String basePath = request.getScheme() + "://"
 5             + request.getServerName() + ":" + request.getServerPort()
 6             + path + "/";
 7 %>
 8 
 9 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
10 <html>
11 <head>
12 <base href="<%=basePath%>">
13 
14 <title>DWR Practice</title>
15 <meta http-equiv="pragma" content="no-cache">
16 <meta http-equiv="cache-control" content="no-cache">
17 <!--
18     <link rel="stylesheet" type="text/css" href="styles.css">
19     -->
20 <script type='text/javascript' src='dwr/engine.js'></script>
21 <script type='text/javascript' src='dwr/util.js'></script>
22 <script type='text/javascript' src='dwr/interface/service.js'></script>
23 <script type="text/javascript">
24     function firstDwr(){
25         service.sayHello("jiuzi",callBackHello);
26     }
27     function callBackHello(data){
28         alert(data);
29     }
30 </script>
31 </head>
32 
33 <body>
34     <button onclick="firstDwr()">测试</button>
35 </body>
36 </html>

完成！！！

去试试，点击按钮会出现什么吧（Hello Worldjiuzi）；

posted on 2016-07-25 15:27 Sharpest 阅读(479) 评论(0) 编辑收藏举报