DWR 入門與應用（一）

最新推荐文章于 2017-09-06 10:05:00 发布

最新推荐文章于 2017-09-06 10:05:00 发布 · 146 阅读

文章标签：

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

本文介绍如何利用 DWR (Direct Web Remoting) 实现 AJAX 功能，通过 Java 和 JavaScript 的结合，使得服务器端的方法可以直接被客户端调用，实现非同步请求，无需刷新页面即可更新内容。

<?xml version= encoding=?>
<web-app id= version= 
xmlns= 
xmlns:xsi= 
xsi:schemaLocation=
>
  <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

接下來寫個簡單的Hello吧！

 onlyfun.caterpillar;

  Hello 
 String hello(String name) 
  + name + ;

客戶端要呼叫這個Java物件，傳給它參數，而後傳回一個字串，客戶端再顯示這個字串，神奇？其實是要告訴DWRServlet這件事，這需要一個dwr.xml：

<?xml version= encoding=?>
<!DOCTYPE dwr PUBLIC 
>

<dwr>
  <allow>
    <create creator= javascript=>
      <param name= value= />
    </create>
  </allow>
</dwr>

creator設定為new，表示使用Hello的無參數建構子來生成物件，javascript設定為Hello，表示客戶端JavaScript程式可以使用Hello來呼叫對應的onlyfun.caterpillar.Hello物件。

來寫個客戶端的網頁，當中有一個輸入欄位…

<!DOCTYPE HTML PUBLIC >
<html>
<head>
<meta http-equiv= content=>
  <title>第一個DWR程式</title>
  <script type= src=></script>
  <script type= src=></script>
  <script type= src=></script>
  <script type= src=></script>
</head>
<body>

<input id= type= />
<input type= value= onclick= /> 

<div id=></div>

</body>
</html>

dwr/interface/Hello.js是由DWRServlet根據dwr.xml中的設定生成的，engine.js負責客戶端伺服端溝通，util.js是一些好用的JavaScript程式，可以讓您少寫很多JavaScript。

hello.js是我們自訂的函式，按下按鈕後，會呼叫當中的hello()函式：

function hello() 
    var user = $().value;
    Hello.hello(user, callback);


function callback(msg) 
   DWRUtil.setValue(, 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檔案中的文字訊息，例如…

 onlyfun.caterpillar;

 java.util.ResourceBundle;

  Book 
 ResourceBundle resource;

 Book() 
    resource = ResourceBundle.getBundle(); 


 String getDescription(String key) 
 resource.getString(key);

從程式中就知道，它會去抓book_zh_TW.properties的資料，這不是重點啦！只是Java的一個功能，我們要看的是DWR，不過先把book_zh_TW.properties準備好…

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

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

一樣的…要開放這個Book物件，在dwr.xml中…

<?xml version= encoding=?>
<!DOCTYPE dwr PUBLIC  
>

<dwr>
  <allow>
  <create creator= javascript= scope=>
            <param name= value=/>
        </create>  
  </allow>
</dwr>

scope設定為application，表示這個Book物件在整個應用程式階段都活著。

然後，客戶端寫個網頁…

<!DOCTYPE HTML PUBLIC >
<html>
<head>
<meta http-equiv= content=>
  <script type= src=></script>
  <script type= src=></script>
  <script type= src=></script>
  <script type= src=></script>
<title>個人著／譯作</title>
</head>
<body>

      <div id= onmouseover=
 onmouseout=><a
 href=><small><img
 style=
 alt= title=
 src= hspace= vspace=></small></a></div>

      <div id= onmouseover=
 onmouseout=><a
 href=><small><img
 style=
 alt= title=
 src= hspace= vspace=></small></a></div>

      <div id= onmouseover=
 onmouseout=><a
 href=><small><img
 style=
 alt= title=
 src= hspace=
 vspace=></small></a></div>

    <br/><br/><br/><br/><br/><br/>

    <div id=></div>

</body>
</html>

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

book.js如下，簡單的很…

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


function setBookData(description) 
  DWRUtil.setValue(, description);


function clearData() 
  DWRUtil.setValue(, );

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

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