实现基本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()用于刷新定时器值。

本文作者:
« 
» 
快速导航

Copyright © 2016 phpStudy | 豫ICP备2021030365号-3