总是跟在开发商后面学习,系统使用了DWR技术,只好跟着开始琢磨这个东西,不为别的,只为能看懂他们的代码。命苦啊。
接下来就是记录了:
1、准备eclipse、tomcat,略过;新建web project,略过。
2、下载那个dwr.jar, 放到项目的WEB-INF\lib下面(j2ee的规定目录)。
3、修改WEB-INF\web.xml,在<web-app>中添加:
<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>
<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>
4、在WEB-INF\下新建dwr.xml配置文件,内容如下:
1 <!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting 2.0//EN" "http://getahead.org/dwr/dwr20.dtd">
2 <dwr>
3 <allow>
4 <create creator="new" javascript="JDate">
5 <param name="class" value="java.util.Date"/>
6 </create>
7 <create creator="new" javascript="Hello1">
8 <param name="class" value="com.myclass.Hello"/>
9 </create>
10 </allow>
11 </dwr>
2 <dwr>
3 <allow>
4 <create creator="new" javascript="JDate">
5 <param name="class" value="java.util.Date"/>
6 </create>
7 <create creator="new" javascript="Hello1">
8 <param name="class" value="com.myclass.Hello"/>
9 </create>
10 </allow>
11 </dwr>
5、新建Hello.java文件:
1 package com.myclass;
2
3 public class Hello {
4 public String Say(String msg)
5 {
6 return "hello," + msg;
7 }
8 public String Say()
9 {
10 return "hello,world";
11 }
12 }
2
3 public class Hello {
4 public String Say(String msg)
5 {
6 return "hello," + msg;
7 }
8 public String Say()
9 {
10 return "hello,world";
11 }
12 }
6、修改jsp代码:
1 <%@ page language="java" contentType="text/html; charset=UTF-8"
2 pageEncoding="UTF-8"%>
3 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
4 <html>
5 <head>
6 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
7 <script src='/test/dwr/interface/Hello1.js'></script>
8 <script src='/test/dwr/engine.js'></script>
9 <script src='/test/dwr/util.js'></script>
10 <title>hello world</title>
11 </head>
12 <script>
13 function hello()
14 {
15 var msg = dwr.util.getValue("msg");
16 if(msg!="")
17 Hello1.Say(msg,say);
18 else
19 Hello1.Say(say);
20 }
21 function say(str)
22 {
23 alert(str);
24 }
25 </script>
26 <body>
27 huha,My JSP!<br>
28 <input type="text" id="msg" name="msg"/>
29 <input type="button" value="click me" onclick="javascript:hello();"/>
30 </body>
31 </html>
2 pageEncoding="UTF-8"%>
3 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
4 <html>
5 <head>
6 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
7 <script src='/test/dwr/interface/Hello1.js'></script>
8 <script src='/test/dwr/engine.js'></script>
9 <script src='/test/dwr/util.js'></script>
10 <title>hello world</title>
11 </head>
12 <script>
13 function hello()
14 {
15 var msg = dwr.util.getValue("msg");
16 if(msg!="")
17 Hello1.Say(msg,say);
18 else
19 Hello1.Say(say);
20 }
21 function say(str)
22 {
23 alert(str);
24 }
25 </script>
26 <body>
27 huha,My JSP!<br>
28 <input type="text" id="msg" name="msg"/>
29 <input type="button" value="click me" onclick="javascript:hello();"/>
30 </body>
31 </html>
需要说明的是:
a、第8、9行是dwr提供的,util.js提供了有用的函数,如dwr.util.getValue()就是一个,获取页面上控件值。
b、第7行是dwr根据java的Hello类创造的js,在dwr.xml中定义,在17行中调用。可以很自由的把java类当成js类使用。
c、整个的调用过程是:客户端事件触发执行js代码1,该代码使用ajax方式调用服务器的java代码,返回后系统会将返回值作为参数再调用客户端js代码2。
d、第17行的调用需要说明一下,Say函数(代码1)有两个参数,一个是java类需要的入口参数,后一个是客户端的回调函数,该回调函数就是在Ajax方式下服务器代码执行完后需要调用客户端执行的js代码2。服务器java类执行完后的返回值会作为参数送入该回调函数。
以上只是dwr的hello world代码。