本文将提供 ajax 开发资源备忘单。作者根据自己的 ramp-up 经验为您提供了一些实用的信息,这些信息可以帮助您快速进入高效 ajax 开发的轨道……
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 禁用缓存,否则后面会调试缓存版本的代码。
……

闽公网安备 35060202000074号