DWR2.0 HelloWorld
好早以前就使用过了这个开源的AJAX框架,今天写个文档来总结一下,昨天总结了Ejb2.0的简单用法,以后有时间就写写东西,加强下记忆,现在感觉忘性比记性大了,工作和生活都离不开Google了,想想那天要是不能上网了,杂整呀!
1.建立web工程目录结构
2.拷打dwr.jar到项目的lib目录下,添加到classpath下
3.在WEB-INF目录下的web.xml文件中加入dwr的配置
<?xml version="1.0" encoding="ISO-8859-1"?> <!DOCTYPE web-app PUBLIC "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN" "http://java.sun.com/dtd/web-app_2_3.dtd"> <web-app id="dwr"> <servlet> <servlet-name>dwr-invoker</servlet-name> <servlet-class>uk.ltd.getahead.dwr.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>
4.前台js负责处理客户端请求，并呼叫 Java 对象的是 DWRServlet ， DWR 其实也有些 Model 2 的味道，只是 View 的这一层比较弱，因为放到客户端的 JavaScript 应用程序中 … 我们做一个helloword的例子,使用前台的js函数呼叫后台的DWRServlet ,并把结果返回到前台界面上,这个过程整个都是异步的
5.前台界面上又两个文本输入诓,用户输入姓名和年龄后,交给后台的DWRServlet 处理,返回结果到前台界面的一个div上
6.先写后台DWRServlet
DWRTest.java
7.在dwr.xml中配置这个处理函数
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting 2.0//EN" "http://www.getahead.ltd.uk/dwr/dwr20.dtd"> <dwr> <allow> <create creator="new" javascript="MyTest" scope="application"> <param name="class" value="cn.com.xinli.test.DWRTest" /> </create> </allow> </dwr>
creator 设定为 new ，表示使用 DWRTest 的无参数建构子来生成对象， javascript 设定为 MyTest，表示客户端 JavaScript 程序可以使用 MyTest来呼叫对应的 cn.com.xinli.test.DWRTest物件。
8.写前台页面 test.jsp
<%@ page language="java" contentType="text/html; charset=GB18030"
pageEncoding="GB18030"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB18030">
<title>DWR - Test Home</title>
<script type='text/javascript' src='dwr/interface/MyTest.js'></script>
<script type='text/javascript' src='dwr/engine.js'></script>
<script type='text/javascript' src='dwr/util.js'></script>
<script language="javascript">
function hello()
{
var user = $('user').value;
var age = $('age').value;
MyTest.getMyName(user,age,callback);
}
function callback(msg)
{
DWRUtil.setValue('demo1', msg);
}
</script>
</head>
<body>
<h1>DWR Test Page</h1>
<input id="user" type="text" value='chenge'/>
<input id="age" type="text" value='25'/>
<input type='button' value='点击' onclick='hello();' />
<div id="demo1"></div>
</body>
</html>
注意:
a.上面的3个js必须要引入,他是dwr在内存中自动为我们生成的
b.在页面上可以是用 $('user').value; 的方式难道元素的值,类似于prototype.js的感觉
c.<script type='text/javascript' src='dwr/interface/MyTest.js'></script>
js的名字必须和dwr.xml声明的一致
处理过程:
当用户点击按钮的时候,将执行hello()js函数,这个函数内部接受两个参数姓名和年龄,把它传递到后台的DWRTest.java 中的public String getMyName(String name,String age)函数,这个函数在后台执行,返回一个结果到前台的 function callback(msg)js 函数,因此这个js函数必须有,然后使用DWRUtil.setValue('demo1', msg); 将结果设置到前台的div标签上!!
我们也可以在dwr的配置文件中 写下 ,将返回结果和一个javabean绑定,然后传递到前台
<convert match="cn.com.xinli.netb.ejb.init.bean.NewsBean" converter="bean"></convert>
DWRUtil 是个dwr很好的工具函数,可以上网看看它的使用方法,简化开发步骤!
还有一个问题,就是dwr的超时问题,我将线程挂起到200秒,结果依然能返回到前台,以前和晓伟做PET的时候,由于数据库操作时间过长,drw超时,前台拿不到后台的处理
近期学习计划:
1.在写一篇 JfreeChart的博客
2.国庆期间学习Ext