dwr1

最新推荐文章于 2018-12-14 23:58:46 发布

最新推荐文章于 2018-12-14 23:58:46 发布 · 206 阅读

文章标签：

#DWR #JavaScript #Ajax #Spring #Servlet #ViewUI

本文介绍如何使用DWR（Direct Web Remoting）实现简单的AJAX功能，包括设置环境、编写Java类和JavaScript交互代码，最终实现非同步请求的文字提示功能。

Java 開發人員與網頁設計人員的橋樑 DWR…呃！我懶得寫簡介了…直接來看看可以做什麼吧！…

請先到 http://getahead.ltd.uk/dwr/ 下載 dwr.jar，放到WEB-INF/lib下…

負責處理客戶端請求，並呼叫Java物件的是DWRServlet，DWR其實也有些Model 2的味道，只是View的這一層比較弱，因為放到客戶端的JavaScript應用程式中…

在web.xml中加入DWRServlet…
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<?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吧！
1
2
3
4
5
6
7

package onlyfun.caterpillar;

public class Hello {
 public String hello(String name) {
 return "哈囉！" + name + "！您的第一個DWR！";
 }
}

客戶端要呼叫這個Java物件，傳給它參數，而後傳回一個字串，客戶端再顯示這個字串，神奇？其實是要告訴DWRServlet這件事，這需要一個dwr.xml：
1
2
3
4
5
6
7
8
9
10
11

<?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物件。

來寫個客戶端的網頁，當中有一個輸入欄位…
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<!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()函式：
1
2
3
4
5
6
7
8

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檔案中的文字訊息，例如…
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

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準備好…
1
2
3

java=Java 學習筆記的介紹 … BlaBla...
spring=Spring 技術手冊的介紹…BlaBla...
ajax=Ajax in action 中文版的介紹…

唔！裏頭是中文字，自己用native2ascii轉換吧…這也不是重點…我們是要看DWR怎麼做到文字提示功能…

一樣的…要開放這個Book物件，在dwr.xml中…
1
2
3
4
5
6
7
8
9
10
11

<?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物件在整個應用程式階段都活著。

然後，客戶端寫個網頁…
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
31
32
33
34
35
36
37
38
39
40

<!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"><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"></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"><img
style= "border: 0px solid ; width: 80px; height: 110px; float: left;"
alt= "Spring 技術手冊" title= "Spring 技術手冊"
src= "images/SpringTech_S.jpg" hspace= "10" vspace= "2"></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"><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"></a></div>

 

 <div id= "info"></div>

</body>
</html>

重點在於onmouseover跟onmouseout，滑鼠移入與移出時會呼叫的函式，還有最下面的info，抓回來的書籍介紹會放到當中…

book.js如下，簡單的很…
1
2
3
4
5
6
7
8
9
10
11

function getBookData(ele) {
 Book.getDescription(ele.id, setBookData);
}

function setBookData(description) {
 DWRUtil.setValue( 'info', description);
}

function clearData() {
 DWRUtil.setValue( 'info', '');
}

程式很簡單，我懶得解釋了…XD

看一下畫面好了…這是滑鼠移到 Ajax in action中文版 上的介紹畫面…