这几天一直在看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文件中:
6. 在src目录下面创建我们的服务类DWRService.java
7. 在WEB-INF目录下面创建xml文件,命名为dwr.xml,内容如下:
8. 在浏览器中输入:http://localhost:8080/dwr/dwr 即可访问到我们的服务:
如果出现上图样式,那么表明我们的服务发布正常了。点击进入DWRService,
在图中我们发现我们输入的字符串如果是error就会报错。如果我们输入的字符串不是error,那么就会显示dwr say hello to XXX 的界面。
但是,以上的在页面中我们使用的都是dwr官方帮我们做好的,而我们需要将dwr应用到自己的项目中。这个时候,我们就要看看点击网DWRService后进入的页面的源代码,我们就能够知道dwr是如何利用javascript直接与后台的java应用交互的,从而隐藏了ajax的细节。
下面是进入DWRService页面后的源代码,我们先找到sayHello的调用入口。我们容易的发现当我们点击按钮execute的时候,执行的是
这下我们明白了,它是将我们输入的值传入objectEval然后设置回调函数为replay0。这样,当调用成功的时候,就会执行回调函数replay0了。
9. 通过上面的分析,我们已经知道dwr是如何调用的了。就这样,在我们创建的web项目中的index.jsp中编写我们的调用代码:将
复制到我们的index.jsp中的head部分。我是把第一个/dwr修改成${pageContext.request.contextPath}。这样当我们项目名称改变得时候就不用在来修改index.jsp的源码了。
然后将上面源码中的objectEval复制到我们的index.jsp中。接着编写我们自己的回调函数replay。最后就是在index.jsp的body部分直接调用DwrService.sayHello 整个index.jsp代码如下:
访问:http://localhost:8080/dwr/index.jsp 现象如下:
10. 最后附上我项目的目录结构:源码就不附上了,你自己操作一遍,将让你受益更多。
继续学习、、、
谢谢阅读!
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文件中:
- <?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
- 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,内容如下:
- <?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的时候,执行的是
- οnclick='DwrService.sayHello(objectEval($("p00").value), reply0);'
这下我们明白了,它是将我们输入的值传入objectEval然后设置回调函数为replay0。这样,当调用成功的时候,就会执行回调函数replay0了。
- <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 οnlοad='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' οnclick='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中编写我们的调用代码:将
- <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代码如下:
- <%@ 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. 最后附上我项目的目录结构:源码就不附上了,你自己操作一遍,将让你受益更多。
继续学习、、、
谢谢阅读!