把滑鼠指到書的照片上，會顯示提示文字，這些提示文字本身不是存在網頁上的，而是在Server端，當滑鼠指到書上時，會用Request object去抓，然後顯示在框框中…先寫個Java類別吧！會抓properties檔案中的文字訊息
package
onlyfun.caterpillar;
import
java.util.ResourceBundle;
public
class
Book
{
??
private
ResourceBundle resource;
??
??
public
Book()
{
????resource = ResourceBundle.getBundle(
"book_zh_TW"
);
??
}
????????
??
public
String getDescription(String key)
{
????
return
resource.getString(key);
??
}
}
從程式中就知道，它會去抓book_zh_TW.properties的資料，這不是重點啦！只是Java的一個功能，我們要看的是DWR，不過先把book_zh_TW.properties準備好…
java=java in action
spring=sprin in action
ajax=ajax in action
要開放這個Book物件，在dwr.xml中…
<?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>
客戶端寫個網頁…
<!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如下，簡單的很…
function getBookData(ele)
{
??Book.getDescription(ele.id, setBookData);
}
function setBookData(description)
{
??DWRUtil.setValue(
'info'
, description);
}
function clearData()
{
??DWRUtil.setValue(
'info'
,
''
);
}
更多文章、技術交流、商務合作、聯系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號聯系： 360901061
您的支持是博主寫作最大的動力，如果您喜歡我的文章，感覺我的文章對您有幫助，請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點擊下面給點支持吧，站長非常感激您！手機微信長按不能支付解決辦法：請將微信支付二維碼保存到相冊，切換到微信，然后點擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對您有幫助就好】元
