DWR框架整合Spring实战-优快云博客

Ajax,它使浏览器可以为用户提供更为自然的浏览体验,对于j2EE WEB开发人员来说,使用DWR框架可以很简单的使用Ajax技术. 
本文以一个DWR+SPRING的实例来说明DWR的使用 
1、将dwr.jar放到应用的/WEB-INF/lib目录下

2、配置web.xml,增加如下代码: 红色表示要添加的部分

web.xml:

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" version="2.5" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee   http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
<servlet>
    <servlet-name>action</servlet-name>
    <servlet-class>org.apache.struts.action.ActionServlet</servlet-class>
    <init-param>
      <param-name>config</param-name>
      <param-value>/WEB-INF/struts-config.xml</param-value>
    </init-param>
    <init-param>
      <param-name>debug</param-name>
      <param-value>3</param-value>
    </init-param>
    <init-param>
      <param-name>detail</param-name>
      <param-value>3</param-value>
    </init-param>
    <load-on-startup>0</load-on-startup>
</servlet>
<filter>
    <description>This is the description of my J2EE component</description>
    <display-name>This is the display name of my J2EE component</display-name>
    <filter-name>GBKFilter</filter-name>
    <filter-class>com.jxc.commons.GBKFilter</filter-class>
</filter>
<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>
</servlet>
<servlet-mapping>
   <servlet-name>dwr-invoker</servlet-name>
   <url-pattern>/dwr/*</url-pattern>
</servlet-mapping>
<servlet-mapping>
    <servlet-name>action</servlet-name>
    <url-pattern>*.do</url-pattern>
</servlet-mapping>
<filter-mapping>
    <filter-name>GBKFilter</filter-name>
    <url-pattern>/*</url-pattern>
</filter-mapping>
<welcome-file-list>
    <welcome-file>index.jsp</welcome-file>
</welcome-file-list>
</web-app>

3、在WEB-INF下增中dwr.xml文件：

dwr.xml:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting
2.0//EN" "http://www.getahead.ltd.uk/dwr/dwr20.dtd" >
<!-- <!DOCTYPE dwr SYSTEM "dwr20.dtd" > -->
<dwr>
       <allow>

<!--creator属性的值可以是new,struts,spring......因为此处是整合spring来做的，所以设置成“spring”，javascript="personnelJS" 表示实例转换成javascript语言后以personnelJS命名 -->
            <create javascript="personnelJS" creator="spring">

<!-- param元素的name属性值可以是class,beanName等，此处用beanName,value得值是定义在applicationContext.xml中某个bean的id值。-->
              <param name="beanName" value="personnelAJAX"></param>

<!-- 该param指dwr查找spring配置文件的路径 -->
              <param name="location" value="applicationContext.xml" />

<!-- include指要经spring执行的类的那个方法转换到js文件中 -->
              <include method="getPersonnel"/>
            </create>

<!-- comvert属性指转换成js的类方法如果返回的是对象或者集合时，对象的类型是哪个实体 -->
            <convert match="com.jxc.config.entity.Personnel" converter="bean">

<!-- parame属性指将实体对象的那些字段生成js文件，而不用将实体的所有属性都生成js文件 -->
            <param name="include" value="id,userName,department,password,gongZi,sex,telephone,qq,email,address,idcard,quanXian"></param>
            </convert>
            <convert match="com.jxc.config.entity.Department" converter="bean">
            <param name="include" value="id,department"></param>
            </convert>
       </allow>
</dwr>

4、创建一个实体bean供DWR转换成js

package com.jxc.config.service;

import com.jxc.config.entity.Personnel;

public class PersonnelManager {
private IPersonnelService personneService = null;

public void setPersonneService(IPersonnelService personneService) {
   this.personneService = personneService;
}
public Personnel getPersonnel(int id){
   return personneService.getById(id);
  
}

}

5、在applicationContext.xml中配置第4步写的bean

<!-- ajax Bean -->
   
    <bean id="personnelAJAX" class="com.jxc.config.service.PersonnelManager">
     <property name="personneService" ref="personnelService"></property>
    </bean>

6、测试是否成功：

http://localhost:8080/项目名/dwr/index.html

7、在jsp页面中调用 
先导入以下文，每个文件的功能这里不再详述 
<script type='text/javascript'
    src='/jxcSoftware/dwr/interface/personnelJS.js'></script>
   <script type='text/javascript' src='/jxcSoftware/dwr/engine.js'></script>
   <script type='text/javascript' src='/jxcSoftware/dwr/util.js'></script>

var reply0 = function(personnel) {
   if (personnel != null) {
    var outHtml = "<table border='0' cellpadding='0' cellspacing='1' class='AllmiddleTable' id='AllmiddleTable'>";
    outHtml += "<tr><td class='leftTitle' style='background-color: #eef7fd' align='right' width='150px'>所属部门</td>";
    outHtml += "<td style='color: #1a438e;'>" + personnel.department.department + "</td></tr>";
    outHtml += "<tr><td class='leftTitle' style='background-color: #eef7fd' align='right' width='150px'>员工编号</td>";
    outHtml += "<td style='color: #1a438e;'>" + personnel.id + "</td></tr>";
      outHtml += "</table>";
    var oTable = document.getElementById("tPersonnelDetail");
    oTable.innerHTML = outHtml;
   }
}

function ShowPersonnel(personnelId) {
   personnelJS.getPersonnel(personnelId, reply0);
   ShowDiv('dvCus');
}

function CloseDiv(id) {
   var oDiv = document.getElementById(id);
   if (oDiv) {
    oDiv.style.display = "none";
   }
}
function ShowDiv(id) {
   var oDiv = document.getElementById(id);
   if (oDiv) {
    oDiv.style.display = "block";
   }
}

// 页面调用标签

<td ondblclick="ShowPersonnel('${personnel.id}');" style="cursor: pointer;">
          <bean:write name="personnel" property="id" />
</td>




 

 

 

<?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 creator="spring"   javascript="dwrpro">    
        <!-- 是指spring中的beanName,即ID的名字 -->    
        <param name="beanName" value="dwr"/>    
        <!-- 本对象在spring哪个配置文件中 -->    
        <param name="location" value="applicationContext-common.xml"/>    
                  <!-- 要暴露出来方法-->    
        <include method="checkUserName"/>    
        <include method="searchChildArea"/>    
        <include method="searchChildTrade"/>    
            
    </create>    
    <!-- 此配置用于将bean转换到客户端 -->    
    <convert converter="bean" match="com.umn.pojo.User">    
        <!-- 下面的inclued将选择将bean的属性公布于客户使用,不写的话将所有的属性公布于客户端-->    
        <param name="include" value="id,name"/>    
    </convert>    
      </allow>    
</dwr>