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>