Ajax 和 XML: 借鉴最优秀的 Ajax 应用程序-UML软件工程组织-火龙果软件

UML软件工程组织

Ajax 和 XML: 借鉴最优秀的 Ajax 应用程序

作者：Jack D Herrington 出处:IBM

本文内容包括：

Google 地图
TaDaList
Campfire
YourMinis
其他 Web 2.0 站点
结束语
参考资料

跟随本文一起游览 Web 2.0 世界中的一些顶尖的 Asynchronous JavaScript + XML (Ajax) 应用程序。探索这些应用程序在用户层面上获得成功的秘决，发现各种技巧并着手开发自己的 Web 2.0 应用程序，创造令人兴奋的用户体验。

这篇文章着眼于一些最优秀的新一代 Web 应用程序，向大家展示了从中能学到什么 —— 模仿最优秀的应用程序是引以自豪的传统。我相信这些站点不会介意的，毕竟模仿是最诚挚的敬佩。

然而，我没有把技术层面的问题放在首位。因为这些站点的技术问题 —— 数据如何在 Ajax 中传递，固然重要，但是并不是某个站点赖以成功的关键因素。应该要重点考虑站点是如何使用浏览器的 Ajax 特性结合动态 HTML （Dynamic HTML，DHTML ）创建杰出的用户体验的，以及站点是如何与它们的用户社区进行交互的。我将探究所有这些因素，它们和技术一样在站点获得成功的过程中发挥着重要作用。

Google 地图

如果 “最具影响力的 Web 2.0 应用程序” 设有奥斯卡奖或者金球奖，那么得奖者非 Google 地图莫属。我清晰地记得我的一些同事第一次看到 Google 地图时的反应：浏览器竟然可以完成这些任务？在我的印象中，Google 地图重新定义了用户对浏览器中的应用程序的期许，引领了一场 Web 2.0 的运动。

我不太确定这篇文章的读者是否曾经使用过 Google 地图，但不管怎样我还是在图 1 中展示一下这个站点。

图 1. Google 地图的最新版

浏览地图的操作很简单，只需点击和拖拽地图即可，就像是在纸制地图中操作一样。如果您要寻找路线，则它们会以线条的形式出现在地图中，屏幕不会闪烁、地图也不会移动（除非需要这样做）。实际上，Google 地图大部分功能的实现都不需要重新与服务器交互以获取一个新的 HTML 页面。

Google 地图诞生之后，Ajax 和 Dynamic HTML这几个词语永久地刻入了第二次 Web 革命的语言中。但是最让人兴奋地是，严格来讲 Google 地图并不是运行在 Ajax 之上（如果把 Ajax 定义为使用 XMLHTTP 对象发送和接收请求）。Google 地图动态地使用生成的 <script> 标记与服务器来回传递数据。提前定义 XMLHTTP 对象是一个技巧。

但是 Google 地图为什么不使用 Ajax 呢？我不能代表 Google 的工程师发言，但是我感觉 Google 地图的设计灵感来自于 JavaScript 的 “mashup 能力”。

Mashup

在文章开头，我谈到了对用户社区的支持。我承认，这有点儿官腔，但我认为这很重要。Mashup 是支持用户社区的根本。 mashup 的意思就是把某个站点的功能与另一个站点的功能合并到一起，然后创建出更加有趣的一些东西。Mashup 的一个很好的例子就是从 Craigslist 获取房屋出租列表并使用 Google 地图反映其位置的站点。

MapMyRun.com 是Google 地图 mashup 的另一个例子，它使用 Google 地图让赛跑者（或者任何其他人）能计算出地图上各路线的距离。图 2 显示这个功能。

图 2. Map My Run 界面

此处，我在左窗格的输入字段中输入起点。然后使用鼠标指定跑步的经过点。当我单击鼠标时，左窗格立刻动态地更新显示出距离。我可以放大地图获得更详细的内容或者切换到卫星模式（如果路线超过了视图）。

所有繁重的地图绘制工作都是由 Google 地图完成的。MapMyRun 站点只是在地图的表层添加了一些 JavaScript 代码，用于处理鼠标点击和计算距离。

这样，当我要成功地构建 Web 2.0 应用程序时可以从 Google 地图中获得哪些灵感呢？？

使用浏览器： Google 地图大量地利用了如今浏览器的动态性。使用这些浏览器使用户获得令人赞叹的体验，在体验中用户会对浏览器能完成的功能大为惊讶。
Ajax 的纯度并不重要：只有少数人知道 Google 地图不是纯粹的 Ajax 应用程序。但是谁会真的在乎这点呢？Google 地图为用户提供了非常优秀的功能。程序中未使用 XMLHTTP 并没有什么关系。不要太专注于一些特定的技术方法了。
JavaScript mashup：可以通过 JavaScript 编码把某一站点的功能嵌入另一个站点中，这一功能极其令人赞赏。它可提供 viral edge，将您带入实现某种特定功能的源代码。

TaDaList

Google 地图为 Web 2.0 应用程序设置了很高的门槛。但是可以使用 Ajax 在应用程序中快速添加大量的数值。TaDaList 就是这种数值的一个例子。TaDaList 是一个非常简单并且免费的 to-do 列表管理程序。为了演示这个站点，我创建了一个帐户和游泳列表，用来提醒我继续完成游泳训练的各种事项。列表如图3 所示。

图 3. 游泳列表

如果我想要添加购买护目镜的事件，便可以在文本字段中填写该事件然后单击 Add to list。该项内容立刻被添加到列表中相应的位置，而不需要刷新页面，显示界面如图 4 所示。

图 4. 添加 “Buy New Goggles” 之后

这看上去没什么打不了的，而且使用 Ajax 实现这个功能也不难，但是最终用户却会感到这像是从桌面应用程序得到的结果。

请注意，TaDaList 是在 Rails 框架之上编写的，这点很重要。实际上，这个程序是人们学习 Rails 时使用到的一个演示应用程序。而且 Rails 框架使这种类型的 Ajax 应用程序的开发极为轻松。

为了演示，我使用 Rails 花了几分钟时间编写了一个简化版的 TaDaList 应用程序。to-do 项的列表如图 5 所示。

图 5. to-do 项的列表
to-do 内容项的列表

然后键入 Buy earplugs 并单击 Add。该项内容出现列表中，并且而不需要刷新页面，显示界面如图 6 所示。

图 6. 添加 “Buy earplugs” 之后

为了实现这个功能，我创建了一个小型的数据库用来保存 to-do 项。然后再创建一个 Rails 控制器，如清单 1 所示。

清单 1. Todo_controller.rb
　

                
class TodoController < ApplicationController
  def list
    @tasks = Todo.find(:all)
  end
  def add
    task = Todo.new
    task.name = params[:task][:name]
    task.save

    @tasks = Todo.find(:all)
  end
end

清单 1 中的代码使用了两个方法。list() 方法用于显示页面。add() 方法用于在列表中添加新的项目，然后再在 HTML 中返回列表。

list() 方法的 RHTML 如清单 2所示。

清单 2. List.rhtml
　

                
<html>
<head>
<%= javascript_include_tag :defaults %>
</head>
<body>

<div id="results">
<% @tasks.each { |t| %>
<%= t.name %><br/>
<% } %>
</div>

<%= form_remote_tag :url => { :action => 'add' }, :update => 'results' %>
<%= text_field :task, :name %>
<%= submit_tag 'Add' %>
<%= end_form_tag %>

</body>
</html>

这个页面使用 form_remote_tag 把简单表单的内容提交到控制器中的 add() 方法。add() 方法把 to-do 项添加到表中，然后为得到的 <div> 标记返回新的内容。这一功能的代码如清单 3所示。

清单 3. Add.rhtml
　

                
<% @tasks.each { |t| %>
<%= t.name %><br/>
<% } %>

那么，我可以从 TaDaLists 中学到些什么呢？第一，少许 Ajax 应用程序会花大力气使 Web 应用程序感觉更像是桌面应用程序。第二，选择使用 Web 框架 —— 特别是那些包含 Ajax 的框架 —— 可以使这种类型的工作相当简单。

Campfire

Campfire 是 TaDaLists 的同伴，它们都是由相同的工作组开发的(37signals)。在本例中，应用程序将会模拟一个虚拟的 campfire 站点，它托管一个在线聊天室，使远程团队可以相互聊天，并方便地传送文件。

我设置了一个试用帐号，并进行了聊天和上传文件的操作。结果如图 7 所示。

图 7. 为远程团队设计的虚拟 campfire

显示界面的左侧是一个简单的聊天窗口，在这个窗口中用户可以随时提交新的消息。界面的右侧显示了在线用户，还有一个区域用于上传文件。

文件的上传是就地完成的，适用JavaScript 代码来监控文件上传过程。这意味着，我们可以在会话的同时添加文件和图像，而不会因为要移到另一个不同的页面而离开会话窗口。

从 Campfire 中可以学到一些有趣的东西。第一，它大胆地替换了用户在桌面应用程序中常用到的聊天服务的类型。在团体会议的上下文中托管聊天的，并以此替换了原来的服务，同时构建了一个系统，这个系统和桌面应用程序比起来特性相当局限，但是因为它独到地使用了会议的上下文,所以显得更加有价值。

第二，一些通常会造成页面刷新的操作，如上传一个文件，都得到了处理，从而不再需要加载页面。这可以使用户的注意力保持在当前的任务上，并且加强了桌面应用程序的感觉。

YourMinis

如果说一些站点少量地使用了 Web 2.0，那么 YourMinis 则恰恰相反，它足以成为 Web 上的小部件/小工具站点。使用它，我们可以创建和定制载有各种小部件（或者是小工具，如果您更喜欢微软的行业用语）的页面。页面的功能相当于控制板，它能以引人注意的方式及时地提供信息。

图 8 中显示了在页面中添加一个 Rottentomatoes 电影小部件后的站点。

图 8. 显示电影评论的 YourMinis

Rottentomatoes 是一个电影评论站点。它依据数百个电影评论为电影给定一个总分并提供了一个百分比。分数等于或者高于 60% 的电影被认为是 新鲜的（也就是好的意思）。在本例中，我选择查看 Bridge To Terebithia，只需提供我的邮政编码便可以马上在同一个部件中获得该电影分数。图 9 显示了这个功能。

图 9. 显示本地电影分数的电影小部件

界面干净、打开快速，并且在流行的浏览器上运行良好。同时这些小部件可以放置在各种不同的位置 —— 比如说，站点创建者的博客中。

除了站点之外，YourMinis 还有一个 Firefox 扩展，用于在用户浏览页面时监视浏览器。当它发现一些 YourMinis 有可能使用的东西，比如 RSS feed 或者 MP3，它会弹出提示告诉用户这些资源是可用的。与浏览器的这种集成相对来说比较简单，使用这种方法把站点集成到用户的桌面中是很不错的选择。

在 Web 2.0 方面，从 YourMinis 中还可以学到一些东西。第一，minis 和框架是在 Macromedia Flash 中实现的。从用户的视角看，这算不上真正的问题。这又回到了另一个问题，即选择一个特定的技术并没有最终产生的用户利益重要。

他们鼓励开发人员站在用户社区的角度思考，为整个用户社区贡献自己的页面设计。这是与用户社区协作的另一种表现形式，它将使用户社区能以我们从未想到过的方式推进站点的发展。

Lightbox

虽然 Lightbox 非常具体站点，但是我想指出 Lightbox 技术在当今许多站点中都发挥了很大的作用。lightbox 是用户界面技术与一些 Ajax 技术的结合体。Web 页面的例子如图 10 所示。

图 10. Lightbox JS 主页

如果单击某个图像，那么整个页面会变暗，同时一个方框出现在页面中间，显示放大后的所选图片。图 11 显示这个功能。

图 11. 单击图像后 lightbox 出现

这种技术具有很多优势。它可以把用户的注意力从页面的其他区域到转移选择的图片。因为用户可以单击 Close 返回正常的浏览页面，因此这种技术可以为用户显示很多详细内容而又不必离开当前页面。

这种 lightbox 技术不仅适用于图像或者视频，也适用于文本内容。我经常访问的一个站点就是使用 lightbox 技术在主页上合适的区域显示了每一篇文章的概要。但是用户只有在单击了 lightbox 链接（通过 Ajax）之后，页面才会加载该篇文章的概要。因此，用户可以在一个页面中同时阅读几篇文章的概要内容，并且构建大量的页面会使服务的带宽不够，虽然用户并不会同时访问所有的页面。这于对于计算机和用户来说都是最好的。

一些开源的 JavaScript 库可用于开发 lightbox。上图所显示的是 Lightbox JS version 2。

其他 Web 2.0 站点

在撰写这篇文章时，我访问了大量的 Web 2.0 站点。大多数站点都没有应用上述技巧 —— 尽管本文所有的技巧都值得应用。Google 有一些尤为出色的内容。Google 文档和电子表格（ Spreadsheets ）演示了在浏览器中使用 WYSIWYG 编辑可以完成哪些任务。Google 阅读器演示了如果应用 RSS feed 并提供了一个解决方案使用户在任何地方都能够查看新闻。Google 电子邮件使用了 Ajax、JavaScript、DHTML 和 Google 地图。

另一个应用领域就是 Google 表格处理软件可以移动访问。他们所有的服务都有简洁版，可以在电话和其他小型设置中良好地运行。使用一个 Googel 帐号，您可以在 Web 上定制自己的主页，同时还可以为移动电话定制一个主页。

Google 并不是惟一使用 Ajax 创造惊人之举的。Meebo 就是一个出色的例子。它是一个托管的聊天应用程序，运行于 Ajax 之上，并且拥有一个简单但雅致的界面。Kiko 是一个日历应用程序，它很巧妙地利用了 DHTML 来编辑日历，并使用 Ajax 更新服务器中的约会、联系方法和相关信息。

结束语

这篇文章中出现的所有站点都值得我们学习和借鉴。尤其是可以从中学到一些非常有用的技巧。所有这些站点共同的特点就是尊重结合 HTML 和 JavaScript 代码的威力。近来，编程界常有关于 JavaScript 代码的负面消息。我认为这是不公平的，因为就我所听到的大多数缺点而言，与其说是 JavaScript 语言自身的问题，倒不如说是浏览器与文档对象模型（Document Object Model，DOM）之间的兼容性问题。很显然，如果想要开发一个出色的 Web 2.0 应用程序，就应该把 JavaScript 作为一门编程语言使用，并且应当给予它应有的尊重。业内的顶尖企业无一不照此行事。

正如我在文章开头所提到的，这篇文章并不仅限于讨论技术。同时还讨论了如何创建令人赞叹的用户体验。本文中挑选的所有站点都在业内开拓了新天地。有的是封装在一个简单的表单中（Google 地图），有的是利用 Ajax 无缝地增强了界面。

Web 2.0 应用程序欢迎社区。Google 地图允许用户分离出其技术以应用于自己的应用程序中。Campfire 之类的站点更加注重于增强社区体验。

当然，您可以学到很多。但额外令人高兴的是，构建 JavaScript 和 DHTML 应用程序的简便使得构建 Web 2.0 应用程序更加轻松愉快。

参考资料

学习

您可以参阅本文在 developerWorks 全球网站上的英文原文。
Ajax 技术资源中心：developerWorks 上所有有关 Ajax 的问题都可以在这里找到解答。
developerWorks 中国网站 XML 专区：通过 developerWorks XML 专区了解 XML 的方方面面。
Meebo：进一步学习用于任何地点之间即时消息传送的托管聊天应用程序
Google 地图：使用 Google 的地图绘制应用程序在各地点之间标示线路、找寻企业和进行更多操作。
GMail：查阅 Google 的支持 Ajax 电子邮件应用程序，这些应用程序内建有 Google 搜索技术和兆字节存储技术。
Campfire：了解来自 37signals 的群体聊天和文件交换应用程序
Kiko：查阅 Ajax 日历应用程序。
Map My Run：使用这个作者最喜爱的 Google 地图 mashup 之一标示跑步线路并获得准确的距离。
TaDaList：看看来自 37signals 的一个共享 to-do 列表系统可以完成哪些任务。
YourMinis：在这个小部件/小工具站点上。创建您自己的控制板，贡献您的小部件。
Ajaxian：紧跟Ajax 和前端小部件发展的步伐，利用这个非常有用的资源。
IBM XML 认证：看看如何才能成为一名 IBM 认证的 XML 及相关技术的开发人员。
XML 技术文档库：查看 developerWorks XML 专区提供的大量技术文章、技巧、教程、标准和 IBM 红皮书。
developerWorks 技术活动和网络广播：通过这些活动随时关注技术的最新进展。

获得产品和技术

IBM 试用版软件：使用可从developerWork 直接下载的试用软件构建您的下一个开发项目。

讨论

参与论坛讨论。
XML 专区讨论论坛：参与任何以 XML 为中心的论坛