DWR3 学习笔记 - 第一个DWR3程序(扩展）

在前一篇笔记中写了第一个DWR程序，现在对它扩展一下。（第一篇URL：点击打开链接）

第一步：增加一个新的js文件

这个文件其实是一个工具类，负责对客户端的对象进行封装，具体的方法可以查看帮助文档（也就是那么几个：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>

测试通过~~~~ 收工

DWR3 学习笔记 - 第一个DWR3程序(扩展）

猜你喜欢