在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"
><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如下，簡單的很…
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中文版 上的介紹畫面…
