用动态元素自动更新 Web 页面

核心提示： 直到现在，JSF 对这个问题都没有好的解决办法，用动态元素自动更新 Web 页面(2)，虽然，您可能熟悉 Java Swing 应用程序，监视变更的方法是添加一个侦听器来查询服务器端数据的变更，并让服务器端在变更发生后通知侦听器，比如 “clock”，其中数据更改会引起

直到现在，JSF 对这个问题都没有好的解决办法。虽然，您可能熟悉 Java Swing 应用程序，比如 “clock”，其中数据更改会引起 GUI 更新，或者您可能已经在一些基础的 Swing 开发指南中读到过有关如何实现这类应用程序的详细信息，但是这种方法对于我的场景不会奏效。Swing 已经提供了一种成熟的方式来仅仅基于内部的数据状态自动更新 GUI，但是 JSF 并不支持基于服务器端的请求刷新 GUI。如果研究一下 JSF 的标准生命周期，不难发现用户通常需要在 Web 页面上生成一个事件（比如，通过单击一个按钮）来调用 GUI 刷新。这意味着即使动态元素能在运行时创建并被添加到一个 Web 页面，如果没有来自用户的交互，这个 Web 页面仍不能自动刷新。

那么，该如何用动态元素自动更新一个 Web 页面呢？在本文中，我将探讨如下的解决方案：

清除旧的 UI 组件并将新的组件添加到 Web 页面的适当位置

将不同的事件处理程序绑定到 Web 页面的不同元素

注册一个能侦听服务器端变更的侦听器

使用 Ajax 技术只刷新 Web 页面的动态部分，而不是整个页面

监视服务器端的数据变更

为了更好地解释我的解决方案，我将在整篇文章中只采用一个简单的例子。此应用程序是一个进行在线书籍销售的网站。诸如书的类别以及每个类别中的书的数量等库存信息将在这个网站的主页（参见图 1）中显示。

图 1. 在线售书网站的主页

为了反映正确的信息，需要实时同步库存信息与数据库端的数据。由于从库存中添加或删除书的操作会导致服务器端数据的变更，所以必须要监视这些动作。监视变更的方法是添加一个侦听器来查询服务器端数据的变更，并让服务器端在变更发生后通知侦听器。清单 1 显示了该如何将侦听器注册到一个类以及如何从一个类中解除侦听器的注册。