Ajax基础教程(4)- 实现基本Ajax技术 4.4 创建自动刷新页面

股票行情、天气数据、标题新闻……这些都是经常改变的数据,但不值得为这些数据的修改手工地完全刷新页面。尽管CNN.com之类的网站确实会定期重新加载,但是,如果只是为了改变一两个标题新闻和几个图就重绘整个页面,这可能很让人扫兴。当然,如果刷新整个页面,可能很难发现到底哪些是新内容!

如果使用Ajax,用户就不用反复点击refresh(刷新)按钮。技术新闻网站Digg (http://digg.com/spy)就使用了这种技术。Digg采用自动刷新方法不断更新其页面,并使用了很有帮助的褪色技术,以可视化的方式让用户知道哪些新闻是新的(见图4-7)。


图4-7 Digg.com,自动刷新页面的例子


如果查看Apple的新闻,你可能已经看到Steve Jobs在Apple的2005世界开发人员大会上的主题演讲,其中透露Apple将开始转向Intel处理器。MacRumors.com (http://www. macrumors. com/)的小组使用Ajax技术相当及时地发布了这个信息,而且减轻了其服务器的压力。最近,Apple的iTunes网站(http:// www.apple.com/itunes/)正在使用Ajax动态更新其下载数(目标是5亿)(见图4-8)。

自动刷新页面实际上相当简单。对于代码清单4-7所示的例子,使用一个按钮开始“轮询”,不过在实际应用中,可能会以onload事件代之。doStart()方法负责启动,不过最有意思的地方是pollCallback()方法中的setTimeout()方法,它允许以固定的时间间隔(单位是毫秒)执行给定的方法。createRow()方法只是一个充分利用了DOM方法来动态创建内容的辅助函数,refreshTime()用于刷新定时器值。

代码清单4-7 dynamicUpdate.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Ajax Dynamic Update</title>
<script type="text/javascript">
var xmlHttp;
function createXMLHttpRequest() {
if (window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
}
}
function doStart() {
createXMLHttpRequest();
var url = "DynamicUpdateServlet?task=reset";
xmlHttp.open("GET", url, true);
xmlHttp.onreadystatechange = startCallback;
xmlHttp.send(null);
}
function startCallback() {
if (xmlHttp.readyState == 4) {
if (xmlHttp.status == 200) {
setTimeout("pollServer()", 5000);
refreshTime();
}
}
}
function pollServer() {
createXMLHttpRequest();
var url = "DynamicUpdateServlet?task=foo";
xmlHttp.open("GET", url, true);
xmlHttp.onreadystatechange = pollCallback;
xmlHttp.send(null);
}
function refreshTime(){
var time_span = document.getElementById("time");
var time_val = time_span.innerHTML;
var int_val = parseInt(time_val);
var new_int_val = int_val - 1;
if (new_int_val > -1) {
setTimeout("refreshTime()", 1000);
time_span.innerHTML = new_int_val;
} else {
time_span.innerHTML = 5;
}
}
function pollCallback() {
if (xmlHttp.readyState == 4) {
if (xmlHttp.status == 200) {
var message =
xmlHttp.responseXML
.getElementsByTagName("message")[0].firstChild.data;
if (message != "done") {
var new_row = createRow(message);
var table = document.getElementById("dynamicUpdateArea");
var table_body =
table.getElementsByTagName("tbody").item(0);
var first_row =
table_body.getElementsByTagName("tr").item(1);
table_body.insertBefore(new_row, first_row);
setTimeout("pollServer()", 5000);
refreshTime();
}
}
}
}
function createRow(message) {
var row = document.createElement("tr");
var cell = document.createElement("td");
var cell_data = document.createTextNode(message);
cell.appendChild(cell_data);
row.appendChild(cell);
return row;
}
</script>
</head>
<body>
<h1>Ajax Dynamic Update Example</h1>
This page will automatically update itself:
<input type="button" value="Launch" id="go" onclick="doStart();"/>
<p>
Page will refresh in <span id="time">5</span> seconds.
<p>
<table id="dynamicUpdateArea" align="left">
<tbody>
<tr id="row0"><td></td></tr>
</tbody>
</table>
</body>
</html>

时间: 2016-11-10

Ajax基础教程(4)- 实现基本Ajax技术 4.4 创建自动刷新页面的相关文章

Ajax基础教程(1)-Ajax简介 1.5 相关技术

当你看到本书时,可能已经了解了在应用中实现Ajax所需的大多数技术.重申一句,我们想强调的是,Ajax是一个客户端技术,不论你现在使用何种服务器端技术,都能使用Ajax,而不管使用的是Java..NET.Ruby.PHP还是CGI.实际上,在这本书中我们并不考虑服务器端,而且假设你已经很清楚如何结合日常工作中使用的服务器端技术.在后面的几百页中,我们强调的重点是客户端技术和方法,创建丰富的基于浏览器的应用时需要用到这些技术. 尽管可以使用你喜欢的任何服务器端技术,但当使用Ajax时还是需要转变一

Ajax基础教程(1)-Ajax简介 1.8 小结

因特网最初只是为连接研究人员,使他们共享信息,时至今日,因特网已经得到了巨大的发展.因特网开始时只有简单的文本浏览器和静态页面,但是如今几乎每家公司都有一个亮丽的网站,想找到一个粗糙的网站倒是很不容易.最早谁能想得到,有一天人们能在网上共同研究新型汽车,或者购买最新的斯蒂芬·金的小说呢? 胖客户应用的开发人员都饱受部署之苦,因为要把应用部署到数以千计的用户机器上,他们急切地希望Web能够减轻他们的负担.多年以来,已经出现了许多Web应用技术,有些是专用的,有些需要高超的编程能力.尽管这些技术在用

Ajax基础教程(1)-Ajax简介 1.6 使用场合

既然你已经对Ajax产生了兴趣,还要知道重要的一点,即什么时候应该使用Ajax技术,而什么时候不该用.首先,不要害怕在应用中尝试新的方法.我们相信,几乎每个Web应用都能从Ajax技术中获益,只不过不要矫枉过正,过于离谱就行了.从验证开始就很合适,但是不要限制你的主动性.你当然可以使用Ajax提交数据,但也许不能把它作为提交数据的主要方法. 其次,惟一会影响你应用Ajax的就是浏览器问题.如果大量用户(或者特别重要的用户)还在使用比较旧的浏览器,如IE 5.Safari 1.2或Mozilla

Ajax基础教程(1)-Ajax简介 1.4 可用性问题

前面谈到的都是用户的期望,除此以外,可用性也不能不提.Ajax方法相当新,还没有多少成熟的最佳实践.不过,标准Web设计原则还是适用的.随着时间推移,当越来越多的人开始尝试这种方法时,就会发现可能存在哪些限制,并建立适当的指导原则.也就是说,你应该让用户来指导你.根据在应用中使用Ajax的方式,你可能会动态地改变页面中的某些部分,习惯于整个浏览器刷新的用户可能不会注意到与以前相比有什么变化.这个问题引出了一些新的特性,如37signals所普及的黄褪技术(Yellow Fade Techniqu

Ajax基础教程(1)-Ajax简介 1.2 浏览器历史

提到Web浏览器,大多数人都会想到无处不在的Microsoft Internet Explorer,直到最近像Firefox.Safari和Opera之类的浏览器日益兴起,这种情况才稍有改观.许多新手可能会误认为IE是市场上的第一个浏览器,其实不然.实际上,第一个Web浏览器出自Berners-Lee之手,这是他为NeXT计算机创建的(这个Web浏览器原来取名叫WorldWideWeb,后来改名为Nexus),并在1990年发布给CERN的人员使用.Berners-Lee和Jean-Franco

Ajax基础教程(1)-Ajax简介 1.7 设计考虑

既然对在哪里使用Ajax已经有所认识,下面再来谈谈应用Ajax的一些设计考虑.许多原则与Web应用的原则并无不同,不过还是有必要强调一下.要尽力减少客户和服务器之间的通信量.如果应用得当,Ajax会使你的应用响应更快,但是如果每次用户从一个域移到另一个域时你都来回传递超量的数据,用户肯定不会满意.如果有疑问,按标准约定行事.如果大多数应用都那么做,可能你也应该那么做.如果还有问题,可以看看Web桌面应用的有关标准.为此已经建立了一些模式,而且以后还会有更多的模式(www.ajaxpatterns

Ajax基础教程(1)-Ajax简介 1.1 Web应用简史

混沌初开,一切都那么简单.为了连接美国的少数几个顶尖研究机构,人们设计了最早的"Internet",以便共同开展科学研究.不论是图书馆员.核物理学家,还是计算机科学家,都必须学习一个相当复杂的系统.1962年,麻省理工学院(MIT)的J.C.R. Licklider最早提出他的"Galactic Network"(超大网络)思想时,Firefox和IE之类的便捷工具连概念都未产生. Licklider后来继续在美国国防高级研究计划局(DARPA)从事计算机研究,在那

Ajax基础教程(1)-Ajax简介 1.3 Web应用的发展历程

最初,所有Web页面都是静态的,用户请求一个资源,服务器再返回这个资源.什么都不动,什么都不闪.坦率地讲,对于许多Web网站来说,这样也是可以的,这些网站的Web页面只是电子形式的文本,在一处生成,内容固定,再发布到多处.在浏览器发展的最初阶段,Web页面的这种静态性不成问题,科学家只是使用因特网来交换研究论文,大学院校也只是通过因特网在线发布课程信息.企业界还没有发现这个新"渠道"会提供什么商机.实际上,以前公司主页显示的信息通常很少,无非是一些联系信息或者只是一些文档.不过没过多久

Ajax基础教程(4)- 实现基本Ajax技术 4.9 小结

本章我们提供了许多例子,展示了应用Ajax技术改善用户体验的方法.在许多情况下,可以把Ajax技术应用到现有的应用中,以Ajax请求取代完全页面刷新,从而与服务器无缝地通信,并更新页面内容.用户可能不会注意到在以另外一种方式完成应用,但是过一段时间之后,他们就会认识到应用变得"更好"了.Ajax技术也可以在开始设计新Web应用时就采用.现在,Ajax工具包应该在你的开发工具箱里有一席之地了,这些工具能帮助你构建更好的Web应用,而且与胖客户应用的表现不相上下,这会让最终用户欣喜万分.