`
8366
  • 浏览: 812801 次
  • 性别: 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

 

 

分享到:
评论

相关推荐

    DWR2.0中文文档

    - **第一个DWR程序:HelloWorld** - 将DWR库添加到项目中。 - 配置`web.xml`和`dwr.xml`文件,定义服务和转换规则。 - 编写服务接口和实现类。 - 测试DWR是否正常工作。 - 创建JSP页面,调用DWR服务。 #### ...

    DWR中文文档 (DWR 2.0)

    var helloWorld = new dwr.util.Callback({ // 创建回调对象 callback: function(result) { alert(result); // 显示结果 }, errorHandler: function(error) { console.log("Error occurred: " + error); } });...

    DWR的环境搭建与第一个入门程序HelloWorld

    在 `dwr.xml` 文件中,`&lt;create&gt;` 元素定义了一个 JavaScript 对象 `service`,它对应于服务器端的 `helloWorld.Service` 类。这样,你就可以在 JavaScript 中直接调用 `service.sayHello()` 方法,并得到服务器端的...

    DWR学习笔记

    &lt;script type='text/javascript' src='/learnAjax/dwr/interface/Helloworld.js'&gt; &lt;script type='text/javascript' src='/learnAjax/dwr/engine.js'&gt; &lt;script type='text/javascript' src='/learnAjax/dwr/util....

    DWR中文文档v0.9

    ### DWR中文文档v0.9 - DWR2.0 版本介绍 #### 前言 随着Ajax技术的兴起和发展,越来越多的开发者希望能够利用这项技术为用户提供更丰富的交互体验。然而,对于许多程序员来说,如何将Ajax与现有的应用程序进行有效...

    DWR: Easy AJAX for JAVA

    &lt;param name="class" value="helloworld.Service"/&gt; &lt;/dwr&gt; ``` - **&lt;dwr&gt; 标签**: 定义 DWR 配置文件的根元素。 - **&lt;allow&gt; 标签**: 指明哪些 Java 类可以被客户端访问。 - **&lt;create&gt; 标签**: 指定一个 Java...

    DWR是作为远程调用的ajax框架[参照].pdf

    **DWR2.0的特性**: 1. **安全性**:DWR提供了安全机制,允许配置哪些Java类和方法可以被JavaScript访问,以防止恶意攻击。 2. **自动类型转换**:DWR可以自动将Java对象转换为JavaScript对象,反之亦然,大大简化了...

    dwr消息推送功能

    myReverse.sendMes("Hello World!", function(response) { alert(response); }); myReverse.addListener('message', function(message) { alert(message); }); ``` #### 总结 通过以上步骤,可以实现基于 ...

    EXT2.0中文教程

    1.7. 入门之前,都看helloworld。 1.7.1. 直接使用下载的发布包 1.7.2. 只把必要的东西放进项目中 2. 震撼吧!让你知道ext表格控件的厉害。 2.1. 功能丰富,无人能出其右 2.2. 让我们搞一个grid出来耍耍吧。 2.3. ...

    ajax技术和dwr介绍

    return "Hello, World!"; } } ``` ```javascript // DWR配置 &lt;dwr-engine&gt; &lt;/dwr-engine&gt; ``` ```javascript // JavaScript调用 MyService.getGreeting(function(greeting) { alert(greeting); }); `...

    AJAX学习资料之-DWR中文手册

    ##### 3.3 示例:HelloWorld 这是一个简单的示例,用于演示如何使用DWR实现客户端与服务器之间的通信。 1. **Service类**:创建一个名为`HelloService`的类,其中包含一个返回字符串的方法。 2. **DWR配置**:在`...

    通过DWR实现在HTML和Java Script中直接调用服务端的Java Bean

    dwr.util.call("service.testSay", ["Hello World"], function(result) { alert(result); }); } ``` 通过上述脚本,当用户触发某个事件时(例如点击按钮),将调用`testFunction`函数,进而调用服务端的`...

    dwr相关文件实用指南,请仔细查看

    DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD DirectWebRemoting 2.0//EN" "http://getahead.org/dwr/dwr20.dtd"&gt; &lt;dwr&gt; &lt;/dwr&gt; ``` 这里的`&lt;create&gt;`标签定义了客户端可以创建的对象实例。例如...

    Ext 开发指南 学习资料

    1.6. 入门之前,都看helloworld。 1.6.1. 直接使用下载的发布包 1.6.2. 只把必要的东西放进项目中 2. 震撼吧!让你知道ext表格控件的厉害。 2.1. 功能丰富,无人能出其右 2.2. 让我们搞一个grid出来耍耍吧。 2.3. ...

Global site tag (gtag.js) - Google Analytics