DWR之DWR实例(1)
----------1.首先向项目中加入dwr.jar文件,这里我们使用maven构建,同时dwr还要依赖commons-logging.jar包,如例(pom.xml):
- <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>
- <script src='/[YOUR-WEBAPP-CONTEXT]/dwr/interface/[YOUR-SCRIPT].js'></script>
- <script src='/[YOUR-WEBAPP-CONTEXT]/dwr/engine.js'></script>
这两个件都是虚拟文件,并不是真实的文件。
web.xml的配置如下:
- <?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>
- <?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>
- 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>
- <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