2009年11月20日 星期五

Direct Web Remoting(DWR)簡介

DWR可以在Web Application上直接處理XMLHttpRequest,因此你可以在 有的架構下利用DWR來產生Ajax的
效果。而且DWR非常簡單,只要再web.xml加入DRW的Servlet並新增一個dwr.xml的設定檔。就可以直接在Client端
利用Javascript直接呼叫Server端的Java方法。
以下建構一個簡單的例子,在Client端輸入一串字串,Servler端在收到這一個字串後,回傳Client端輸入的字串並回傳
Server端目前系統時間。


1. 下載dwr.jar檔。


2. 在web.xml加入DRW的Servlet。
<servlet>
    <servlet-name>dwr-invoker</servlet-name>
    <servlet-class>
            org.directwebremoting.servlet.DwrServlet
    </servlet-class>
    <init-param>
        <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>


3. 在WEB-INF下新增一個dwr.xml的設定檔。
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting 2.0//EN"
"http://www.getahead.ltd.uk/dwr/dwr20.dtd">
<dwr>
    <allow>
        <create creator="new" javascript="AjFuns">
            <param name="class" value="tw.nicky.dwr.AjaxFunctions"/>
       </create>
    </allow>
</dwr>



4. 建立AjaxFunctions.class(此類別就是用戶端要呼叫的類別)
package tw.nicky.dwr;
import java.util.Date;
public class AjaxFunctions {
    public String getEchoTime(String msg) {
        String result = "";
        result = result + "your input: "+msg+" ";
        result = result + "server time: "+new Date();
        return result;
    }
}




5.最後建立呈現在用戶端的網頁()
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>dwr_example</title>
        <script type='text/javascript' src='dwr/interface/AjFuns.js'></script>
        <script type='text/javascript' src='dwr/engine.js'></script>
        <script type='text/javascript'>
            function getEchoTime(){
                var msg = document.getElementById("msg").value;
                AjFuns.getEchoTime(msg,function(ret){
                    document.getElementById("results").innerHTML = ret;
                });

            }
        </script>
    </head>
    <body>
        <input type="text" id="msg">
        <input type="button" value="確定" onClick="getEchoTime()">
        <div id="results">
        </div>
    </body>
</html>

沒有留言:

張貼留言