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

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

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

请访问 Ajax 技术资源中心,这是有关 Ajax 编程模型信息的一站式中心,包括很多文档、教程、论坛、blog、wiki 和新闻。任何 Ajax 的新信息都能在这里找到。

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

Google 地图

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

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


图 1. Google 地图的最新版
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 界面
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” 之后
添加 “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” 之后
添加 “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
为远程团队设计的虚拟 campfire

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

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

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

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





回页首


YourMinis

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

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


图 8. 显示电影评论的 YourMinis
显示电影评论的 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 主页
Lightbox JS 主页

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


图 11. 单击图像后 lightbox 出现
单击图像后 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 作为一门编程语言使用,并且应当给予它应有的尊重。业内的顶尖企业无一不照此行事。


分享这篇文章......

digg 将本文提交到 Digg
del.icio.us 发布到 del.icio.us
Slashdot 提交到 Slashdot!

正如我在文章开头所提到的,这篇文章并不仅限于讨论技术。同时还讨论了如何创建令人赞叹的用户体验。本文中挑选的所有站点都在业内开拓了新天地。有的是封装在一个简单的表单中(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 技术活动网络广播 :通过这些活动随时关注技术的最新进展。

相关文章推荐

如何使用ajax开发web应用程序&nbsp;[2]

作者: Jonathan Fenocchi 时间:2005.10.26 译者:Sheneyan 英文原文: http://www.webreference.com/programming/javasc...

基于 Ajax 的 web 应用程序中各种客户端-服务器通信机制

现代的 web 应用程序都是基于各种 Ajax 相关概念。Ajax 技术的使用导致 web 页面上交互式或动态接口的增加。Ajax 革命始于这样的观念,即 web 应用程序可以在后台从服务器异步检索数...
  • e_wsq
  • e_wsq
  • 2011年12月30日 01:02
  • 588

使用异步Servlet扩展AJAX应用程序

作为Web应用程序模型的AJAX的出现使服务器端的面貌发生了巨大的变化。用户对着Web页面填写表单并单击提交按钮转到下一个链接的典型Web使用模式现在正在转变为更先进的客户端JavaScript以及功...

联合使用 CSS、JavaScript 和 JSF 精心打造 Ajax 应用程序,第 2 部分: 动态 JSF 表单

原文地址: http://www.ibm.com/developerworks/cn/web/wa-aj-jsfcss2/ 处理事件和更新用户界面 很多 JSF HTML 组件都拥有 Java...

掌握 Ajax,第 6 部分: 建立基于 DOM 的 Web 应用程序

本系列的上一篇文章中考察了文档对象模型(DOM)编程中涉及到的概念——Web 浏览器如何把网页看作一棵树,现在您应该理解了 DOM 中使用的编程结构。本期教程将把这些知识用于实践,建立一个简单的包含一...

合使用 CSS、JavaScript 和 JSF 精心打造 Ajax 应用程序,第 2 部分: 动态 JSF 表单

合使用 CSS、JavaScript 和 JSF 精心打造 Ajax 应用程序,第 2 部分: 动态 JSF 表单 探索标准 JSF 组件中的 CSS 支持 Andrei Cioroian...

ASP.NET 3.5核心编程学习笔记:针对AJAX应用程序的WCF服务

  WCF服务能够输出JSON,通过HTTP进行传输(不一定要用SOAP进行数据包装)。我们要做的是,使端点使用webHttpBinding绑定模型,并通过新的特性来启用Web脚本调用。构建一个简单的...

基于AJAX的应用程序架构汇总

====================================================== 注:本文源代码点此下载 =============================...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Ajax 和 XML: 借鉴最优秀的 Ajax 应用程序
举报原因:
原因补充:

(最多只允许输入30个字)