2010-08-13 15:54:50 来源：InfoQ
目前的Web应用开发基本上都是围绕富互联网应用（Rich Internet Application，RIA）展开。RIA的实现技术有很多种：Ajax、Flash、JavaFX和Sliverlight等。Ajax技术的优点在于它是构建在开放标准之上，不存在厂商锁定的问题；同时也不需要额外的浏览器插件支持。Ajax应用对搜索引擎也比较友好。对开发者来说，Ajax所需技术的学习曲线也较平滑，容易上手。本文简要介绍了Ajax应用开发的各个方面以及相关的最佳实践，但对一些细节内容没有展开讨论。
Ajax简介
Ajax 技术的出发点在于改变传统Web应用使用时的“操作-等待页面加载-操作”的用户交互模式。这种交互模式会打断用户正常的使用流程，降低用户的工作效率。Ajax技术的交互模式是“操作-操作-操作”。用户并不需要显式地等待页面重新加载完成，而是可以不断地与页面进行交互。页面上的某个局部会动态刷新来给用户提供反馈。整个交互过程更加平滑和顺畅。这是Ajax技术得以流行的一个重要原因。
Ajax构建于一系列标准技术之上，包括HTML、JavaScript和CSS等。在这些技术中，HTML是作为应用的骨架而存在的，展示给用户最基本的内容。CSS则为HTML表示的内容提供易于用户阅读的样式。JavaScript则为应用添加丰富的交互行为，为用户提供良好的使用体验。
Ajax技术的出现使得应用中一部分的逻辑从服务器端迁移到了浏览器端。浏览器的作用从简单的渲染页面和表单处理，上升到了处理一部分业务逻辑。
一般来说有两种类型的Ajax应用风格，一种是仅少量使用Ajax技术来适当增强用户体验（Ajax Lite），另外一种则是大量使用Ajax技术来达到与桌面应用相似的用户体验（Ajax Deluxe），提供诸如鼠标右键、拖拽和级联菜单等。开发人员应该根据应用的特征选用合适的风格。
浏览器兼容性
开发Ajax应用的时候要面对的一个重要问题就是浏览器兼容性。虽然Ajax技术基于HTML、JavaScript和CSS等标准技术，但是不同的浏览器厂商对于这些标准的实现程度有着很大的差别。同一浏览器的不同版本之间也会有一些不同。新版本可能会修复旧版本上的问题，也可能会带来新的问题。不过总体的趋势是浏览器的实现越来越向标准靠拢。
解决浏览器兼容性的第一步是确定应用要支持的浏览器种类和版本。这个决策取决于应用的目标用户和特定的应用需求。对于一般的通用Ajax应用来说，可以按照浏览器的市场份额和支持某种浏览器所需的代价来确定。雅虎提出的分级式浏览器支持（Graded Browser Support）是一个很好的参照，从其中给出的A级浏览器开始是一个不错的选择。从特定的应用需求来说，某些使用了ActiveX控件的Ajax应用就只能在IE上运行；而开发针对iPhone的应用则只需要考虑移动版WebKit就可以了。
就 Ajax应用的三个组成部分来说，HTML的兼容性问题比较少，毕竟目前主流的HTML 4.01规范已经有10年的历史了；在JavaScript方面，JavaScript语言核心部分基本上没什么问题，而文档对象模型（DOM）和浏览器对象模型（BOM）部分的兼容性问题相对较多，这主要是因为浏览器长生对规范的支持程度不同以及各自添加了私有实现。使用一个流行的JavaScript库就可以解决这些问题；CSS方面的兼容性目前是问题最多的，而且没有比较好的库的支持。在下面会着重介绍CSS的兼容性问题。
富含语义的HTML
HTML 语言本身上手比较简单，只是一些元素的集合，只需要了解这些元素及其属性的含义即可。这些元素既有与文档结构相关和富含语义的元素，也有与页面的展示相关的元素。一个好的实践是只使用与文档结构相关和富含语义的元素。从HTML语言规范的历史也可以看到这个趋势。HTML语言规范的历史比较长。在HTML最初的草案和HTML 2.0中，HTML只包含描述文档结构的元素。在HTML 3.2中，很多与展示相关的元素被引入进来。HTML 4.01规范试图解决这个问题，许多与展示相关的元素被标记为废弃的，不推荐使用。HTML 5更进一步，引入了更多的富含语义的元素，同时移除了一些在HTML 4.01中被废弃的元素。应用这种实践进一步划分清楚了HTML和CSS在Ajax应用中的职责。
编写HTML文档的时候首先需要选用合适的文档类型声明（DTD）。目前来说最合适的HTML 4.01过渡型，即<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">。在编写HTML文档的时候，需要使用合适的元素。HTML规范中的一些元素，如<em>、<strong>、<abbr>、<blockquote>、<cite> 和<code>等，对开发人员来说比较陌生。但是这些元素富含语义，有适合它们使用的场景。如果使用的是<div> 和<span>等通用元素，需要使用富含语义的class属性来增加语义，说明元素的作用。在HTML文档编写完成之后，最好使用W3C提供的HTML文档验证器来验证文档。
CSS
CSS的语法非常简单，包含的元素也非常少，其中最主要的是样式规则集。样式规则集是一系列样式声明规则的集合。每个样式规则由选择器和声明两部分组成。选择器用来选择文档中的元素。这些元素将被应用上与选择器对应的样式声明。CSS不同版本规范所支持的选择器类型不同，尽量使用常用并且简单的选择器以获得更好的浏览器兼容性，如ID选择器、class选择器和元素选择器。
使用CSS的时候会遇到的一个很大的问题是浏览器兼容性。经常会遇到的情况是某种样式在A和C浏览器上应用正常，而在B浏览器上则使用不正常。等到把B浏览器调好了之后，却发现C浏览器上显示出现错误。解决这个问题的基本原则是要首先确定几个基准的浏览器和开发基本的布局样式表。基准浏览器一般是所要支持的浏览器中对CSS规范支持较好的浏览器。基本的布局样式表保证在基准浏览器上应用的页面布局是正确的。目前的浏览器在CSS页面布局这一块的兼容性最差，尤其在盒模型（box model）、浮动定位等方面。而在显示样式，如字体大小和颜色等方面，则基本上没有什么问题。
接下来要做的是让基本的布局样式表在除基准浏览器外的其它浏览器上正确工作。这个时候就需要对某种版本的浏览器来应用特殊的样式，从而修正样式上的不一致。一种做法是利用一些招数（hack）。招数是利用浏览器本身对CSS规范支持的不完善或是实现上的bug来识别浏览器并应用样式。另外一种做法是通过JavaScript来检测当前浏览器并应用样式。招数可能会随着浏览器的版本更新而变得不可用，因此尽量少使用。
在一般Ajax应用，最常被应用招数的是IE 6。因为IE 6对CSS规范支持不完善，而且存在比较多的bug，但是IE 6的用户目前还是数量众多，还是有支持的必要。对IE浏览器应用特殊样式的更好做法是使用IE独有的条件注释。
当应用所包含的CSS文件比较多的时候，开发和维护这些CSS文件就成为一件比较困难的事情。一个解决办法是把面向对象的思想引入到CSS的编写过程中。两种重要的原则是组件化和单一职责。组件化的做法是开发出针对页面上某类元素的样式组件。这些样式组件可以在不同的页面中任意组合使用。单一职责指的是把表示结构和外观的样式分开。与结构相关的样式包括大小和位置，外观的样式包括字体大小、颜色和背景图片等。
DOM查询与操作
DOM 操作是Ajax应用中页面动态和局部刷新的实现基础。DOM定义了文档的逻辑结构，以及对文档进行访问和操作的方式。通过DOM，开发人员可以在文档中自由导航，也可以添加、更新和删除其中的元素和内容。通过DOM规范提供的API就可以完成对文档的查询与操作。不过DOM的原生API使用起来比较繁琐，最好使用JavaScript库来完成查询和操作。
通过DOM操作对当前页面进行修改一般都是通过响应用户的事件而发生的。这些DOM操作中一部分是纯浏览器端实现的，另外一部分则需要服务器端的支持。服务器端可以选择返回数据或HTML片段。返回数据的好处是传输的数据量小，易于与第三方应用集成。不足之处在于浏览器端需要额外的操作来完成展示。浏览器端可以使用DOM操作或是模板技术来生成HTML片段。服务器端也可以通过JSP和Apache Velocity等模板技术来生成HTML片段，并直接返回给浏览器。浏览器只需要直接使用即可。这种做法的好处是浏览器端实现简单。不足之处在于与展示相关的逻辑同时存在于服务器端和浏览器端，不容易维护。
有一些比较好的实践可以提高DOM操作的性能。首先是使用文档片段（document fragment）。当需要插入大量节点的时候，首先把这些节点添加到一个文档片段中，再把此文档片段添加到文档上。这样可以减少页面的重新排列。其次是使用innerHTML来更新文档内容，速度比使用DOM API要快。最后是通过cloneNode()来创建多个结构相同的元素。
事件处理
Ajax 应用与用户的交互是通过响应用户事件的方式来完成的。浏览器负责捕获用户的行为并产生各种不同的事件，应用处理这些事件。浏览器中可以产生的事件种类比较多。事件产生之后，会按照一定的过程在当前文档树中传播。事件所产生的节点称为目标节点。完整的事件传播流程是从文档的根节点开始向下传播到目标节点（捕获阶段），然后再往上传播回根节点（冒泡阶段）。当事件传播到某个节点上的时候，就会触发此节点上绑定的处理方法。（IE只支持冒泡阶段。）需要注意的是事件处理方法中this所指向的对象的值，有可能是当前节点或是window对象。通过JavaScript库提供的支持来绑定事件处理方法，可以避免这些不一致。
在绑定事件处理方法的时候，可以利用事件的传播机制来减少事件监听器的数量。如当需要为一系列<li>元素添加鼠标点击的事件时，可以把该事件添加到其父节点<ul>上。在完成对事件的处理之后，可以终止事件的传播，还可以阻止浏览器的默认行为。
选用合适的JavaScript框架
目前存在非常多的JavaScript框架，有开源的也有商业的。比较流行的有jQuery、Dojo、YUI、ExtJs、MooTools和Prototype等。选用流行框架的好处是有比较大的社区支持，遇到问题的时候容易获得帮助。流行框架的文档和示例也比较丰富。使用不同的框架会给应用带来不同的实现风格。jQuery的使用者对方法的级联情有独钟，Dojo的爱好者则倾向于把页面上的不同部分划分成dijit来实现。
选用什么样的框架的因素很多，技术的和非技术的都有。一般来说，轻量级的框架，如jQuery和Prototype，上手比较容易，但是可复用的组件较少；而比较庞大的框架，如Dojo和ExtJs，则学习曲线较陡，但是可复用的组件非常多，适合快速开发复杂的Ajax应用。
免责声明：本网站（http://www.ciotimes.com/）内容主要来自原创、合作媒体供稿和第三方投稿，凡在本网站出现的信息，均仅供参考。本网站将尽力确保所提供信息的准确性及可靠性，但不保证有关资料的准确性及可靠性，读者在使用前请进一步核实，并对任何自主决定的行为负责。本网站对有关资料所引致的错误、不确或遗漏，概不负任何法律责任。
本网站刊载的所有内容（包括但不仅限文字、图片、LOGO、音频、视频、软件、程序等）版权归原作者所有。任何单位或个人认为本网站中的内容可能涉嫌侵犯其知识产权或存在不实内容时，请及时通知本站，予以删除。
抢沙发
