天天看點

DWR入門測試

DWR入門測試:

1、下載下傳dwr.jar,本人使用版本2.0.5

2、建立web項目,加入dwr的jar包至lib目錄下,根據需要可能還要加入commons-logging.jar

3、配置web.xml:

<?xml version="1.0" encoding="UTF-8"?>

<web-app version="2.4" xmlns="http://java.sun.com/xml/ns/j2ee"

xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee

http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">

<welcome-file-list>

<welcome-file>index.jsp</welcome-file>

</welcome-file-list>

<!-- 配置dwr的listener -->

[color=red]<listener>

<listener-class>

org.directwebremoting.servlet.EfficientShutdownServletContextAttributeListener

</listener-class>

</listener>

<listener>

<listener-class>

org.directwebremoting.servlet.EfficientShutdownServletContextListener

</listener-class>

</listener>[/color]

<!-- 配置dwr的Servlet映射 -->

<servlet>

<!-- 指定DWR核心Servlet的名字 -->

<servlet-name>dwr-invoker</servlet-name>

<servlet-class>

<!-- 指定DWR核心Servlet的實作類 -->

org.directwebremoting.servlet.DwrServlet

</servlet-class>

<!-- 指定DWR核心Servlet處于調試狀态 -->

<init-param>

<param-name>debug</param-name>

<param-value>true</param-value>

</init-param>

<load-on-startup>1</load-on-startup>

</servlet>

<!-- 比對模式使用/dwr/*,其他的我沒有測試,有興趣可以試試 -->

<servlet-mapping>

<servlet-name>dwr-invoker</servlet-name>

<url-pattern>/dwr/*</url-pattern>

</servlet-mapping>

</web-app>

4、建立業務邏輯類AjaxService.java以供頁面調用,我的了解是dwr架構是java類和javaScript的轉換橋梁,以提

供在view層直接調用java類暴露的相關方法,至于java類如何提供頁面調用的接口是由dwr.xml來配置的。

package com.zxm.ajax.dwrtest;

public class AjaxService {

// public String sayHello(String name) {

// // 可以是通路資料庫的複雜代碼

// return "歡迎您:" + name + ",恭喜DWR測試成功!";

// }

public AjaxService() {

}

public String getMyName(String v){

return "Hello Ajax,The Value is:" + v;

}

}

5、在WEB-INF下建立dwr.xml檔案并配置:

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE dwr PUBLIC

"-//GetAhead Limited//DTD Direct Web Remoting 2.0//EN"

"http://getahead.org/dwr/dwr20.dtd">

<dwr>

<allow>

<!-- create标簽映射java類到javascript-->

<!-- creator="new"表示建立,javascript="MyTest"表示javascript的名字,scope="application"是作用域-->

<create creator="new" javascript="MyTest" scope="application">

<!-- 參數名 name="class"表示映射的是class,value是我們的業務邏輯類 -->

<param name="class" value="com.zxm.ajax.dwrtest.AjaxService" />

</create>

</allow>

</dwr>

6、view調用index.jsp:

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<%

String path = request.getContextPath();

String basePath = request.getScheme() + "://"

+ request.getServerName() + ":" + request.getServerPort()

+ path + "/";

%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<base href="<%=basePath%>" target="_blank" rel="external nofollow" >

<title>My JSP 'index.jsp' starting page</title>

<meta http-equiv="pragma" content="no-cache">

<meta http-equiv="cache-control" content="no-cache">

<meta http-equiv="expires" content="0">

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

<meta http-equiv="description" content="This is my page">

<!--

<link rel="stylesheet" type="text/css" href="styles.css" target="_blank" rel="external nofollow" >

-->

<!-- 連結dwr為我們映射的javaScript檔案 -->

<!-- 名稱就是dwr.xml中指定的名稱MyTest,前面加上“dwr/interface/” -->

<script src="dwr/interface/MyTest.js"></script>

<!-- 連結dwr為我們提供的兩個js檔案,不要将其考到自己建立的檔案夾中 -->

<script src="dwr/util.js"></script>

<script src="dwr/engine.js"></script>

<!-- 頁面調用 -->

<%-- <script type="text/javascript">--%>

<%-- function myFirstDwr(){--%>

<%-- service.sayHello

(document.myform.user.value,callBackTest)--%>

<%-- }--%>

<%-- function callBackTest(data){--%>

<%-- alert(data);--%>

<%-- }--%>

<%-- </script>--%>

<!-- 頁面調用,正常編寫js代碼 -->

<script language="javascript">

var mycall=function callBack(data){

alert(data);

//使用dwr的函數将得到的傳回值填入id為nameTest的輸入框

DWRUtil.setValue("nameTest",data);

}

function showMyName(){

var v=document.getElementById("appValues").value;

//調用業務邏輯提供的接口,将傳回值交給回調函數mycall

MyTest.getMyName(v,mycall);

}

function clearName(){

nameTest.value="";

}

</script>

</head>

<body>

<%-- <form name="myform">--%>

<%-- <input type="text" name="user">--%>

<%-- <input type="button" name="button" value="test"--%>

<%-- οnclick="myFirstDwr();">--%>

<%-- </form>--%>

INPUT:    <input type="text" id="appValues">

<br>

OUTPUT:<input type="text" id="nameTest">

<br>

<input type="button" value="showName" οnclick="javascript:showMyName()">

<input type="button" value="Clear" οnclick="javascript:clearName()">

</body>

</html>

7、部署運作:首先在IE中輸入[url]http://localhost:8080/TestDWR/dwr[/url]來測試dwr是否映射成功,如果成功,會顯示

如:MyTest (com.zxm.ajax.dwrtest.AjaxService),前面表示js名稱,括号裡的表示映射的類,點選MyTest會顯

示目前類的所有方法,包括繼承至Object的方法,可以找到相應的方法進行測試。然後在IE中輸入

[url]http://localhost:8080/TestDWR/index.jsp[/url]進行真正的測試,輸入相關值,點選相關按鈕會有相應的輸出并在後

台列印Exec: MyTest.getMyName()資訊,至此dwr入門示例完成。

ps:dwr還可以與其他架構內建,如spring,暫不讨論,文中被注釋的也是dwr測試,隻不過是不帶參數的,隻有一個回調函數。

繼續閱讀