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

用动态元素自动更新Web页面2010-12-08 IBM Li Li Lin您可能知道如何在标准 JSF 组件内使用 JavaScript 和 Cascading Style Sheets （CSS）来隐藏和显示可选的 JavaServer Faces （JSF）组件。为了实现这个目的，您需要首先识别所有的 JSF 组件并将它们写入到 JSF 页面。但是，如果开发的是包含动态元素的 Web 页面并且这些动态元素直到运行时才知道，那么就不可能这么做。在本文中，了解如何在自动更新 Web 页面的动态元素的同时，清除旧的 UI 元素，以及如何使用 Java™ 代码来添加新的元素并将它们放入到 Web 页面中的适当位置。您还将了解如何将不同的事件处理程序绑定到 Web 页面的不同动态元素、如何注册一个侦听器来侦听服务器端数据的变更以调用页面刷新，以及如何使用 Asynchronous JavaScript and XML （Ajax）技术来只刷新 Web 页面的动态部分。

简介

有时，您可能需要用动态元素自动更新一个 Web 页面。比如，对于一个投票网站，它需要在数据库接收到新的投票时就立刻更新投票结果，又比如，一个股票网站需要能够定期地更新证券的实时交易数据。投票结果以及实时的交易数据都是动态元素，直到运行时才能知道，但是当服务器端发出信号时，这些元素就应该能被添加或更新。那么，在一个 JSF 应用程序中如何做到这一点呢？

此前的一篇 developerWorks 文章 “联合使用 CSS、 JavaScript 和 JSF 精心打造 Ajax 应用程序，第 2 部分: 动态 JSF 表单 ” 介绍了如何在刷新 Web 页面的同时隐藏和显示可选的 JSF 组件。但是，这篇文章中所介绍的方法并不能解决上述问题。因为该方法需要您标识出所有的 JSF 组件并将它们写入到您的 JSF 页面。如果这些动态元素直到运行时都无法被识别，该怎么办呢？

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

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

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

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

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

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

监视服务器端的数据变更

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

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