Web 2.0 强调以独特、新颖的方式与网站的客户交互。其中很多创新技术都使用图形和小部件，它们与服务器进行通信，获取用于显示的数据。在本文中，我将介绍五个这样的小部件 —— 有些是开源的，有些是需要许可的 —— 它们通过 Ajax 和 XML 与服务器通信。

请访问Ajax 技术资源中心，这是有关 Ajax 编程模型信息的一站式中心，包括很多文档、教程、论坛、blog、wiki 和新闻。任何 Ajax 的新信息都能在这里找到。
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 小部件，因为我认为它是最容易部署的小部件之一。相对于所花费的精力，它的回报也是最大的。
俗话说：“一画抵千言”。这句话很难反驳，尤其是在谈论图形的时候。然而一直以来，在 Web 上画图并非易事。虽然有些 Web 框架包括了一些用于构建图像的基本图形，但大多数 Web 框架都缺少即开即用的画图工具。这种功能的缺失使您必须自己来构造图形。
如果有一个小部件能将 XML 编码的数据画出来，岂不是很好？事实上就有这么一个小部件：SWF/Charts。为了开始使用这个小部件，我从网站下载了 SWF 文件，另外还下载了这个小部件所使用的其他一些 SWF 文件。然后，我将这些文件安装在我的站点上，并在 HTML 上添加了一个到 SWF 小部件的链接，如清单 1 所示。

Charts.swf 有两个参数：一个是其库目录的位置，还有一个是 XML 数据的 URL。XML 数据格式相当简单。清单 2 显示了一个简单的例子。
bar 2005 2006 Projected 500 700 Actual 600 900
这个文件基本上都是用于图表的数据，还有一些可选的视觉信息。在这个例子中，我将图表的类型指定为条形图。我下载的 SWF 文件所在的那个站点上有关于可以设置的选项以及可用的图形类型的更多信息。
当在 Firefox 浏览器中浏览到这个文件时，可以看到如图 1 显示的图形。

可以看到，这个图表的默认颜色模式和外观确实很整洁。这个图恰到好处地对轴线值进行了均匀布置。整体效果非常好，而我为之付出的精力并不多。
显然，可以用一个动态 Web 页面替换 graph_data.xml 文件：只要返回的数据具有正确的格式，图形控件关系不大。本文中的所有例子都是这样的。实际上，可以在一个 Web 浏览器中运行本地文件上的所有例子，而不必使用 Web 服务器（比如 Apache Tomcat 或 IBM® WebSphere® Application Server）或 Web 编程语言（比如 PHP、Microsoft® ASP.NET、Java™ 2 Enterprise Edition [Java EE]）。




回页首
显示数据的另一种极具吸引力的方式就是使用仪表盘小部件。个人而言，我不是很欣赏这种做法，因为即使是显示一点点信息都要占用大量的空间。但仪表盘是高管仪表板的一个关键特性，所以若能快速创建仪表盘，将会十分方便。
但是，如果 Web 连简单的柱形图都处理不好的话，那么当然也就不能处理圆形的仪表盘了。所以，我又将目光投向创建 XML/Graph 的同一家公司。他们也有一个针对仪表盘的解决方案：XML/Gauge。
我将从嵌入了 SWF/Gauge 小部件的 HTML 开始，如清单 3 所示。

gauge.swf 带有一个参数：数据的位置。在这个例子中，这个位置为 gauge_data.xml，如清单 4 所示。

可以看到，SWF 对这个小部件采取了一种不同的处理方法。实际上，我是用圆、弧和矩形之类的基本图形构建仪表盘的，而没有通过为仪表盘（或图形）指定数据的方式。
坦白地说，我更喜欢一组预先设置好的仪表盘，这样一来，我所要做的只是用它们提供数据。但是，这里的这种方法仍然有效，它给予了我无限的调整空间 —— 尽管我更喜欢预先设置好的仪表盘以便在此基础上展开工作。
当在浏览器中访问那个页面时，可以看到如图 2 所示的仪表盘。

您可能会想，由于局限于一些基本图形，这种小部件并不能带来更好的效果。事实并非如此。基本图形也包括一些简单的动画技术，所以仍然有可发挥的空间，例如可以创建热点链接区，用户可以通过单击这些链接进行导航。此外，还可以想得更远一些，不仅可以将它用于仪表盘，而且还可以使用其简单的图形原语构建任何类型的图像和简单的动画。




回页首
在桌面应用程序中，就地编辑功能并不鲜见，但是到目前为止，这个功能在 Web 上还不多见。在 Web 2.0 中，交互性变得非常重要，所以像就地编辑之类的技术也更加普遍起来。
为了实现就地编辑，可以自己编写代码，也可以使用一个 JavaScript 框架来处理大部分事情。最流行的一个工具包就是 Scriptaculous 框架，它构建在 prototype.js 库之上。Scriptaculous 库使得构建就地编辑控件非常容易。
清单 5 显示了就地编辑的一个简单的 HTML 测试文件。

Name	Candy bar

首先，Inplace.html 包括所有必需的 JavaScript 源文件。然后，我插入了一个简单的表，其中有一个包含可就地编辑的 数据的段落。在文件的最后，我插入了一小段脚本，用于为那个段落创建 InPlaceEditor 对象。
InPlaceEditor 构造函数带有两个参数：一个参数是段落的 ID，另一参数是用于在我完成编辑之后处理提交的那个页面的 URL。在这个例子中，该页面为 submitted.html；但实际上，它也可能是一个 ASP.NET、Java EE 或 PHP 页面，或者是使用其他一些动态 Web 技术的页面。
清单 6 显示了简单的 submitted.html 文件。

Name changed!

现在来做一下测试。首先用浏览器打开这个 HTML 文件。一开始可以看到初始的文本。当把鼠标放在文本上时，它变成黄色，如图 3 所示。

黄色意味着用户可以单击该字段，然后对其进行编辑。于是，我单击该字段，随后得到了一个 Name 字段、一个 ok 按钮和一个 cancel 链接，如图 4 所示。

然后，我改变文本，并单击 ok，这样就会将数据发送到服务器（或者 submitted.html 页面，就像这个例子一样）。然后，服务器返回替换了初始文本的 HTML 页面。在这个例子中，我发回了 Name changed! （如图 5 所示）；在实际应用中，它更可能是数据的新值。

这些简单的界面升级就可以使应用程序的可用性大大提高。等待页面装载（尤其是从较慢的服务器上装载）会让人觉得界面太土、太陈旧。使用就地编辑器之类的简单工具就可让应用程序光鲜起来，而实现起来并不复杂。




回页首
浏览器使在 Web 页面上构建模式窗口变得更困难，这也许是件好事。但是有时候，小窗口也不错。它们便于显示警告，或者弹出小型表单。它们也是弹出广告的一种很好的方式，这些烦人的广告总是盖住了页面的内容。哦，等等：最后一句收回。
不管怎样，为动态 HTML（DHTML）页面构建窗口并不容易。所以，当我发现这个基于流行的 Protoype.js 库的极其健壮的窗口包时，感到非常高兴。它不仅容易使用，界面还可以换肤，而且在每个浏览器上都运行得很好。清单 7 显示了 window.html 页。

我首先将 prototype.js 和 window.js 源文件放进头部。然后，用我喜欢的参数构建弹出对象，包括大小、位置、标题和小部件从中获取显示内容的页面的 URL。通过 Ajax 从一个页面装载内容仅仅是获取内容的一种方法。您也可以通过 JavaScript 代码动态地设置它们，或者用页面上已有的