📄 dwr 入門與應用（一） - 林信良（良葛格）的专栏 - csdnblog.htm
字号:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<!-- saved from url=(0069)http://blog.csdn.net/caterpillar_here/archive/2006/09/06/1186566.aspx -->
<HTML xmlns="http://www.w3.org/1999/xhtml"><HEAD><TITLE>DWR 入門與應用（一） - 林信良（良葛格）的专栏 - CSDNBlog</TITLE>
<META http-equiv=Content-Type content="text/html; charset=utf-8">
<META content=良葛格 name=author>
<META content=Csdn name=Copyright>
<META
content="首次发表于…http://www.javaworld.com.tw/jute/post/view?bid=49&amp;id=165881&amp;sty=1&amp;tpg=1&amp;age=0<br /><br />技术名词繁简不同，不再做转换，免生困扰…"
name=description>
<META content=良葛格,j2ee,w3c,dwr,js,網頁, name=keywords><LINK
href="http://profile.csdn.net/caterpillar_here/picture/1.ico"
rel="Shortcut Icon"><LINK media=all
href="DWR 入門與應用（一） - 林信良（良葛格）的专栏 - CSDNBlog.files/Cogitation_1.css"
type=text/css rel=stylesheet><LINK media=all
href="DWR 入門與應用（一） - 林信良（良葛格）的专栏 - CSDNBlog.files/csdn_favbykimi.css"
type=text/css rel=stylesheet>
<SCRIPT src="DWR 入門與應用（一） - 林信良（良葛格）的专栏 - CSDNBlog.files/jquery-1.2.3.pack.js"
type=text/javascript></SCRIPT>
<SCRIPT src="DWR 入門與應用（一） - 林信良（良葛格）的专栏 - CSDNBlog.files/jquery.highlighter.js"
type=text/javascript></SCRIPT>
<SCRIPT src="DWR 入門與應用（一） - 林信良（良葛格）的专栏 - CSDNBlog.files/highlighter.js"
type=text/javascript></SCRIPT>
<LINK title=RSS href="http://blog.csdn.net/caterpillar_here/rss.aspx"
type=application/rss+xml rel=alternate>
<META content="MSHTML 6.00.2900.5726" name=GENERATOR></HEAD>
<BODY id=defaultuser>
<DIV id=csdnblog_allwrap>
<FORM id=Form1 name=Form1 action=1186566.aspx method=post><INPUT
id=" __VIEWSTATE" type=hidden name=__VIEWSTATE>
<DIV id=csdnblog_midwrap>
<DIV id=csdnblog_header>
<H1><A id=Header1_HeaderTitle
href="http://blog.csdn.net/caterpillar_here/">林信良（良葛格）的专栏</A></H1>
<H2>http://caterpillar.onlyfun.net/ </H2>
<UL id=personalnav>
<LI><A href="http://passport.csdn.net/UserLogin.aspx">登录</A></LI>
<LI><A href="http://passport.csdn.net/CSDNUserRegister.aspx">注册</A></LI></UL>
<UL id=blogsearchsty>
<LI><INPUT class=bolgsearch id=inputSearch
onkeydown="return keyb(event)"></LI>
<LI class=selectsty><SELECT id=Search_ddlSearchScope
name=Search:ddlSearchScope><OPTION value=all selected>全站</OPTION><OPTION
value=caterpillar_here>当前博客</OPTION></SELECT></LI>
<LI><INPUT class=bolggobtn onclick=checkNull() type=button value=搜索></LI></UL>
<UL id=menu>
<LI><A href="http://hi.csdn.net/caterpillar_here">空间</A></LI>
<LI><A class=on href="http://blog.csdn.net/caterpillar_here">博客</A></LI>
<LI><A
href="http://hi.csdn.net/caterpillar_here/profile/contactlist/1.html">好友</A></LI>
<LI><A href="http://album.hi.csdn.net/" target=_blank>相册</A></LI>
<LI><A class=last
href="http://hi.csdn.net/caterpillar_here/profile/notebook/1.html">留言</A></LI></UL></DIV>
<DIV id=csdnblog_content>
<DIV class=gutter>
<DIV class=default_contents>
<DIV class=user_article>
<SCRIPT src="DWR 入門與應用（一） - 林信良（良葛格）的专栏 - CSDNBlog.files/LoadFeedbackCount.js"
type=text/javascript></SCRIPT>
<H1 class=title_txt><IMG height=16 alt=原创
src="DWR 入門與應用（一） - 林信良（良葛格）的专栏 - CSDNBlog.files/authorship.gif" width=15
border=0> DWR 入門與應用（一）<CITE class=fav_csdnstylebykimi><A
class=fav_csdnstylebykimi title=收藏到我的网摘中，并分享给我的朋友
href="javascript:d=document;t=d.selection?(d.selection.type!='None'?d.selection.createRange().text:''):(d.getSelection?d.getSelection():'');void(saveit=window.open('http://wz.csdn.net/storeit.aspx?t='+escape(d.title)+'&u='+escape(d.location.href)+'&c='+escape(t),'saveit','scrollbars=no,width=590,height=300,left=75,top=20,status=no,resizable=yes'));saveit.focus();">收藏</A></CITE></H1>
<DIV class=blogstory>
<SCRIPT>function StorePage(){d=document;t=d.selection?(d.selection.type!='None'?d.selection.createRange().text:''):(d.getSelection?d.getSelection():'');void(keyit=window.open('http://www.365key.com/storeit.aspx?t='+escape(d.title)+'&u='+escape(d.location.href)+'&c='+escape(t),'keyit','scrollbars=no,width=475,height=575,left=75,top=20,status=no,resizable=yes'));keyit.focus();}</SCRIPT>
<SPAN class=javascript id=text165881>Java 開發人員與網頁設計人員的橋樑
DWR…呃！我懶得寫簡介了…直接來看看可以做什麼吧！… <BR><BR>請先到 <A class=ilink
href="http://getahead.ltd.uk/dwr/" target=_blank>http://getahead.ltd.uk/dwr/</A>
下載 dwr.jar，放到WEB-INF/lib下… <BR><BR>負責處理客戶端請求，並呼叫Java物件的是DWRServlet，DWR其實也有些Model
2的味道，只是View的這一層比較弱，因為放到客戶端的JavaScript應用程式中… <BR><BR>在web.xml中加入DWRServlet… <BR>
<TABLE class=java cellSpacing=1 cellPadding=3 bgColor=#999999 border=0>
<TBODY>
<TR>
<TD vAlign=top align=left width=1 bgColor=#dddddd><PRE><FONT color=#555555>1<BR>2<BR>3<BR>4<BR>5<BR>6<BR>7<BR>8<BR>9<BR>10<BR>11<BR>12<BR>13<BR>14<BR>15<BR>16<BR>17<BR>18<BR>19<BR>20<BR>21<BR>22<BR>23<BR></FONT></PRE></TD>
<TD vAlign=top align=left bgColor=#ffffff><PRE><?xml version=<FONT class=java-string>"1.0"</FONT> encoding=<FONT class=java-string>"UTF-8"</FONT>?><BR><web-app id=<FONT class=java-string>"WebApp_ID"</FONT> version=<FONT class=java-string>"2.4"</FONT> <BR>xmlns=<FONT class=java-string>"http://java.sun.com/xml/ns/j2ee"</FONT> <BR>xmlns:xsi=<FONT class=java-string>"http://www.w3.org/2001/XMLSchema-instance"</FONT> <BR>xsi:schemaLocation=<BR><FONT class=java-string>"http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd"</FONT>><BR> <display-name><BR> ajaxDWR</display-name><BR> <servlet><BR> <servlet-name>dwr-invoker</servlet-name><BR> <servlet-class>uk.ltd.getahead.dwr.DWRServlet</servlet-class><BR> <init-param><BR> <description><BR> </description><BR> <param-name>debug</param-name><BR> <param-value>true</param-value><BR> </init-param><BR> </servlet><BR> <servlet-mapping><BR> <servlet-name>dwr-invoker</servlet-name><BR> <url-pattern>/dwr<FONT class=java-comment>/*</url-pattern><BR> </servlet-mapping><BR></web-app><BR></FONT></PRE></TD></TR></TBODY></TABLE><BR><BR>接下來寫個簡單的Hello吧！
<BR>
<TABLE class=java cellSpacing=1 cellPadding=3 bgColor=#999999 border=0>
<TBODY>
<TR>
<TD vAlign=top align=left width=1 bgColor=#dddddd><PRE><FONT color=#555555>1<BR>2<BR>3<BR>4<BR>5<BR>6<BR>7<BR></FONT></PRE></TD>
<TD vAlign=top align=left bgColor=#ffffff><PRE><FONT class=java-reserved_word><STRONG>package</STRONG></FONT> onlyfun.caterpillar;<BR> <BR><FONT class=java-reserved_word><STRONG>public</STRONG></FONT> <FONT class=java-reserved_word><STRONG>class</STRONG></FONT> Hello <FONT class=java-bracket>{</FONT><BR> <FONT class=java-reserved_word><STRONG>public</STRONG></FONT> String hello(String name) <FONT class=java-bracket>{</FONT><BR> <FONT class=java-reserved_word><STRONG>return</STRONG></FONT> <FONT class=java-string>"哈囉！"</FONT> + name + <FONT class=java-string>"！您的第一個DWR！"</FONT>;<BR> <FONT class=java-bracket>}</FONT><BR><FONT class=java-bracket>}</FONT> </PRE></TD></TR></TBODY></TABLE><BR><BR>客戶端要呼叫這個Java物件，傳給它參數，而後傳回一個字串，客戶端再顯示這個字串，神奇？其實是要告訴DWRServlet這件事，這需要一個dwr.xml：
<BR>
<TABLE class=java cellSpacing=1 cellPadding=3 bgColor=#999999 border=0>
<TBODY>
<TR>
<TD vAlign=top align=left width=1 bgColor=#dddddd><PRE><FONT color=#555555>1<BR>2<BR>3<BR>4<BR>5<BR>6<BR>7<BR>8<BR>9<BR>10<BR>11<BR></FONT></PRE></TD>
<TD vAlign=top align=left bgColor=#ffffff><PRE><?xml version=<FONT class=java-string>"1.0"</FONT> encoding=<FONT class=java-string>"UTF-8"</FONT>?><BR><!DOCTYPE dwr PUBLIC <FONT class=java-string>"-//GetAhead Limited//DTD Direct Web Remoting 1.0//EN"</FONT><BR> <FONT class=java-string>"http://www.getahead.ltd.uk/dwr/dwr10.dtd"</FONT>><BR> <BR><dwr><BR> <allow><BR> <create creator=<FONT class=java-string>"new"</FONT> javascript=<FONT class=java-string>"Hello"</FONT>><BR> <param name=<FONT class=java-string>"class"</FONT> value=<FONT class=java-string>"onlyfun.caterpillar.Hello"</FONT> /><BR> </create><BR> </allow><BR></dwr><BR></PRE></TD></TR></TBODY></TABLE><BR><BR>creator設定為new，表示使用Hello的無參數建構子來生成物件，javascript設定為Hello，表示客戶端JavaScript程式可以使用Hello來呼叫對應的onlyfun.caterpillar.Hello物件。
<BR><BR>來寫個客戶端的網頁，當中有一個輸入欄位… <BR>
<TABLE class=java cellSpacing=1 cellPadding=3 bgColor=#999999 border=0>
<TBODY>
<TR>
<TD vAlign=top align=left width=1 bgColor=#dddddd><PRE><FONT color=#555555>1<BR>2<BR>3<BR>4<BR>5<BR>6<BR>7<BR>8<BR>9<BR>10<BR>11<BR>12<BR>13<BR>14<BR>15<BR>16<BR>17<BR>18<BR>19<BR></FONT></PRE></TD>
<TD vAlign=top align=left bgColor=#ffffff><PRE><!DOCTYPE HTML PUBLIC <FONT class=java-string>"-//W3C//DTD HTML 4.01 Transitional//EN"</FONT>><BR><html><BR><head><BR><meta http-equiv=<FONT class=java-string>"Content-Type"</FONT> content=<FONT class=java-string>"text/html; charset=BIG5"</FONT>><BR> <title>第一個DWR程式</title><BR> <script type=<FONT class=java-string>'text/javascript'</FONT> src=<FONT class=java-string>'dwr/interface/Hello.js'</FONT>></script><BR> <script type=<FONT class=java-string>'text/javascript'</FONT> src=<FONT class=java-string>'dwr/engine.js'</FONT>></script><BR> <script type=<FONT class=java-string>'text/javascript'</FONT> src=<FONT class=java-string>'dwr/util.js'</FONT>></script><BR> <script type=<FONT class=java-string>'text/javascript'</FONT> src=<FONT class=java-string>'hello.js'</FONT>></script><BR></head><BR><body><BR> <BR><input id=<FONT class=java-string>"user"</FONT> type=<FONT class=java-string>"text"</FONT> /><BR><input type=<FONT class=java-string>'button'</FONT> value=<FONT class=java-string>'哈囉'</FONT> onclick=<FONT class=java-string>'hello();'</FONT> /> <BR> <BR><div id=<FONT class=java-string>"result"</FONT>></div><BR> <BR></body><BR></html><BR></PRE></TD></TR></TBODY></TABLE><BR><BR>dwr/interface/Hello.js是由DWRServlet根據dwr.xml中的設定生成的，engine.js負責客戶端伺服端溝通，util.js是一些好用的JavaScript程式，可以讓您少寫很多JavaScript。
<BR><BR>hello.js是我們自訂的函式，按下按鈕後，會呼叫當中的hello()函式： <BR>
<TABLE class=java cellSpacing=1 cellPadding=3 bgColor=#999999 border=0>
<TBODY>
<TR>
<TD vAlign=top align=left width=1 bgColor=#dddddd><PRE><FONT color=#555555>1<BR>2<BR>3<BR>4<BR>5<BR>6<BR>7<BR>8<BR></FONT></PRE></TD>
<TD vAlign=top align=left bgColor=#ffffff><PRE>function hello() <FONT class=java-bracket>{</FONT><BR> var user = $(<FONT class=java-string>'user'</FONT>).value;<BR> Hello.hello(user, callback);<BR><FONT class=java-bracket>}</FONT><BR> <BR>function callback(msg) <FONT class=java-bracket>{</FONT><BR> DWRUtil.setValue(<FONT class=java-string>'result'</FONT>, msg);<BR><FONT class=java-bracket>}</FONT> </PRE></TD></TR></TBODY></TABLE><BR><BR>${'user'}取得輸入欄位的DOM物件，value取得當中的欄位值，而後呼叫Hello.hello()，並將value當作參數傳送…
結果是呼叫Server端的Hello
Java物件，當結果傳回後，會呼叫JavaScript的callback函式，DWRUtil的setValue()方法會將傳回的msg設定給指定
id的DOM，結果就是…啥！AJAX的功能在哪…就這個而言就是發出非同步請求，而回應不用Refresh頁面啦！ </SPAN><BR><IMG
alt=""
src="DWR 入門與應用（一） - 林信良（良葛格）的专栏 - CSDNBlog.files/helloDWR.jpg"><BR><BR><SPAN
class=javascript id=text165882>好啦！這個無聊的Hello DWR可以做啥！…XD
<BR><BR>已經可以讓您做個簡單的文字提示功能了…像這個… <BR><A class=ilink
href="http://caterpillar.onlyfun.net/Gossip/index.html"
target=_blank>http://caterpillar.onlyfun.net/Gossip/index.html</A>
<BR><BR>把滑鼠指到書的照片上，會顯示提示文字，這些提示文字本身不是存在網頁上的，而是在Server端，當滑鼠指到書上時，會用Request
object去抓，然後顯示在框框中… <BR><BR>當然！我的網站只支援PHP，所以那不是DWR完成的功能，而且我是直接用Request
object跟DOM去慢慢刻的…對初學者來說已經有些麻煩了…XD <BR><BR>不過！用DWR就可以很簡單完成這個功能…
<BR><BR>先寫個Java類別吧！會抓properties檔案中的文字訊息，例如… <BR>
<TABLE class=java cellSpacing=1 cellPadding=3 bgColor=#999999 border=0>
<TBODY>
<TR>
<TD vAlign=top align=left width=1 bgColor=#dddddd><PRE><FONT color=#555555>1<BR>2<BR>3<BR>4<BR>5<BR>6<BR>7<BR>8<BR>9<BR>10<BR>11<BR>12<BR>13<BR>14<BR>15<BR></FONT></PRE></TD>
<TD vAlign=top align=left bgColor=#ffffff><PRE><FONT class=java-reserved_word><STRONG>package</STRONG></FONT> onlyfun.caterpillar;<BR> <BR><FONT class=java-reserved_word><STRONG>import</STRONG></FONT> java.util.ResourceBundle;<BR> <BR><FONT class=java-reserved_word><STRONG>public</STRONG></FONT> <FONT class=java-reserved_word><STRONG>class</STRONG></FONT> Book <FONT class=java-bracket>{</FONT><BR> <FONT class=java-reserved_word><STRONG>private</STRONG></FONT> ResourceBundle resource;<BR> <BR> <FONT class=java-reserved_word><STRONG>public</STRONG></FONT> Book() <FONT class=java-bracket>{</FONT><BR> resource = ResourceBundle.getBundle(<FONT class=java-string>"book"</FONT>); <BR> <FONT class=java-bracket>}</FONT><BR> <BR> <FONT class=java-reserved_word><STRONG>public</STRONG></FONT> String getDescription(String key) <FONT class=java-bracket>{</FONT><BR> <FONT class=java-reserved_word><STRONG>return</STRONG></FONT> resource.getString(key);<BR> <FONT class=java-bracket>}</FONT><BR><FONT class=java-bracket>}</FONT> </PRE></TD></TR></TBODY></TABLE><BR><BR>從程式中就知道，它會去抓book_zh_TW.properties的資料，這不是重點啦！只是Java的一個功能，我們要看的是DWR，不過先把book_zh_TW.properties準備好…
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -