prototype笔记(五)----使用Ajax.PeriodicalUpdater类

最新推荐文章于 2018-05-09 10:28:06 发布

最新推荐文章于 2018-05-09 10:28:06 发布 · 232 阅读

文章标签：

#Ajax #prototype #JavaScript #XHTML #HTML #ViewUI

ajax 专栏收录该内容

19 篇文章

订阅专栏

本文介绍如何利用AjaxPeriodicalUpdater类实现实时更新页面元素的功能，通过示例代码展示了设置定时器更新指定div元素内容的过程，并介绍了如何使用Prototype JavaScript库中的Ajax.PeriodicalUpdater类。

继承自Ajax.Base类。
作用：周期性地更新某些页面元素，例如天气预报，即时新闻等，实现这些功能可以使用Javascript中的定时器函数setTimeout,clearTimeout等，而有了AjaxPeriodicalUpdater类.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
	<head>
		<title>chapter 3</title>
		<script type="text/javascript" language="javascript"
		 src="prototype.js" ></script>
		<script type="text/javascript" language="javascript">
		var count = 0;
		function test() {
			var myAjax = new Ajax.PeriodicalUpdater(
				'divResult',
				'script1.html', 
				{
					method: 'get',
					evalScripts: true,
					frequency: 5
				}
			);
		}
		</script>
	</head>
	<body>
	<input type="button" value="click" onclick="test()" />
	<div id="divResult" ></div>
	<div id="divResult2" ></div>
	</body>
</html>

[color=olive]script1.html[/color]

<script language="javascript" type="text/javascript">
count++;
var str = $('divResult2').innerHTML;
$('divResult2').innerHTML = str + "count = " + count + ": " + new Date() + "<br>";
</script>