在前一篇笔记中写了第一个DWR程序,现在对它扩展一下。(第一篇URL:点击打开链接)
第一步:增加一个新的js文件
<script type='text/javascript' src='/ezTalk/dwr/util.js'></script>
这个文件其实是一个工具类,负责对客户端的对象进行封装,具体的方法可以查看帮助文档(也就是那么几个:setValue, getValue, getText,addRows,removeAllRows,...).
第二步:script脚本调用进行扩展和合并
- 将回调方法合并到调用方法中
- 增加Timeout和errorHandler的处理。
- 改写取值和赋值 (调用util.js的类和方法,其实这个是Optional(可选)的,我在想DWR和JQuery是不是可以共存呢,留待以后测试)
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>DRM3 Test</title>
<!-- 注意以下两个javascript的顺序不能随便改
1.第一个是engine.js文件,由dwr.jar包提供
2.第二个是util.js文件,这个是可选的,负责简化处理客户端的html对象取值和赋值
2.第三个是根据自己写的类生成的js文件,格式为/{app name}/dwr/interface/{在dwr中暴露的javascript类名.js}
3.如果对script的写法不好掌握,可以调用以下URL查看:
http://urlname/app name/drw/
-->
<script type='text/javascript' src='/ezTalk/dwr/engine.js'></script>
<script type='text/javascript' src='/ezTalk/dwr/util.js'></script>
<script type='text/javascript' src='/ezTalk/dwr/interface/DwrTest.js'></script>
<script type="text/javascript">
function sendMessage()
{
//var message = document.getElementById("message").value;
var message = dwr.util.getValue("message");
//直接用dwr.xml中暴露出来的类来调用,第一个是方法test的传入参数,最后一个是回调的方法
//DwrTest.test(message,showMessage);
DwrTest.test(message,
{
callback: function(data){
dwr.util.setValue("returnmessage",data);
},
timeout: 3000,
errorHandler: function(errstring){
alert("出错啦:" + errstring);
}
}
);
}
</script>
</head>
<body>
<input type="text" id="message" name="message" />
<input type="button" value="send message" onclick = "sendMessage()" />
<div id="returnmessage"></div>
</body>
</html>
测试通过~~~~ 收工