`
8366
  • 浏览: 799862 次
  • 性别: Icon_minigender_1
  • 来自: 西安
社区版块
存档分类
最新评论

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

 

 

分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics