简化ajax的使用之DWR学习

来源：互联网发布：淘宝网如何货到付款编辑：程序博客网时间：2024/05/10 18:32

这几天一直在看web service 和 axis2 。感觉这趟水太浑，太深，整个脑袋瓜晕晕的。不过还行，也算是进步了。正如某校长在毕业典礼上的致辞说过“人生就像高压锅。压力大了，自然就熟了”。我觉得挺在理的，但是大家都明白，压力也不能太大，不然就要发生爆炸事件了。所以呢。我今天就看了下DWR，换换口味。我觉得如果按照官方文档也是蛮简单的。http://directwebremoting.org/dwr/introduction/getting-started.html

DWR就是要简化ajax的调用。说白了也就是在javascript直接用配置的java类调用，但是调用的返回值要在回调函数中获得。

该文按照步骤手把手教你dwr的使用：
1. 下载dwr的jar包：http://directwebremoting.org/dwr/downloads/index.html
2. 开发环境myeclipse9.0，当然如果你使用其他版本的myeclipse也行。
3. 创建一个web项目，命名为dwr
4. 将我们下载的dwr.jar拷贝到我们项目的WEB-INF/lib目录下。同时由于我们的项目采用的是commons-loggin，所以我们也需要将commons-logging的jar包拷贝到lib目录下
5. 将dwr的servlet配置到我们的web.xml文件中：

Java代码  
<?xml version="1.0" encoding="UTF-8"?>  
<web-app version="3.0" xmlns="http://java.sun.com/xml/ns/javaee"  
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"  
    xsi:schemaLocation="http://java.sun.com/xml/ns/javaee   
    http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd">  
    <display-name></display-name>  
    <welcome-file-list>  
        <welcome-file>index.jsp</welcome-file>  
    </welcome-file-list>  
      
    <servlet>  
        <display-name>DWR Servlet</display-name>  
        <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>  
  
</web-app>  

6. 在src目录下面创建我们的服务类DWRService.java

Java代码  
package org.piedra.dwr.service;  
  
public class DWRService {  
    public String sayHello(String name) throws Exception{  
        if("error".equals(name)) {  
            throw new Exception();  
        }  
        return "dwr say hello to " + name;  
    }  
}  

7. 在WEB-INF目录下面创建xml文件，命名为dwr.xml，内容如下:

Java代码  
<?xml version="1.0" encoding="UTF-8"?>  
<!DOCTYPE dwr PUBLIC  
    "-//GetAhead Limited//DTD Direct Web Remoting 3.0//EN"  
    "http://getahead.org/dwr/dwr30.dtd">  
<dwr>  
  <allow>  
  
    <create creator="new" javascript="JDate">  
      <param name="class" value="java.util.Date"/>  
    </create>  
    <create creator="new" javascript="DwrService">  
      <param name="class" value="org.piedra.dwr.service.DWRService"/>  
    </create>  
  
  </allow>  
</dwr>  

8. 在浏览器中输入：http://localhost:8080/dwr/dwr 即可访问到我们的服务：

如果出现上图样式，那么表明我们的服务发布正常了。点击进入DWRService，

在图中我们发现我们输入的字符串如果是error就会报错。如果我们输入的字符串不是error，那么就会显示dwr say hello to XXX 的界面。
但是，以上的在页面中我们使用的都是dwr官方帮我们做好的，而我们需要将dwr应用到自己的项目中。这个时候，我们就要看看点击网DWRService后进入的页面的源代码，我们就能够知道dwr是如何利用javascript直接与后台的java应用交互的，从而隐藏了ajax的细节。
下面是进入DWRService页面后的源代码，我们先找到sayHello的调用入口。我们容易的发现当我们点击按钮execute的时候，执行的是

Java代码  
onclick='DwrService.sayHello(objectEval($("p00").value), reply0);'  

这下我们明白了，它是将我们输入的值传入objectEval然后设置回调函数为replay0。这样，当调用成功的时候，就会执行回调函数replay0了。

Java代码  
<html>  
<head>  
  <title>DWR Test</title>  
  <!-- These paths use .. so that they still work behind a path mapping proxy. The fully qualified version is more cut and paste friendly. -->  
  <script type='text/javascript' src='../engine.js'></script>  
  <script type='text/javascript' src='../util.js'></script>  
  <script type='text/javascript' src='../interface/DwrService.js'></script>  
  <script type='text/javascript'>  
    
  
  function objectEval(text)  
  {  
    // eval() breaks when we use it to get an object using the { a:42, b:'x' }  
    // syntax because it thinks that { and } surround a block and not an object  
    // So we wrap it in an array and extract the first element to get around  
    // this.  
    // This code is only needed for interpreting the parameter input fields,  
    // so you can ignore this for normal use.  
    // The regex = [start of line][whitespace]{[stuff]}[whitespace][end of line]  
    text = text.replace(/\n/g, ' ');  
    text = text.replace(/\r/g, ' ');  
    if (text.match(/^\s*\{.*\}\s*$/))  
    {  
      text = '[' + text + '][0]';  
    }  
    return eval(text);  
  }  
  
  </script>  
  <style>  
    input.itext { font-size: smaller; background: #E4E4E4; border: 0; }  
    input.ibutton { font-size: xx-small; border: 1px outset; margin: 0px; padding: 0px; }  
    span.reply { background: #ffffdd; white-space: pre; }  
    span.warning { font-size: smaller; color: red; }  
  </style>  
</head>  
<body onload='dwr.util.useLoadingMessage()'>  
<h2>Methods For: DwrService (NewCreator for org.piedra.dwr.service.DWRService)</h2>  
To use this class in your javascript you will need the following script includes:  
  
<pre>  
  <script type='text/javascript' src='<a href='/dwr/dwr/engine.js'>/dwr/dwr/engine.js</a>'></script>  
  <script type='text/javascript' src='<a href='/dwr/dwr/interface/DwrService.js'>/dwr/dwr/interface/DwrService.js</a>'></script>  
</pre>  
In addition there is an optional utility script:  
  
<pre>  
  <script type='text/javascript' src='<a href='/dwr/dwr/util.js'>/dwr/dwr/util.js</a>'></script>  
</pre>  
Replies from DWR are shown with a yellow background if they are simple or in an alert box otherwise.<br/>  
The inputs are evaluated as Javascript so strings must be quoted before execution.  
  
<li>  
  
  
  sayHello(    <input class='itext' type='text' size='10' value='""' id='p00' title='Will be converted to: java.lang.String'/>  );  
  <input class='ibutton' type='button' onclick='DwrService.sayHello(objectEval($("p00").value), reply0);' value='Execute'  title='Calls DwrService.sayHello(). View source for details.'/>  
  <script type='text/javascript'>  
    var reply0 = function(data)  
    {  
      if (data != null && typeof data == 'object') alert(dwr.util.toDescriptiveString(data, 2));  
      else dwr.util.setValue('d0', dwr.util.toDescriptiveString(data, 1));  
    }  
  </script>  
  <span id='d0' class='reply'></span>  
  
  
</li>  
</ul>  
<h2>Other Links</h2>  
[list]  
[*]Back to <a href='/dwr/dwr/'>module index</a>.  
  
[/list]  
<div>  
  
<h2>Fixing Issues</h2>  
  
<h3><a name="missingConverter">Warning: No Converter for XXX.</a></h3>  
  
  dwr.xml does not have an allow entry that enables conversion of this type to  
  Javascript. The most common cause of this problem is that XXX is a java bean  
  and bean marshalling has not been enabled. Bean marshalling is disabled by  
  default for security reasons.  
  
  
  
  To enable marshalling for a given bean add the following line to the allow  
  section of your dwr.xml file:  
  
  
<pre>  
<convert converter="bean" match="XXX"/>  
</pre>  
  
  It is also possible to enable marshalling for an entire package or hierachy  
  of packages using the following:  
  
  
<pre>  
<convert converter="bean" match="package.name.*"/>  
</pre>  
  
<h3><a name="overloadedMethod">Warning: overloaded methods are not recommended</a></h3>  
  
  Javascript does not support overloaded methods, so the javascript file  
  generated from this class will contain two methods the second of which will  
  replace the first. This is probably not what you wanted.  
  
  
  
  It is best to avoid overloaded methods when using DWR.  
  
  
  
<h3><a name="excludedMethod">Warning: methodName() is excluded:</a></h3>  
  
  The methods may be excluded explicitly with an <exclude> element in  
  dwr.xml or excluded implicitly by not being mentioned in an <include>  
  element. Or the method may be defined in <code>java.lang.Object</code> -  
  methods defined here may not be exported.  
  
  
  
  If methods are excluded using <include> or <exclude> then no  
  JavaScript proxy will be generated. To allow testing of methods that should  
  not be accessible, add an init-param to WEB-INF/web.xml with the name/value  
  allowImpossibleTests=true.  
  
  
  
</div>  
</body></html>  

9. 通过上面的分析，我们已经知道dwr是如何调用的了。就这样，在我们创建的web项目中的index.jsp中编写我们的调用代码：将

Java代码  
<script type='text/javascript' src='/dwr/dwr/engine.js'></script>  
 <script type='text/javascript' src='/dwr/dwr/interface/DwrService.js'></script>  

复制到我们的index.jsp中的head部分。我是把第一个/dwr修改成${pageContext.request.contextPath}。这样当我们项目名称改变得时候就不用在来修改index.jsp的源码了。
然后将上面源码中的objectEval复制到我们的index.jsp中。接着编写我们自己的回调函数replay。最后就是在index.jsp的body部分直接调用DwrService.sayHello 整个index.jsp代码如下：

Java代码  
<%@ page language="java" import="java.util.*" pageEncoding="ISO-8859-1"%>  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
<html>  
<head>  
<script type='text/javascript'  
    src='${pageContext.request.contextPath }/dwr/engine.js'></script>  
<script type='text/javascript'  
    src='${pageContext.request.contextPath }/dwr/interface/DwrService.js'></script>  
 <script type='text/javascript' src='${pageContext.request.contextPath }/dwr/util.js'></script>  
  
<script type='text/javascript'>  
    function objectEval(text)  
    {  
        text = text.replace(/\n/g, ' ');  
        text = text.replace(/\r/g, ' ');  
        if (text.match(/^\s*\{.*\}\s*$/))  
        {  
          text = '[' + text + '][0]';  
        }  
        return eval(text);  
    }  
    
    var reply = function(data){  
        alert(data);  
    }  
    
  </script>  
</head>  
  
<body>  
    <script type="text/javascript">  
        DwrService.sayHello("lwb",{  
        callback:reply,  
        errorHandler:function(message) { alert("error : " + message); }  
        });  
    </script>  
</body>  
</html>  

访问：http://localhost:8080/dwr/index.jsp 现象如下:

10. 最后附上我项目的目录结构：源码就不附上了，你自己操作一遍，将让你受益更多。

继续学习、、、

谢谢阅读！