Ajax 工具和技术综述(二)

日期: 2008-01-10 作者:Gal Shachor 来源:TechTarget中国

  Eclipse ATF

  您可以安装 Eclipse Ajax Toolkit Framework (ATF) 环境(请参阅 参考资料),并将其与 Eclipse Web 工具箱相结合,从而产生一个强大的、支持 Ajax 开发需求所有方面的环境。ATF 提供了以下特性:

  一个 DOM 浏览器和 CSS 运行时编辑器
  一个 JavaScript 调试器(通过利用 Mozilla XUL 运行程序)
  网络流量监控
  通过库配置文件实现常用库的简单库集成
  与 JSLint(请参阅 参考资料)的集成,以执行 JavaScript 验证

  该工具箱中一个非常有价值的特性是在集成的 XUL 运行程序中运行、测试和检查应用程序。

  Aptana

  Aptana(请参阅 参考资料)是一个非常有用的、开放源码的、基于 Eclipse 的环境,并且可以免费下载。ATF 的工具专门针对 Ajax 开发,而 Aptana 则不同,它是用于开发 Web 2.0 应用程序的 IDE。Aptana 已经集成了 Ruby Development Toolkit (RDT),后者提供了 Ruby-Eclipse 集成。

  可以下载 Aptana 作为一个完整的 Eclipse 环境(与 ATF 选项相比非常简单),也可以将其作为一组插件集添加到之前设置好的 Eclipse 环境中。

  Aptana 环境提供了一些有用的特性,例如:

  高质量的用户指南和技术参考文档
  用于 Ajax 工件的一个完整的编辑环境,其中包含 JavaScript 代码分析、DOM 集成和浏览器兼容性信息
  使用外部 Firefox 浏览器的调试功能
  基本的 Ajax 库集成
  能标记潜在错误的代码验证系统
  编辑文件系统上的任何文件,和使用 FTP 编辑远程文件的功能

  您也许会发现,Aptana 是比 ATF 更易于安装和学习的、能满足您的开发需求的解决方案。

  JsUnit

  JsUnit(请参阅 参考资料) 是基于 JavaScript 的单元测试框架,是通过将 JUnit(一个常见的 Java 单元测试库)移植到 JavaScript 创建而成的。JsUnit 支持用于 JavaScript 函数的测试用例的定义,并支持在浏览器环境中运行这些测试用例。如果您想对所开发的代码执行一致的单元测试,那么 JsUnit 是一款非常有用的框架。

  Ajax 框架

  最近出现了很多 Ajax 开发框架,它们的目标是使繁琐的 Ajax 开发任务变得更加容易。本节将讨论一些新出现的开放源码 Ajax 框架,这些 Ajax 框架通过以下方式使开发工作变得更加容易:

  提供了一组小部件(widget),可作为丰富 Web 用户界面(UI)的构建块。
  简化异步数据交互和传输协议。
  缓解任何跨浏览器的不兼容性。
  提供有用的 JavaScript 方法,以简化很多常见的 Ajax 开发任务,例如 DOM 操纵和事件注册。

  讨论各种可用的 Ajax 框架超出了本文的范围,因此我们选择只详细讨论 Prototype、script.aculo.us、Dojo 和 Rico。要获得更完整的可用 Ajax 框架列表和了解它们的使用,请参阅 Ajaxian.com 2006 survey(参考资料 中提供了链接)。

  Prototype

  Prototype(请参阅 参考资料) 是一个 JavaScript 库,它引入了一些强大的库来帮助简化 Ajax 编程。虽然它本身不能看作一个 Ajax 框架,但是它是其它几种框架(例如 script.aculo.us、Moo.fx2、Rico 等)的核心。 Prototype 支持:

  基本 DOM 操作
  Ajax 调用
  一组实用函数
  使用输入字段和表单

  Prototype 是 Sam Stephenson 获得 Ruby 编程风格的灵感后开发的,它目前是麻省理工学院(Massachusetts Institute of Technology,MIT)许可下的一个开放源码项目(请参阅 参考资料)。

  示例 Prototype 场景
 
  下面是一个示例场景,它演示了如何使用 Prototype 简化 Ajax 编程。假设需要定期刷新一个页面中的某块区域,用于显示最新的新闻。于是可以设置一个计时器,每隔 1 分钟调用一次 updateNews() 方法。在 updateNews() 方法中,我们使用 Prototype Ajax.Updater 对最新新闻内容发起异步请求。接收到请求的结果后,再将其作为 div 元素 most-recent-news 中的 HTML 内容插入页面。清单 1 展示了 Prototype 所提供的众多强大的函数:

  清单 1. 示例 Prototype 场景
               
<html>
   <head>
      <script src="js/prototype.js" type="text/javascript"></script>
      <script type="text/javascript">
          function updateNews() {
              new Ajax.Updater(
                  {success: ‘most-recent-news’},
                  ‘http://myserver/news/recent-news’
         );
              setTimeout("updateNews()",60000);
          }
      </script>
    </head>
    <body onload="updateNews()">
        <h1>Recent News</h1>
        <div id="most-recent-news"></div>
    </body>
</html>
            
  如果不使用 Prototype,那么这个示例就会变得更冗长,需要花更大的精力编写代码。

  Script.aculo.us

  Script.aculo.us(请参阅 参考资料)是 MIT 许可下的一个开放源码项目。它构建于 Prototype 之上,随 Ruby on Rails 一起发布。Script.aculo.us 是用于开发 rich Web-UI Rails 应用程序的一款流行的框架,但是也可以将它与其它服务器端技术一起使用。Script.aculo.us 虽然被描述为一个瘦框架,但是却拥有非常强大的动画功能,并且包含以下特性:

  基于 JavaScript 的 DOM 构建程序可以提供简单的 DOM 操作
  拖放支持
  一些控件和小部件,例如自动完成、滑动块和就地编辑

  清单 2 中的示例展示了 Script.aculo.us 中强大的动画效果。在这个例子中,当点击一行文本中时,就会逐渐淡出视线:

  清单 2. Script.aculo.us 动画效果
               
<script src="js/prototype.js" type="text/javascript"></script>
<script src="js/scriptaculous.js" type="text/javascript"></script>

<div onclick="new Effect.Fade(this)">
    Click here to see me fade out!
</div></html>
            
  Dojo Toolkit

  Dojo Toolkit(请参阅 参考资料)是一款全面的 Ajax 框架,能满足多种需求。Dojo 提供:

  用于 JavaScript 的跨浏览器的 stdlib
  DOM 操作
  用于优化下载时间和大小的打包系统
  一组丰富的、可扩展的小部件
  拖放支持
  动画支持
  非常丰富的服务器端集成库

  Dojo 的一个卖点是,它的小部件是可扩展的,这样就可以利用简单的小部件组合出更复杂的小部件。因此,与大多数 Ajax 库和框架不同的是,Dojo 提供了一种特定的编程模型指导功能,如果遵从该模型,就可以像桌面 GUI 编程那样设计 Web 界面。

  Dojo 是 Academic Free License 下的一个开放源码项目,正处于 Dojo Foundation 的开发之中的(请参阅 参考资料)。Dojo 是一个非常活跃的项目,很多大公司,例如 IBM、Sun Microsystems、AOL 等都提供了对 Dojo 的支持。

  图 1 展示了一个使用 Dojo 的邮件应用程序的示例。可以看到,Dojo 提供了树、表和很多其它小部件,以帮助创建类似桌面的 UI。它还简化了这些小部件之间的交互。

  图 1. 示例 Dojo 界面
 
  Rico 框架

  Rico 是 Apache 2.0 许可下提供的一个开放源码 Ajax 框架(请参阅 参考资料 访问 Rico Web 站点并获得对 Apache 2.0 许可的描述)。它极具价值,但所占空间却很小。Rico 最突出的特性有:

  丰富的使用模板的 DOM 操作
  各种小部件,例如折叠(accordion)、LiveGrid 和下拉(pull down)
  拖放支持
  简单的动画
  用于圆角、管理颜色和其它显示的实用工具
  简单的服务器端集成

  虽然 Rico 包括的函数比 Dojo 框架少,但是如果可用的函数能满足 UI 开发需求,那么 Rico 很小的内存占有量就是一个优势。尤其是,Rico 的 LiveGrid 小部件使得创建动态表之类的常见任务变得非常简单。

  初学者的路线图 —— 现在就出发

  如果您已经准备好开始 Ajax 开发之旅,那么下面的路线图可以告诉您开始的步骤。(注意,这个路线图使用 Aptana 作为 IDE,并使用 Dojo 作为 Ajax 框架,但是也可以改变配置,以适合您自己的需求。)

  下载 Mozilla Firefox 2.0,并安装 Firebug 插件。
  下载并安装 Aptana。
  遵循 “Mastering Ajax” 教程,在 Aptana 中编写代码示例。在 Firebug 中对例子进行调试。
  下载 Dojo Toolkit,并通读 Dojo “Hello World” 教程(请参阅 参考资料)。

  结束语和下一步计划

  至此,您可能有太多的 Ajax 应用程序开发工具信息需要慢慢消化,并且,如果您遵循了前面提到的初学者路线,那么也有了一些 Ajax 应用程序方面的实践和经验了。那么接下来干什么?深入阅读 Ajax 相关技术方面的资料,选择性地阅读关于要使用的 Ajax 框架的信息,这样可以帮助您夯实知识基础。这里有很多关于 HTML、JavaScript 和 CSS 的资料(参考资料中有 W3School 教程的链接,这些教程是很好的入门教程)。您还应该访问 Ajax Patterns 站点(请参阅 参考资料)。入门的最快方法是现在就动手 —— 自己编写一个应用程序试试。

  本系列的下一篇文章将通过开发一个简单的基于 Dojo 的博客阅读器,指导您将新学到的 Ajax 开发知识应用于实践。还没有踏上 Ajax 的旅程?很快的。继续吧!

 

我们一直都在努力坚持原创.......请不要一声不吭,就悄悄拿走。

我原创,你原创,我们的内容世界才会更加精彩!

【所有原创内容版权均属TechTarget,欢迎大家转发分享。但未经授权,严禁任何媒体(平面媒体、网络媒体、自媒体等)以及微信公众号复制、转载、摘编或以其他方式进行使用。】

微信公众号

TechTarget微信公众号二维码

TechTarget

官方微博

TechTarget中国官方微博二维码

TechTarget中国

相关推荐

  • 八个超实用的jQuery技巧攻略

    jQuery是JavaScript最好的库之一,主要用于制作动画、事件处理,支持Ajax及HTML脚本客户端。文中分享了8个超实用的jQuery代码技巧攻略,希望你会喜欢。

  • HTML5强大功能背后的安全陷阱

    尽管HTML5使网站的功能更为强大,但开发人员需充分利用其新的技术特征来提高网站的安全性,使用不当会带安全问题,你知道吗?

  • 前端页面开发之Node.js初学者指南

    Node.js是刚刚兴起的一个概念,你对它的了解有多少?Node.js的意义是什么,它是怎么发展起来的?Node.js的作用是怎样的呢?

  • JavaScript解析:让搜索引擎看到更真实的网页

    我们都知道期的搜索引擎没有相应的处理能力,会导致很多问题。引入JavaScript解析的目的,可以使搜索引擎可以更为清晰的了解用户实际打开该网页时看到的效果。