Ajax 和 XML: 借鉴最优秀的 Ajax 应用程序
www.diybl.com 时间 ： 2008-10-25 作者：佚名 编辑：辉辉 点击： [ 评论 ]
跟随本文一起游览 Web 2.0 世界中的一些顶尖的 Asynchronous JavaScript + XML (Ajax) 应用程序。探索这些应用程序在用户层面上获得成功的秘决，发现各种技巧并着手开发自己的 Web 2.0 应用程序，创造令人兴奋的用户体验。
这篇文章着眼于一些最优秀的新一代 Web 应用程序，向大家展示了从中能学到什么 —— 模仿最优秀的应用程序是引以自豪的传统。我相信这些站点不会介意的， 毕竟模仿是最诚挚的敬佩。
 |
|
然而，我没有把技术层面的问题放在首位。因为这些站点的技术问题 —— 数据如何在 Ajax 中传递，固然重要，但是并不是某个站点赖以成功的关键因素。应该要重点考虑站点是如何使用浏览器的 Ajax 特性结合动态 HTML （Dynamic HTML，DHTML ）创建杰出的用户体验的，以及站点是如何与它们的用户社区进行交互的。我将探究所有这些因素，它们和技术一样在站点获得成功的过程中发挥着重要作用。
如果 “最具影响力的 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 的一个很好的例子就是从 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，将您带入实现某种特定功能的源代码。
 |
|
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 项的列表
然后键入 Buy earplugs 并单击 Add。该项内容出现列表中，并且而不需要刷新页面，显示界面如 图 6 所示。
为了实现这个功能，我创建了一个小型的数据库用来保存 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所示。
| <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所示。
| <% @tasks.each { |t| %> <%= t.name %><br/> <% } %> |
那么，我可以从 TaDaLists 中学到些什么呢？ 第一，少许 Ajax 应用程序会花大力气使 Web 应用程序感觉更像是桌面应用程序。第二，选择使用 Web 框架 —— 特别是那些包含 Ajax 的框架 —— 可以使这种类型的工作相当简单。
| |
|
