Ajax 工具和技术综述(一)

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

  Ajax 是一种 Web 应用程序客户机技术,它结合了 JavaScript、层叠样式表(Cascading Style Sheets,CSS)、HTML、XMLHttpRequest 对象和文档对象模型(Document Object Model,DOM)。运行在浏览器上的 Ajax 应用程序以一种异步的方式与 Web 服务器通信,并且只更新页面的一部分。通过利用 Ajax 技术,可以提供丰富的、基于浏览器的用户体验。

  在开始 Ajax 之旅以前,需要熟悉很多不同的语言、标准、工具和库。一开始就要在不同选项之间做出选择并组合出一个开发环境来可能有些勉为其难。作者将根据他们自己的 ramp-up(项目初始阶段的准备工作)经验帮助您在旅途中避免可能遇到的一些比较常见的、令人厌烦的问题。

  踏上 Ajax 的旅程

  Ajax 将改变用户在网站上的体验,之前的单击-显示页面式的体验将变成具有交互性、灵活性的桌面应用程序体验。用户可以避免页面重新加载,避免等待下一部分内容的呈现。您可能在想,这一切听起来是不错,但是如何才能做得到呢?为了回答这个问题,先来看看 Ajax 技术背后的一些幕后故事。

  Ajax 是以下 Web 技术和标准的集合,它允许使用客户端的机器在背后运行应用程序逻辑的重要部分,而不仅仅是呈现应用程序的输出:

  超文本标记语言(Hypertext Markup Language,HTML):定义最终呈现给用户的内容。
  层叠样式表(Cascading Style Sheets,CSS):定义所呈现内容的样式(或装饰)。
  文档对象模型(Document Object Model,DOM):一种 API,浏览器使用它将被呈现内容公开给 JavaScript 脚本。然后,脚本可以使用 DOM 在用户看到内容之前动态地修改内容。
  XmlHttpRequest 对象:为浏览器与服务器之间的交互提供便利,通过 JavaScript 脚本调用。

  JavaScript:在浏览器中执行的一种编程语言,将所有其他的 Ajax 组成部分黏合在一起。脚本可以侦听浏览器中发生的事件(例如单击一个按钮),并使用 XmlHttpRequests 回调服务器以对事件作出反应,然后根据返回的结果修改 DOM 树。

  所有这些技术都在用户的 Web 浏览器中执行,用户的 Web 浏览器充当执行 Ajax 程序的平台。

  如果要使用 Ajax,那么有一点值得格外注意:组成它的技术虽然是基于标准的,但又是特定于浏览器的。换句话说,同一个应用程序在不同的浏览器上可能表现出不同的行为。然而,由于既不可能限制用户使用特定的浏览器,又不可能忽略客户机的浏览器可能不支持 CSS 或 DOM 这一事实,因此,作为应用程序的创建者,您需要理解各种不同浏览器之间的差异。

  要成为一名高效的 Ajax 开发人员,需要:

  了解形成 Ajax 开发基础的技术。
  理解可用的运行时平台和 Web 浏览器。
  开发 Ajax 应用程序时使用支持各种语言的 IDE。
  拥有用于各种环境和语言的调试器和应用程序测试工具。

  信息源

  developerWorks 上由 Brett McLaughlin 撰写的 掌握 Ajax 系列是最好的 Ajax 教程之一。该系列不要求预先知道多少 Ajax 编程知识,并且描述了各种与 Ajax 相关的技术。如果您想更好地理解 Web 架构,那么可能需要对 Representational State Transfer (REST) 有所熟悉。“How to Create a REST Protocol”这篇文章可以作为这一方面很好的入门资料。

  阅读完 掌握 Ajax 系列,并且亲自开始一些开发之后,您还将需要一些其他的参考信息。W3Schools(请参阅 参考资料)提供了核心 Ajax 技术(JavaScript、CSS、HTML、DOM、XML 等)的在线参考信息。

  如果您使用的是 Mozilla Firefox 浏览器,那么应该使用 DevEdge 侧栏。这些侧栏包含各种 Ajax 技术标准的索引,您可以使用它们作为参考指南。

  浏览器作为运行时环境

  Web 浏览器不仅是 Ajax 部署环境,同时还是调试环境。大多数浏览器都可以添加调试辅助工具,例如 DOM 树查看器或调试器。文章下节将对以下各种流行的浏览器作一个概述:

  Microsoft® Internet Explorer (IE)
  Firefox
  Safari
  Internet Explorer

  IE 一直是大多数用户的选择。IE6 是一款成熟的浏览器,具有非常深的市场底蕴。很多 CSS 和 DOM 特性在 IE6 中不受支持,或者以一种专用的形式提供。使用 IE6 的开发人员可能会遇到以下一些问题:

  缓慢的 JavaScript 解释器和不一致的标准实现。

  缺少透明的 PNG 支持。

  DOM 事件:一个事件可能在 Firefox 中使用一个名称,而在 IE 中又使用另一个名称。有些事件的调用顺序不一样,在 IE 中和在 Firefox 中相同的事件对象可能具有不同的属性。有关这一问题的更多信息,请阅读 “把应用程序从 Internet Explorer 迁移到 Mozilla”。

  未实现的 CSS 属性,例如 minimum/maximum height、selectors 等等。

  尽管存在这些问题,您还是应该相信大多数用户都是使用这个浏览器。也可以试着使用各种不同的库从而在一定程度上填补 IE6 的不足,例如 /IE7/。

  IE7 在 IE6 的基础上有了很多明显的改进,例如对标签的支持。对于开发人员而言,隐藏的改进更为重要。IE7 提供了一个性能更佳的 JavaScript 解释器,并修复了 IE6 中的很多缺陷(例如 CSS),使得最遵从标准的 Ajax 应用程序只需要少量的修改便可以在该浏览器上运行。

  IE 调试辅助工具

  可以使用以下工具在 IE 中调试应用程序:

  IE Developer Toolbar:允许更好地控制 IE 环境(缓存,cookie),浏览 DOM 树,以及浏览和操纵元素的样式。在分析由应用程序生成的页面时,这是非常有用的工具。

  Microsoft Script Debugger: 随 Microsoft Office一起发布,通过它可以在 JavaScript 代码中设置断点,观察变量,还可以执行常规的调试例程。注意,在调试时,建议在每个调试会话之前通过 IE Developer Toolbar 禁用缓存,否则后面会调试缓存版本的代码。

  IE 相关浏览器

  可以使用 Trident(IE 浏览器引擎)创建 “新” 的浏览器,例如 Maxthon。这里新字打上了引号,因为从开发人员的角度来看,浏览器的关键特(例如对 Ajax 的支持)仍然相同。(请参阅 参考资料 了解更多关于 Trident 的知识。)

  警告:浏览器不是密封的

  浏览器正逐渐成为增件的目标。用户可以下载和安装弹出窗口拦截器、标签管理器、UI 主题和其它增件。很多这样的增件会以一种出人意料、非常难于重现和调试的方式影响 Ajax 程序。一个简单的例子是,用户设置一个弹出窗口拦截器来拦截通过一个应用程序打开的新的浏览器窗口。这看起来是个无害的增件,但是,却令人难以一时觉察其对应用程序的影响,例如消耗浏览器窗口资源,以及隐藏应用程序的某些部分。
 
  Mozilla Firefox

  虽然 Firefox 已经出来好几个版本,但是这里只讨论 Firefox 2.0。开发人员和超级用户常常使用 Firefox,它是 UNIX®-类操作系统的首选,而且是开放源码的,除了 IE 之外,它是最流行的浏览器。

  Firefox 有一个速度很快的 JavaScript 解释器,并且具有各种 Web 标准的优异的实现。由于它的 Ajax 友好性,我们强烈建议将 Firefox 用于大多数 Ajax 开发。通常,很多 Ajax 开发人员都是在 Firefox 上开始应用程序开发的,然后才转而使用其它浏览器。

  Firefox 调试辅助工具

  Firefox 具有一个强大的、开放的扩展机制,它的社区借助这种机制创建了大量的 Web 开发辅助工具。然而,到目前为止,Firebug(请参阅 参考资料)是其中最为流行的。(要了解关于 Firebug 功能的更多细节,请参阅 “Ajax Debugging with Firebug”)。Firebug 是一个集成的扩展,通过它可以:

  使用断点、变量查看和逐步方式来调试 JavaScript 代码。

  查看网络状况。

  查看和优化各种不同元素的 DOM 树和 CSS。

  Firebug 1.0 的强大性和灵活性为 Ajax 开发树立了里程碑,也是使用 Firefox 作为首选开发浏览器的有力的理由。

  Firefox 相关的浏览器

  一些浏览器,例如 Camino,使用了 Firefox 的布局引擎 Mozilla Gecko(请参阅 参考资料)。这些浏览器通过一个匹配的 Gecko 版本能够提供与 Firefox 相同的功能。

  Safari

  Safari 是随 MacOSX 一起发布的浏览器(从第 3 版开始,也在 Windows® 上运行。)Safari 虽然比 Firefox 和 IE7 快很多,但是缺少对标准的支持(不过最新的 WebKit 构建有了一些改进;文章下节将会更详细地介绍 WebKit)。还应注意,Safari 开发人员社区规模远远小于 Firefox 和 IE 的开发人员社区。因此,网上关于 Safari 的信息较少,而且很多库都没有在 Safari 上经过良好的测试。

  Safari 调试辅助工具

  Safari 浏览器引擎是在一个名为 WebKit 的开放源码项目(请参阅 参考资料)中开发的。为了在 Safari 中调试应用程序,建议使用一个 WebKit 构建。该构建包括:

  经过定制的带有 CSS 和 DOM 查看器的浏览器。
  Drosera: 一个 JavaScript 调试器。Drosera 可用于调试应用程序,但是与 Firebug 相比其特性比较有限。

  如果您坚持在 Safari 中测试应用程序,那么可以打开 Safari Debug 菜单,通过该菜单可以查看 DOM 树、CSS 和缓存等。

  Safari 相关的浏览器

  WebKit 应用于很多浏览器,其中最引入注目的是 OmniWeb。

  Ajax IDE 和工具

  在开发新的 Ajax 应用程序时,如果所使用的 IDE 支持所有 Ajax 相关技术并且提供快捷、友好的开发环境和 UI 将会使您如虎添翼。在选择一款 Ajax IDE 时,需要考虑以下一些特性:

  具有自动完成、颜色突出显示、错误提示等功能的语法制导编辑功能(用于 HTML、CSS、JavaScript 和 DOM)
  各种技术的相关文档
  集成的 JavaScript 调试器
  网络监控功能
  DOM 内省

  框架集成

  虽然您可能会考虑购买一个 IDE,但其实 Eclipse 和它的相关插件就提供了一个功能完善的、基于开放源码的 Ajax IDE,这个 IDE 可以免费下载。本节将讨论以下这些基于 Eclipse 的、包括插件的 Ajax IDE:

  含 Web 工具箱(toolkit)的 Eclipse
  Eclipse ATF
  Aptana

  本节还将讨论 JsUnit 单元测试包。

  含有 Web 工具箱的 Eclipse

  如果您是一名 Java™ 开发人员,负责服务器端的 Java 开发,那么使用 Eclipse Web 工具箱也是开始基本 Ajax 开发的简单易行的方法。通过添加 Eclipse 的 Web 工具(请参阅 参考资料),可以获得一个可用于开发 Web 工件的基本环境,还可以获得可编辑 HTML、CSS 和 JavaScript 文件的编辑器和编辑工具。

  注意,Eclipse Web 工具环境不限于 Ajax 开发,它还支持侧重于服务器端的 Web 应用程序开发。因此,它提供了诸如语法突出显示和基本代码完成之类的核心功能。它并未提供特定于 Ajax 开发任务的调试功能或 DOM 操纵功能。

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

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

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

微信公众号

TechTarget微信公众号二维码

TechTarget

官方微博

TechTarget中国官方微博二维码

TechTarget中国

相关推荐

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

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

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

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

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

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

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

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