DWR之DWR实例(1)

来源：互联网发布：百合蕾丝炫浪网络社区编辑：程序博客网时间：2024/05/18 01:37

原文出处：http://blog.csdn.net/fhd001/article/details/7063281

DWR之DWR实例(1)

----------

1.首先向项目中加入dwr.jar文件,这里我们使用maven构建，同时dwr还要依赖commons-logging.jar包，如例（pom.xml）:

[html] view plaincopy
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"  
    xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">  
    <modelVersion>4.0.0</modelVersion>  
    <groupId>aaa</groupId>  
    <artifactId>bbb</artifactId>  
    <packaging>war</packaging>  
    <version>0.0.1-SNAPSHOT</version>  
    <name>bbb Maven Webapp</name>  
    <url>http://maven.apache.org</url>  
    <dependencies>  
        <dependency>  
            <groupId>junit</groupId>  
            <artifactId>junit</artifactId>  
            <version>3.8.1</version>  
            <scope>test</scope>  
        </dependency>  
        <!-- 必需的依赖 -->  
        <dependency>  
            <groupId>org.directwebremoting</groupId>  
            <artifactId>dwr</artifactId>  
            <version>3.0.M1</version>  
        </dependency>  
        <!-- 必需的依赖 -->  
        <dependency>  
            <groupId>commons-logging</groupId>  
            <artifactId>commons-logging</artifactId>  
            <version>1.1.1</version>  
        </dependency>  
    </dependencies>  
    <build>  
        <finalName>bbb</finalName>  
    </build>  
</project>  

2.在web.xml文件中增加DWRSevlet的配置，DWR指定映射路径的js(如：带有/dwr)都由这个servlet处理，就像这些路径的js(带有/dwr的路径)：

[html] view plaincopy
<script src='/[YOUR-WEBAPP-CONTEXT]/dwr/interface/[YOUR-SCRIPT].js'></script>  
<script src='/[YOUR-WEBAPP-CONTEXT]/dwr/engine.js'></script>  

这两个件都是虚拟文件，并不是真实的文件。

web.xml的配置如下：

[html] view plaincopy
<?xml version="1.0" encoding="UTF-8"?>  
<web-app 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"  
    version="2.4">  
  
    <display-name>firstDWR</display-name>  
  
    <welcome-file-list>  
        <welcome-file>index.jsp</welcome-file>  
    </welcome-file-list>  
  
    <!-- The 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>  
        <!-- 跨域调用配置信息,不是必须的 -->  
        <init-param>  
            <param-name>crossDomainSessionSecurity</param-name>  
            <param-value>false</param-value>  
        </init-param>  
    </servlet>  
    <servlet-mapping>  
        <servlet-name>dwr-invoker</servlet-name>  
        <url-pattern>/dwr/*</url-pattern>  
    </servlet-mapping>  
  
</web-app>  

3.创建dwr.xml文件(与web.xml在同一个目录):

[html] view plaincopy
<?xml version="1.0" encoding="UTF-8"?>  
<!DOCTYPE dwr PUBLIC   
    "-//GetAhead Limited//DTD Direct Web Remoting 3.0//EN" "http://getahead.org/dwr/dwr30.dtd">  
<dwr>  
    <allow>  
        <create creator="new" javascript="MathDelegate">  
            <param name="class" value="app.MathDelegate" />  
        </create>  
    </allow>  
</dwr>  

4.创建java文件，如：MathDelegate.java文件：

[java] view plaincopy
package app;  
  
/** 
 * 数值计算 
 * @author fuhd 
 */  
public class MathDelegate {  
  
    /**加法*/  
    public int add(int a,int b){  
          
        return a+b;  
    }  
      
    /**减法*/  
    public int subtract(int a,int b){  
          
        return a-b;  
    }  
      
    /**乘法*/  
    public int multiply(int a,int b){  
          
        return a*b;  
    }  
      
    /**除法*/  
    public int divide(int a,int b){  
          
        return a/b;  
    }  
}  

5.创建jsp文件(可以是html或其它模板的文件)，如：index.jsp ：

[html] view plaincopy
<html>  
    <head>  
        <title>firstdwr</title>  
        <script type="text/javascript" src="dwr/interface/MathDelegate.js"></script>  
        <script type="text/javascript" src="dwr/engine.js"></script>  
        <script>  
            var a = 0;  
            var b = 0;  
            var op = "";  
            function doMath(){  
                a = document.getElementById("numA").value;  
                b = document.getElementById("numB").value;  
                op = document.getElementById("op").value;  
                if(op == "add"){  
                    MathDelegate.add(a,b,doMathCallback);  
                    op = "+";  
                }else if(op == "subtract"){  
                    MathDelegate.subtract(a,b,doMathCallback);  
                    op = "-";  
                }else if(op == "multiply"){  
                    MathDelegate.multiply(a,b,doMathCallback);  
                    op = "*";  
                }else if(op == "divide"){  
                    MathDelegate.divide(a,b,doMathCallback);  
                    op = "/";  
                }  
            }  
            var doMathCallback = function(answer){  
                document.getElementById("resultDiv").innerHTML = "<h1>" +   
                    "Result: " + a + " " + op + " " + b + " = " + answer + "</h1>";  
            };  
        </script>  
    </head>  
    <body>  
        <span id="resultDiv"></span>  
        Please enter two numbers,select an operation,and click the equals button:  
        <br><br>  
        <input type="text" id="numA" size="4"/>  
           
        <select id="op">  
            <option value="add">+</option>  
            <option value="subtract">-</option>  
            <option value="multiply">*</option>  
            <option value="divide">/</option>  
        </select>  
           
        <input type="text" id="numB" size="4"/>  
           
        <input type="button" value="=" onclick="doMath();"/>  
    </body>  
</html>  
原文出处：http://blog.csdn.net/fhd001/article/details/7063281