顯示具有 Direct Web Remoting 標籤的文章。 顯示所有文章
顯示具有 Direct Web Remoting 標籤的文章。 顯示所有文章

2010年1月12日 星期二

Direct Web Remoting(DWR) - Reverse Ajax

1. 要使用DWR Reverse Ajax需先指定參數activeReverseAjaxEnabled為true。

<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>
   <init-param>
     <param-name>activeReverseAjaxEnabled</param-name>
     <param-value>true</param-value>
   </init-param>
   <load-on-startup>1</load-on-startup>
 </servlet>

2. 在要使用DWR Reverse Ajax的頁面(reverseAjax.jsp)加入以下設定。

<!-- DWR相關的Javascript -->
<script type='text/javascript' src='dwr/engine.js'></script>
<script type='text/javascript' src='dwr/util.js'></script>
<!-- 頁面載入時,即建立ReverseAjax連線 -->
<body onload="dwr.engine.setActiveReverseAjax(true);">
<!-- 從Server push回來的內容 -->
<span id="show"></span>


3. 觸發要回傳資料給Client端的Servlet。

ServerContext wctx = ServerContextFactory.get(this.getServletContext());
//取得要觸發的頁面
Collection sessions = wctx.getScriptSessionsByPage("/reverseAjax.jsp");
Util utilAll = new Util(sessions);
//設定回傳的內容,並指定放到DOM的哪個id內
utilAll.setValue("show", "這是Server回傳的資料");


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>