假設您要從資料庫中查詢出一些字串，然後填寫到表單的下拉選單中。
例如一個示意的Java程式如下：
1
2
3
4
5
6
7
8
|
package onlyfun.caterpillar;
public class Option {
public String[] getOptions() {
return new String[] {"良葛格", "毛美眉", "米小狗"};
}
}
|
傳回的字串陣列，您要填寫到下拉選單中，當然，首先我們要在dwr.xml中開發這個物件…
1
2
3
4
5
6
7
8
9
10
|
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting 1.0//EN" "http://www.getahead.ltd.uk/dwr/dwr10.dtd">
<dwr>
<allow>
<create creator="new" javascript="OPT">
<param name="class" value="onlyfun.caterpillar.Option"/>
</create>
</allow>
</dwr>
|
這是我們的網頁…
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=BIG5">
<script src="option.js" type="text/javascript"></script>
<script src="dwr/interface/OPT.js" type="text/javascript"></script>
<script src="dwr/engine.js" type="text/javascript"></script>
<script src="dwr/util.js" type="text/javascript"></script>
</head>
<body>
選項: <select id="opts"></select>
</body>
</html>
|
傳回的字串陣列會填入opts這個select中，我們的option.js如下…
1
2
3
4
5
6
7
8
|
window.onload = function() {
OPT.getOptions(populate);
};
function populate(list){
DWRUtil.removeAllOptions("opts");
DWRUtil.addOptions("opts", list);
}
|
夠簡單了…不需要解釋了…
看一下結果…
好啦！我知道有人在說了，這個程式有夠無聊…
改一下！就是個不錯的範例了，例如連動方塊，唔！在Ajax in action中叫啥？Dynamic double combo？…
假設一個會去從資料庫中查詢資料的Java程式示意如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
|
package onlyfun.caterpillar;
import java.util.Map;
import java.util.TreeMap;
public class Bike {
private Map<String, String[]> bikes;
public Bike() {
bikes = new TreeMap<String, String[]>();
bikes.put("2000", new String[] {"2000 T1", "2000 T2", "2000 T3"});
bikes.put("2001", new String[] {"2001 A1", "2001 A2"});
bikes.put("2002", new String[] {"2002 BW1", "2002 BW2", "2002 BW"});
bikes.put("2003", new String[] {"2003 S320"});
bikes.put("2004", new String[] {"2004 TA1", "2004 TA2", "2004 TA3"});
}
public String[] getYears() {
String[] keys = new String[bikes.size()];
int i = 0;
for(String key : bikes.keySet()) {
keys[i++] = key;
}
return keys;
}
public String[] getBikes(String year) {
return bikes.get(year);
}
}
|
getYears()跟getBkies()分別表示產品的年份跟型號，這邊用Map模擬，實際上資料是來自資料庫的查詢。
一樣的，在dwr.xml中設定：
1
2
3
4
5
6
7
8
9
10
|
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting 1.0//EN" "http://www.getahead.ltd.uk/dwr/dwr10.dtd">
<dwr>
<allow>
<create creator="new" javascript="Bike" scope="application">
<param name="class" value="onlyfun.caterpillar.Bike"/>
</create>
</allow>
</dwr>
|
我們會有個腳踏車年份與型號查詢頁面：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=BIG5">
<title>Insert title here</title>
<script type='text/javascript' src='dwr/interface/Bike.js'></script>
<script type='text/javascript' src='dwr/engine.js'></script>
<script type='text/javascript' src='dwr/util.js'></script>
<script type='text/javascript' src='bike.js'></script>
</head>
<body onload="refreshYearList();">
年份：<select id="years" onchange="refreshBikeList();"></select><br/><br/>
型號：<select id="bikes"></select><br/>
</body>
</html>
|
注意，在選完第一個年份後，會觸發onchange事件，接著第二個下拉選單會自動填上對應年份的型號，而不是按鈕按下，再去取得第二個下拉選單，然後refresh...blah...blah...
bike.js如下…
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
function refreshYearList() {
Bike.getYears(populateYearList);
}
function populateYearList(list){
DWRUtil.removeAllOptions("years");
DWRUtil.addOptions("years", list);
refreshBikeList();
}
function refreshBikeList() {
var year = $("years").value;
Bike.getBikes(year, populateBikeList);
}
function populateBikeList(list){
DWRUtil.removeAllOptions("bikes");
DWRUtil.addOptions("bikes", list);
}
|
一樣很簡單…
看個無聊的畫面…XD 
分享到：
相关推荐
在这个"DWR2相关资料"的压缩包中，我们可能找到了一个完整的DWR2演示项目，这个项目是为在MyEclipse环境中部署而设计的。MyEclipse是一款强大的集成开发环境（IDE），特别适合于Java EE项目的开发，包括Web应用。 ...
dwr 2.jar dwr 2.jar
这本书《Practical DWR 2 Projects》由Frank Zammetti撰写，旨在帮助读者深入理解和应用DWR技术。 书中可能涵盖的知识点包括： 1. **DWR基础**：介绍DWR的基本概念，如Reverse Ajax、远程对象（Remote Objects）...
### Spring 2中整合DWR 2：详细解析与实践 #### 一、Spring与DWR简介 在探讨如何在Spring 2框架中整合DWR 2之前，我们首先需要了解这两个技术的基本概念。 - **Spring框架**：Spring是目前Java开发中最流行的开源...
DWR (Direct Web Remoting) 是一个开源的Java库，它允许JavaScript在浏览器端与服务器端的Java对象进行...在压缩包中的"DWR"文件可能包含了DWR 2的相关文档、示例代码或配置文件，这些都是学习和使用DWR 2的重要资源。
这个压缩包包含了DWR的三个主要版本：DWR1.0、DWR2.0和DWR3.0的jar包，这些jar包是运行DWR应用的核心组件。 DWR1.0： DWR1.0是DWR项目的早期版本，主要目标是简化Web应用中的异步通信。在这个版本中，DWR提供了一个...
**DWR2.jar** 是DWR的主要库文件，包含了DWR框架的所有核心组件和实现。这个JAR文件包含了许多类，如`DWRServlet`，它是DWR与HTTP请求交互的核心组件，以及各种用于转换数据类型、安全处理和错误处理的工具类。...
DWR2是DWR的一个版本，它在DWR的基础上进行了改进和扩展，提高了性能和功能。在DWR2中，与Spring2框架的集成可以让开发者充分利用Spring的依赖注入、事务管理等优势，同时利用DWR的异步AJAX能力，创建出更加灵活、...
Struts2和DWR2是两个在Web开发中常用的开源框架，它们分别处理不同的层面：Struts2专注于MVC（模型-视图-控制器）架构的实现，而DWR（Direct Web Remoting）则用于在浏览器和服务器之间实现异步的JavaScript到Java的...
**标题解析：** "LogViewer（DWR2）" 指的是一个基于DWR2技术的日志查看器示例项目。DWR (Direct Web Remoting) 是一个开源的JavaScript库，它允许Web应用程序在客户端和服务器之间进行实时通信，无需使用Ajax或页面...
2. **配置DWRServlet**：在web.xml中配置DWRServlet，指定DWR配置文件的位置，如dwrcfg.xml或dwr.xml，并可配置多个config开头的文件。 3. **debug参数**：在web.xml中可设置debug参数，开启后可测试配置的DWR方法。...
DWR2是DWR的第二个主要版本，提供了许多改进和新特性，使得开发人员能够更轻松地实现Ajax（Asynchronous JavaScript and XML）功能。 在"Dwr2推送Demo"中，我们主要关注的是DWR的实时推送功能。在传统的Web应用中，...
标题 "Spring2_DWR2_Login" 暗示我们在这里讨论的是如何在 Spring 2.x 版本中集成 DWR 2.x 版本，特别是关于如何进行登录功能的实现。通常，DWR 的集成会涉及到一个 `dwr.xml` 配置文件，但在这个例子中，我们将探讨...
DWR 2 API是这个框架的一个关键版本，提供了丰富的功能和改进，使得开发者能够更高效地构建动态Web应用。 在"**dwr 2 api chm格式**"文档中，你可以找到关于DWR 2.0.1 API的详细说明。CHM（Microsoft Compiled ...
《Practical DWR 2 Projects》是一本关于Direct Web Remoting (DWR)技术实践的书籍，对于深入了解和掌握DWR具有很高的参考价值。DWR是一种JavaScript和Java之间的开源通信库，它允许Web应用程序实现双向实时通信，...
Spring2结合DWR2的用户注册的例子 本文将讲解如何使用Spring2框架和DWR2技术实现用户注册...通过这个例子，我们可以看出，使用Spring2框架和DWR2技术可以轻松地实现用户注册功能，提高Web应用程序的开发效率和性能。
**整合SSH的Dwr2实例详解** 在现代Web开发中，为了实现丰富的用户交互和高效的数据传输，常常会采用各种技术栈的组合。SSH（Spring、Struts、Hibernate）是Java Web开发中的一种经典组合，提供了强大的MVC架构支持...
**DWR2的HelloWorld详解** DWR (Direct Web Remoting) 是一个开源JavaScript库，它允许在浏览器和服务器之间进行直接的、实时的通信，从而实现Web应用程序的富客户端功能。DWR2是其第二个主要版本，相较于早期版本...