javascript - 刷新页面而不出现屏幕空白？

Question

我想知道 GMail 和类似的东西如何能够更新其中的电子邮件，而不会让整个屏幕变成空白。

我正在开发 web tools site here 。正如您在右侧边栏上看到的，有一个新闻源显示某些成员的最近事件。

这是一个简单的PHP脚本，显示最新的事件，这些事件存储在MYSQL表中。然后将此 PHP 脚本构建为侧边栏的 iframe。

我希望侧边栏自动更新。它可以按时间间隔(例如每 10 秒)更新一次，也可以在添加新事件时更新。

我尝试每 5 秒进行一次元刷新(在 PHP 脚本上)...但效果不佳。每隔 5 秒，整个侧边栏就会变成空白，然后重新出现。另外，每次侧边栏刷新时，网站的加载轮都会不断出现。

有没有更简单的方法来做到这一点？也许使用某种类型的 JavaScript 事件来检查新事件，然后将它们吐出，而不是刷新整个页面？

编辑:好的，谢谢您的帮助!我用 AJAX 搞定了!但是，我现在遇到了不同的问题...请继续阅读...

我使用 JavaScript 在每个事件的右下角显示时间。我正在使用类似于此的代码...

<div class="event">
<p>The event text</p>
<script type="text/javascript">
document.write(get_time(1332900003));
</script>
</div>

这将是实际存储在数据库中的 HTML。问题是 AJAX 正在抓取此代码，将其吐出(到 iframed 页面上)，然后时间片段没有被执行(其他一切正常)。

我更喜欢使用 JavaScript 而不是 PHP 来显示时间，因为使用 JS 你不必担心时区差异。

我可以解决这个问题吗？

Answer 1

本质上，如果您想模仿 GMAIL 和其他各种网站呈现页面的概念，然后在此处操作它，而不需要在事务之间重新加载页面，正如 j08691 在评论中指出的那样，AJAX 是您寻找的方法，但是，它需要 JavaScript 知识和一些服务器端脚本(例如您的情况下的 PHP)。

为了在构建可扩展的软件(甚至只是一个网站)时变得轻松，我建议研究 JavaScript 库，如 jQuery、Prototype、Dojo 等。我个人喜欢 jQuery，因为在我看来它非常稳定，有一个庞大的支持社区，而且总体来说很容易学习。

它将有助于快速开发基于 JavaScript 的代码，这些代码将跨浏览器兼容，而无需在 native JavaScript 中编写冗长的脚本来执行相同的操作，您可以通过支持它的库更轻松地实现这一点。

http://www.jquery.com - 核心库

http://www.jqueryui.com - 库的扩展

此外，您还可以选择数十万个小插件来帮助更快地开发整体用户体验。