Posted on 2008-04-20 16:55
探佚 阅读(508)
评论(0) 编辑 收藏 所属分类:
CSS/JavaScript/AJAX
开发前准备:MyEclipse5.5 + DWR1.0
一、在web.xml文件中加入DWR的配置
<?xml version="1.0" encoding="UTF-8"?>
<web-app id="WebApp_ID" version="2.4"
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">
<display-name>AjaxDWR</display-name>
<servlet>
<servlet-name>DWRServlet</servlet-name>
<servlet-class>uk.ltd.getahead.dwr.DWRServlet</servlet-class>
<init-param>
<param-name>debug</param-name>
<param-value>true</param-value>
</init-param>
</servlet>
<servlet-mapping>
<servlet-name>DWRServlet</servlet-name>
<url-pattern>/dwr/*</url-pattern>
</servlet-mapping>
</web-app>
二、编写Java类，后面通过DWR在JS中调用Java类
public class Manager {
public String say(String userName) {
String msg = userName + "恭喜您！DWR测试成功!";
return msg;
}
}
三、WEB-INF目录下添加dwr.xml文件。加入如下内容
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting 1.0//EN" "http://www.getahead.ltd.uk/dwr/dwr10.dtd">
<dwr>
<init></init>
<allow>
<!-- 将 Java 类 Manager 映射为 JavaScript 里面的对象 Manager -->
<create javascript="Manager" creator="new">
<param name="class" value="com.tanyi.core.Manager" />
</create>
</allow>
</dwr>
四、编写test.jsp文件
1、导入DWR相应类库
<!--
dwr/interface/Hello.js 由DWRServlet根据dwr.xml中的設定生成
dwr/engine.js 负责客户端与服务器端通信
dwr/util.js 封装了一些JS函数,可以直接调用
-->
<script type="text/javascript" src="dwr/interface/Manager.js" />
<script type="text/javascript" src="dwr/engine.js" />
<script type="text/javascript" src="dwr/util.js" />
2、编写页面显示信息
用户名:<br />
<input type="text" id="userName"/><br />
响应信息:<br/>
<div id="result"></div><br/>
<input type="button" value="确定" onclick="sendRequest()"/>
3、编写JS代码，调用Java类
<script type="text/javascript">
// 发送请求
function sendRequest()
{ // 1. 获得文本框userName中的值
var user = $('userName').value;
// 2. 调用Java类Manager.say(String userName)方法,并传入回调函数
Manager.say(user, callback);
}
// 回调函数
function callback(responseContent)
{
// 3.将回调函数的值显示到id=result的div中
DWRUtil.setValue('result', responseContent);
/*
上面一句代码等效于：
var oDiv = $('result');
oDiv.innerHTML = responseContent;
*/
}
</script>