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

创建日期：2007年12月13日来自：IBM 浏览：3211次作者：Jack D Herrington

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

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 的框架 —— 可以使这种类型的工作相当简单。

首页上一页 1 2 3 4 5 6 7 下一页尾页

责编：aoaob
相关搜索： Ajax XML Ajax 应用程序

上一篇：手把手教你做超酷的条形码效果
下一篇：Ajax -- 困惑者指南，第 1 部分: Ajax 工具和技术综述

嗷嗷毙技术网版权申明：大家可以自由转载我站点的文章，但原作者和来自我站的链接必须保留（非我站原创的，按照原来链接，自行链接）。文章版权归作者所有。
特别注意：本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有，文章若有侵犯作者版权，请与我们联系，我们将立即删除修改。

搜索

Web

本站

系统系	- 操作系统 - 工具软件 - 病毒安全 - Vista专区	WEB2.0	- 奇趣 - 发现分享 - 评论员文章	视　频	- 体育 - 娱乐 - 科技 - 教程
办公系	- Word - Excel - Powerpoint - 网站建设	动画系	- Flash - Ascript - Flex - MsE Design 教程	编程系	- Asp - Asp.Net - Php - Jsp、Java - CGI/perl
艺术系	- 酷赏 - 工业 - 建筑 - 界面 - 平面 - 视觉	网站系	- HTML/Xhtml - Js、Ajax - Css - XML、XSLT	下　载	- 图形图像 - 多媒体 - 系统办公