增强站点交互性 Ajax小部件鉴赏(1)
Web 2.0 强调以独特、新颖的方式与网站的客户交互。其中很多创新技术都使用图形和小部件，它们与服务器进行通信，获取用于显示的数据。在本文中，我将介绍五个这样的小部件 ―― 有些是开源的，有些是需要许可的 ―― 它们通过 Ajax 和 XML 与服务器通信。
- carousel: 这个小部件是一个滚动的图像浏览器，客户可以通过滚动查看一系列的项目，每个项目用一个小图形表示。当用户单击一个项目时，进行什么处理可以由您来决定。carousel 在实际情况中的例子有 Flikr 站点和 Apple 的 iTunes 界面。carousel 是免费提供的，它基于流行的 jQuery JavaScript 框架。
- SWF/Charts:这种基于 Adobe Flash 的控件从服务器上的 XML 中读取图表数据和样式选项，然后根据数据显示一个图表。它的界面非常优雅，由于很容易创建 XML 数据，所以很容易将动态图形添加到页面中。
- SWF/Gauge: 与 SWF/Charts 类似，这个 Flash 小部件使用服务器上的 XML 来构建一个完全可定制的仪表盘显示屏。其外观可以仿制飞机或汽车上的仪表盘，或者更流行的样式。这可完全由您选择。
- 就地编辑: 严格来说它不能算是个小部件，而是从用户那里获得信息的一种直观的、交互式的、轻量级的方式。这种功能是 Scriptaculous 框架附带的，位于 prototype.js 库之上。
- DHTML windows: DHTML window 为在页面内容上放置无模式的悬浮窗提供了一种机制。用户可以移动窗口，调整它的大小，或者使之消失。窗口的内容可以由页面上的 JavaScript 指定，也可以通过 Ajax 从服务器上读取。这种类型的窗口非常适合用作一种报警机制，也很适合用于弹出小的窗体，从而避免重新装载整个页面。
我将首先展示 SWF/Charts 小部件，因为我认为它是最容易部署的小部件之一。相对于所花费的精力，它的回报也是最大的。
一、SWF/Charts 小部件
俗话说：“一画抵千言”。这句话很难反驳，尤其是在谈论图形的时候。然而一直以来，在 Web 上画图并非易事。虽然有些 Web 框架包括了一些用于构建图像的基本图形，但大多数 Web 框架都缺少即开即用的画图工具。这种功能的缺失使您必须自己来构造图形。
如果有一个小部件能将 XML 编码的数据画出来，岂不是很好?事实上就有这么一个小部件：SWF/Charts。为了开始使用这个小部件，我从网站下载了 SWF 文件，另外还下载了这个小部件所使用的其他一些 SWF 文件。然后，我将这些文件安装在我的站点上，并在 HTML 上添加了一个到 SWF 小部件的链接，如 清单 1 所示。
清单 1. Chart_page.html
|
|
Charts.swf 有两个参数：一个是其库目录的位置，还有一个是 XML 数据的 URL。XML 数据格式相当简单。清单 2 显示了一个简单的例子。
清单 2. Chart_data.xml
这个文件基本上都是用于图表的数据，还有一些可选的视觉信息。在这个例子中，我将图表的类型指定为条形图。我下载的 SWF 文件所在的那个站点上有关于可以设置的选项以及可用的图形类型的更多信息。
当在 Firefox 浏览器中浏览到这个文件时，可以看到如 图 1 显示的图形。
图 1. 使用中的 Chart 小部件
可以看到，这个图表的默认颜色模式和外观确实很整洁。这个图恰到好处地对轴线值进行了均匀布置。整体效果非常好，而我为之付出的精力并不多。
显然，可以用一个动态 Web 页面替换 graph_data.xml 文件：只要返回的数据具有正确的格式，图形控件关系不大。本文中的所有例子都是这样的。实际上，可以在一个 Web 浏览器中运行本地文件上的所有例子，而不必使用 Web 服务器(比如 Apache Tomcat 或 IBM® WebSphere® Application Server)或 Web 编程语言(比如 PHP、Microsoft® ASP.NET、Java™ 2 Enterprise Edition [Java EE])。
