DWR是一个AJAX的框架，可以实现通过js来调用java代码 的操作，这个东西我以前接触过，但是没有用来做过项目

项目结构

Ajax框架之DWR学习（简单入门案例）-yellowcong_xml

Service

建立了一个简单的Service,我们的目的，就是通过 js调用UserService的sayHello方法

package com.yellowcong.service;

import org.directwebremoting.Browser;

public class UserService {

    public String sayHello(String name){
        System.out.println(name);

        Browser.withPage("", new Runnable() {

            public void run() {
                // TODO Auto-generated method stub

            }
        });
        return  "你好"+name;
    }
}

环境搭建

  1. 导入jar包 dwr.jar（注意是dwr3.jar的包，2.0版本的不能用，没有DwrListener 这个类）和 common-loggin.jar
  2. 配置web.xml文件
    a)配置DwrListener
    b)配置DwrServlet
  3. 配置dwr.xml文件（在WEB-INF目录下面创建xml文件，命名为dwr.xml
    a)配置我们设定的jave类
  4. 调用我们的JAVA 类
    a)导入 engine.js
    b)导入 /interface/javaName.js 我们在xml中定义的Java类

POM.xml

依赖包中，必须导入common的包，不然就会 报错了

<project xmlns="http:///POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http:///POM/4.0.0 http:///maven-v4_0_0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <groupId>yellowcong</groupId>
    <artifactId>day11_29</artifactId>
    <packaging>war</packaging>
    <version>0.0.1-SNAPSHOT</version>
    <name>day11_29 Maven Webapp</name>
    <url>http://</url>
    <dependencies>
        <dependency>
            <groupId>junit</groupId>
            <artifactId>junit</artifactId>
            <version>4.10</version>
            <scope>test</scope>
        </dependency>
        <!-- Dwr框架 -->
        <dependency>
            <groupId>org.directwebremoting</groupId>
            <artifactId>dwr</artifactId>
            <version>3.0.2-RELEASE</version>
        </dependency>

        <!-- 必须也连带加上这个日志包，不然报错 -->
        <dependency>
            <groupId>commons-logging</groupId>
            <artifactId>commons-logging</artifactId>
            <version>1.0.4</version>
        </dependency>

    </dependencies>
    <build>
        <finalName>day11_29</finalName>
    </build>
</project>

web.xml

需要配置DwrListener 监听器和配置DwrServlet（这个DwrServlet可以用来测试用）

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xmlns="http://java.sun.com/xml/ns/javaee"
    xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
    id="WebApp_ID" version="2.5">
    <display-name>day1_27_dwr</display-name>
    <!-- a)配置DwrListener 监听器-->
    <listener>
        <listener-class>org.directwebremoting.servlet.DwrListener</listener-class>
    </listener>

    <!-- b)配置DwrServlet  -->
    <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>
        <load-on-startup>1</load-on-startup>
    </servlet>
    <servlet-mapping>
        <servlet-name>dwr-invoker</servlet-name>
        <url-pattern>/dwr/*</url-pattern>
    </servlet-mapping>
    <welcome-file-list>
        <welcome-file>index.jsp</welcome-file>
    </welcome-file-list>
</web-app>

dwr.xml

这个里面配置需要调用的Java的service

<?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">
        <!-- 公布我们的 Java 文件 -->
        <param name="class" value="com.yellowcong.service.UserService" />
    </create>
  </allow>
</dwr>

前端调用

1.引入两个js文件，一个是Dwr系统的engine.js，UserService.js这个js是,而是dwr框架生成的。

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="<%=request.getContextPath()%>/dwr/engine.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/dwr/interface/UserService.js"></script>
<!-- 调用我们的JAVA代码 -->
<script type="text/javascript">
    //调用Service,不需要创建对象，直接使用方法就可以了
    UserService.sayHello("yellowcong");
    //调用的时候，会有返回数据,在返回的数据后面添加一个回调函数
    UserService.sayHello("老衲爱编程",function(data){
            alert("返回数据:"+data);
    });
</script>
</head>
<body>
<h2>Hello World!</h2>
</body>
</html>

运行结果

Ajax框架之DWR学习（简单入门案例）-yellowcong_xml_02

Debug模式

我们需要确认web.xml配置DwrServlet的时候，开启了debug模式

//后面的UserService 是变化的，看你需要调试的service
http://127.0.0.1/day11_29/dwr/test/UserService

Ajax框架之DWR学习（简单入门案例）-yellowcong_java_03