Java 開發人員與網頁設計人員的橋樑 DWR…呃！我懶得寫簡介了…直接來看看可以做什麼吧！…
請先到 http://getahead.ltd.uk/dwr/ 下載 dwr.jar，放到WEB-INF/lib下…
負責處理客戶端請求，並呼叫Java物件的是DWRServlet，DWR其實也有些Model 2的味道，只是View的這一層比較弱，因為放到客戶端的JavaScript應用程式中…
在web.xml中加入DWRServlet…
1234567891011121314151617181920212223 <?xml version="1.0" encoding="UTF-8"?><web-app id="WebApp_ID" version="2.4" xmlns="http://java.sun.com/xml/ns/j2ee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd"> <display-name> ajaxDWR</display-name> <servlet> <servlet-name>dwr-invoker</servlet-name> <servlet-class>uk.ltd.getahead.dwr.DWRServlet</servlet-class> <init-param> <description> </description> <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>
接下來寫個簡單的Hello吧！
1234567 package onlyfun.caterpillar; public class Hello { public String hello(String name) { return "哈囉！" + name + "！您的第一個DWR！"; }}
客戶端要呼叫這個Java物件，傳給它參數，而後傳回一個字串，客戶端再顯示這個字串，神奇？其實是要告訴DWRServlet這件事，這需要一個dwr.xml：
1234567891011 <?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="Hello"> <param name="class" value="onlyfun.caterpillar.Hello" /> </create> </allow></dwr>
creator設定為new，表示使用Hello的無參數建構子來生成物件，javascript設定為Hello，表示客戶端JavaScript程式可以使用Hello來呼叫對應的onlyfun.caterpillar.Hello物件。
來寫個客戶端的網頁，當中有一個輸入欄位…
12345678910111213141516171819 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><meta http-equiv="Content-Type" content="text/html; charset=BIG5"> <title>第一個DWR程式</title> <script type='text/javascript' src='dwr/interface/Hello.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='hello.js'></script></head><body> <input id="user" type="text" /><input type='button' value='哈囉' onclick='hello();' /> <div id="result"></div> </body></html>
dwr/interface/Hello.js是由DWRServlet根據dwr.xml中的設定生成的，engine.js負責客戶端伺服端溝通，util.js是一些好用的JavaScript程式，可以讓您少寫很多JavaScript。
hello.js是我們自訂的函式，按下按鈕後，會呼叫當中的hello()函式：
12345678 function hello() { var user = $('user').value; Hello.hello(user, callback);} function callback(msg) { DWRUtil.setValue('result', msg);}
${'user'}取得輸入欄位的DOM物件，value取得當中的欄位值，而後呼叫Hello.hello()，並將value當作參數傳送… 結果是呼叫Server端的Hello Java物件，當結果傳回後，會呼叫JavaScript的callback函式，DWRUtil的setValue()方法會將傳回的msg設定給指定 id的DOM，結果就是…啥！AJAX的功能在哪…就這個而言就是發出非同步請求，而回應不用Refresh頁面啦！
好啦！這個無聊的Hello DWR可以做啥！…XD
已經可以讓您做個簡單的文字提示功能了…像這個…
http://caterpillar.onlyfun.net/Gossip/index.html
把滑鼠指到書的照片上，會顯示提示文字，這些提示文字本身不是存在網頁上的，而是在Server端，當滑鼠指到書上時，會用Request object去抓，然後顯示在框框中…
當然！我的網站只支援PHP，所以那不是DWR完成的功能，而且我是直接用Request object跟DOM去慢慢刻的…對初學者來說已經有些麻煩了…XD
不過！用DWR就可以很簡單完成這個功能…
先寫個Java類別吧！會抓properties檔案中的文字訊息，例如…
123456789101112131415 package onlyfun.caterpillar; import java.util.ResourceBundle; public class Book { private ResourceBundle resource; public Book() { resource = ResourceBundle.getBundle("book"); } public String getDescription(String key) { return resource.getString(key); }}
從程式中就知道，它會去抓book_zh_TW.properties的資料，這不是重點啦！只是Java的一個功能，我們要看的是DWR，不過先把book_zh_TW.properties準備好…
123 java=Java 學習筆記的介紹 … BlaBla...spring=Spring 技術手冊的介紹…BlaBla...ajax=Ajax in action 中文版的介紹…
唔！裏頭是中文字，自己用native2ascii轉換吧…這也不是重點…我們是要看DWR怎麼做到文字提示功能…
一樣的…要開放這個Book物件，在dwr.xml中…
1234567891011 <?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="Book" scope="application"> <param name="class" value="onlyfun.caterpillar.Book"/> </create> </allow></dwr>
scope設定為application，表示這個Book物件在整個應用程式階段都活著。
然後，客戶端寫個網頁…
12345678910111213141516171819202122232425262728293031323334353637383940 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><meta http-equiv="Content-Type" content="text/html; charset=BIG5"> <script type='text/javascript' src='dwr/interface/Book.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='book.js'></script><title>個人著／譯作</title></head><body> <div id="ajax" onmouseover="getBookData(this);" onmouseout="clearData();"><a href="http://www.gotop.com.tw/waweb2004/home/home.aspx?pg=HM010X&bn=AXP011800"><small><img style="border: 0px solid ; width: 80px; height: 110px; float: left;" alt="Ajax in action 中文版" title="Ajax in action 中文版" src="images/ajax_in_action_c.jpg" hspace="10" vspace="2"></small></a></div> <div id="spring" onmouseover="getBookData(this);" onmouseout="clearData();"><a href="http://www.gotop.com.tw/waweb2004/home/home.aspx?pg=HM010X&bn=ACL021000"><small><img style="border: 0px solid ; width: 80px; height: 110px; float: left;" alt="Spring 技術手冊" title="Spring 技術手冊" src="images/SpringTech_S.jpg" hspace="10" vspace="2"></small></a></div> <div id="java" onmouseover="getBookData(this);" onmouseout="clearData();"><a href="http://www.gotop.com.tw/waweb2004/home/home.aspx?pg=HM010X&bn=ACL020931"><small><img style="border: 0px solid ; width: 80px; height: 110px; float: left;" alt="Java 學習筆記" title="Java 學習筆記" src="images/JavaGossip_Cover_Small.jpg" hspace="10" vspace="2"></small></a></div> <br/><br/><br/><br/><br/><br/> <div id="info"></div> </body></html>
重點在於onmouseover跟onmouseout，滑鼠移入與移出時會呼叫的函式，還有最下面的info，抓回來的書籍介紹會放到當中…
book.js如下，簡單的很…
1234567891011 function getBookData(ele) { Book.getDescription(ele.id, setBookData);} function setBookData(description) { DWRUtil.setValue('info', description);} function clearData() { DWRUtil.setValue('info', '');}
程式很簡單，我懶得解釋了…XD
看一下畫面好了…這是滑鼠移到 Ajax in action中文版 上的介紹畫面…
本文来自CSDN博客，转载请标明出处：http://blog.csdn.net/caterpillar_here/archive/2006/09/06/1186566.aspx
分享到：
相关推荐
（网络整理资料）DWR入门与应用，手把手教你从配置到实例的应用
DWR_入门与应用-林信良(良葛格)
dwr实例 - 这是本人，开发的：小游戏 [大家一起来赚钱] 本例子可做为dwr入门级应用； 有什么问题请和我沟通；
本资料详细讲述了dwr的配置及简单常见的应用，方便快速上手！
请先到 http://getahead.ltd.uk/dwr/ 下载 dwr.jar ，放到 WEB-INF/lib 下 … 负责处理客户端请求，并呼叫 Java 对象的是 DWRServlet ， DWR 其实也有些 Model 2 的味道，只是 View 的这一层比较弱，因为放到客户端...
基于dwr框架的web应用的设计与使用，是介绍dwr入门的不错的文章。
内容包括： DWR教程.txt DWR实例教程.txt DWR学习.txt DWR应用总结.txt DWR购物车实例 DWR与界面开发 一个简单的例子 DWR 入门与应用－林信良（良葛格）.doc
DWR是是关于开发web2.0网站实现动态交互性，增强用户体验度的一个Ajax框架技术，本文档共10章，其内容依次为:第1章.DWR入门，含3小节;第2章.web.xml配置，含6小节;第3章.dwr.xml配置，含4小节;第4章.整合，含8小节;...
AJAX中的DWR的入门和应用，与大家一起共享
DWR基础应用教程。比较基础知识，入门用
这个是dwr的初级出门例子但对现在已有的应用来说已经够了
ssh+dwr 整合案例.4个框架整合应用入门案列
DWR中文文档和dwr.jar包 DWR中文文档v0.9Ajax向我们袭来的时候，很多写代码的程序员看到了Ajax的发展前景，但并不是每一个程序员都能将页面与代码完美整合在一起，DOM、CSS、javascript让人眼花缭乱，不知从何下手。...
一个很基本的dwr应用示例，很好地说明了dwr工作原理，附工程源代码
DWR是一个Java库，能够使浏览器中的JavaScript和服务器上的Java进行互动，并尽可能简单地调用Java的方法。本文档讲一下关于这个框架的入门配置及应用，服务器采用tomcat
经过本人测试，dwr教程高质量教程，一个星期之内，从入门到实际的项目应用。
Java 开发人员与网页设计人员的桥梁 DWR…呃！...负责处理客户端请求，并呼叫Java对象的是DWRServlet，DWR其实也有些Model 2的味道，只是View的这一层比较弱，因为放到客户端的JavaScript应用程序中…
快速入门dwr能够然你很容易的理解dwr比快速应用
DWR入门 8 1.1 简介 8 1.2 第一个DWR程序：Hello World 9 1.2.1 将DWR放入你的工程 9 1.2.2 编辑配置文件 9 1.2.3 编写service 10 1.2.4 测试DWR 10 1.2.5 编写一个jsp 11 1.3 本...