AJAX技術之DWR框架


DWR(Direct Web Remoting)是一個用於改善web頁面與Java類交互的遠程服務器端Ajax開源框架,可以幫助開發人員開發包含AJAX技術的網站。它可以允許在瀏覽器里的代碼使用運行在WEB服務器上的JAVA函數,就像它就在瀏覽器里一樣。

它包含兩個主要的部分:允許JavaScript從WEB服務器上一個遵循了AJAX原則的Servlet中獲取數據.另外一方面一個JavaScript庫可以幫助網站開發人員輕松地利用獲取的數據來動態改變網頁的內容。

官網:http://directwebremoting.org/dwr/index.html

1. 搭建DWR開發環境

1.1 將下載的dwr.jar文件存放於WEB-INF\lib目錄;同時它依賴commons-logging-1.x.x.jar包。

1.2 在web.xml文件中加入DWR的servlet配置

    <servlet>
        <display-name>DWR Servlet</display-name>
        <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>

1.3 在WEB-INF目錄中創建dwr.xml文件

該文件用於將后台的Java代碼登記到DWR框架中,讓其能被DWR框架正確定位並中以調用。

<!DOCTYPE dwr PUBLIC
    "-//GetAhead Limited//DTD Direct Web Remoting 3.0//EN"
    "http://getahead.org/dwr/dwr30.dtd">

<dwr>
  <allow>
    <create creator="new" javascript="JDate">
      <param name="class" value="java.util.Date"/>
    </create>
    <create creator="new" javascript="Demo">
      <param name="class" value="com.clzhang.ssh.demo9.Remote"/>
    </create>
  </allow>
</dwr>
  • <allow>標簽中包括可以暴露給javascript訪問的東西。
  • <create>標簽中指定javascript中可以訪問的java類名,並定義DWR應當如何獲得要進行遠程的類的實例。creator="new"屬性指定java類實例的生成方式,new意味着DWR應當調用類的默認構造函數來獲得實例,其他的還有spring方式,通過與IOC容器Spring進行集成來獲得實例等等。javascript=" testClass "屬性指定javascript代碼訪問對象時使用的名稱。
  • <include>標簽指定要公開給javascript的方法。不指定的話就公開所有方法。示范:<include method="testMethod1"/>
  • <exclude>標簽指定要防止被訪問的方法。include和exclude不能同時存在。

2. 編寫前台頁面(dwr.jsp)

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ page isELIgnored="false"%>
<%@ taglib uri="/struts-tags" prefix="s"%>
<%
    String path = request.getContextPath();
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<sx:head extraLocales="utf-8"/>
<script type='text/javascript' src='<%=path%>/dwr/engine.js'></script>
<script type='text/javascript' src='<%=path%>/dwr/interface/JDate.js'></script>
<script type='text/javascript' src='<%=path%>/dwr/interface/Demo.js'></script>
<script type='text/javascript' src='<%=path%>/dwr/util.js'></script>
<TITLE>DWR</TITLE>
<script>
    function submitDwr(name) {
        Demo.userIsExist(name, callback);
    }
    
    function callback(data) {
        if(data=="true"){
            alert("用戶名已經存在!");
        }else {
            alert("用戶名不存在,可以使用!");
        }
    }

    function calNewValue(value) {
        Demo.getData(value, function callback(returnData) {
            alert(returnData);
        });
    }
</script>
</HEAD>
<BODY>
<DIV>
    <P class="STYLE1"><STRONG>DWR測試</STRONG></P>
    <s:form>
        測試用戶名是否存在(admin用戶名已經存在):<br/>
        <s:textfield name="username" onblur="submitDwr(this.value)"></s:textfield>
        <br/>
        取得計算結果(整數):<br/>
        <s:textfield name="indexNumber" onblur="calNewValue(this.value)"></s:textfield>
        <br/>
        <s:submit value="提交"></s:submit>
    </s:form>
</DIV>
</BODY>
</HTML>

3. 編寫后台Java類

package com.clzhang.ssh.demo9;

public class Remote {
    public String userIsExist(String name) throws Exception {
        System.out.println("后台收到userIsExist請求:" + name);
        
        if("admin".equals(name)) {
            return "true";
        }
        
        return "false";
    }
    
    public String getData(int index) {
        System.out.println("后台收到getData請求:" + index);

        return "您取數值為:" + index;
    }
}

4. 測試

因為在配置文件中配置了兩個Java類,但實際上示范只用到了一個。只是為了演示,讀者可以在DWR自身的界面中測試JDate的功能。

4.1 打開IE,輸入地址:http://127.0.0.1:8080/st/dwr/index.html

結果如下:

在此頁面單擊“JDate”超鏈接,然后做相關測試即可。

4.2 打開IE,輸入地址:http://127.0.0.1:8080/st/ssh/demo9/dwr.jsp

結果如下:

在用戶名中輸入:admin,鼠標移出,結果如下:

在取得計算結果中輸入:123,鼠標移出,結果如下:

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM