论文导读：目前在Web应用开发中，Ajax无疑已经成为最能提高用户体验的一种技术。而它在技术方面的优点，如标准公开、跨浏览器和跨平台的兼容性、和Flex和Flash技术很好的集成等特点已经将Ajax推向了更广泛的应用。本文从实际开发的角度出发，解析了Ajax的基本原理。
关键词：AjaxWeb应用，用户体验
 

1 Ajax概述

Ajax是一种用于创建交互式Web应用的开发技术，它不是一种单一的技术，而是几种各自发展的一系列相关技术的有机结合。虽然在利用Ajax时，需要多种技术的支持。论文参考。但值得庆幸的是，您可能已经非常熟悉其中的大部分技术。

下面是Ajax应用程序所用到的基本技术：

n 使用XHTML与CSS的标准表现。

n 使用DOM(Document Object Model)进行动态显示与交互。

n 使用XML和XSLT进行数据交换与操作。

n 使用XMLHttpRequest进行异步数据传输。

n 使用JavaScript将所有这些绑在一起。

2 与传统的Web应用比较

传统的Web应用允许用户端填写表单（form），当送出表单时就向Web服务器发送一个请求。服务器接收并处理传来的表单，然后送回一个新的网页，但这个做法浪费了许多频宽，因为在前后两个页面中的大部分HTML码往往是相同的。由于每次应用的沟通都需要向服务器发送请求，应用的回应时间就依赖于服务器的回应时间。这导致了用户界面的回应比本机应用慢得多。

与此不同，AJAX应用可以仅向服务器发送并取回必需的数据，它使用SOAP或其它一些基于XML的页面服务接口（界面），并在客户端采用JavaScript处理来自服务器的回应，从而达到不用刷新页面就可以更新页面。因为在服务器和浏览器之间交换的数据大量减少（大约只有原来的5%），结果我们就能看到回应（服务器回应）更快的应用（结果）。同时很多的处理工作可以在发出请求的客户端机器上完成，所以Web服务器的处理时间也减少了。

3 Ajax相关技术

前文已经提到，Ajax包含了多种技术。对于大多数Web应用开发者而言，其中的一些技术已经相当熟悉。即便是不够熟悉，这些技术都很容易学习，并不像完整的编程语言那样困难。

3.1 JavaScript

JavaScript是一种轻型的通用解释性脚本语言，其核心已经嵌入目前主流的Web浏览器中。虽然大部分时候看到的JavaScript应用都是在网页中简单地调用页面内置对象和方法，但其实JavaScript是一种具有丰富的面向对象特性的程序设计语言，利用它能够执行许多复杂的任务。

Ajax应用是用JavaScript编写的，如果没有对JavaScript有足有多编程经验或理解，开发Ajax将困难重重。

3.2 CSS

CSS既Cascading Style Sheets（级联样式表）的缩写。论文参考。顾名思义，它是用来进行网页风格设计的。采用CSS对页面进行布局和修饰有以下几个特点。

1）表现和内容相分离

将设计部分剥离出来放在一个独立样式文件中，HTML文件中只存放文本信息。这样的页面对搜索引擎更加友好。

2）提高页面浏览速度

对于同一个页面视觉效果，采用CSS+DIV重构的页面容量要比TABLE编码的页面文件容量小得多，前者一般只有后者的1/2大小。浏览器就不用去编译大量冗长的标签。

3）易于维护和改版

只要简单的修改几个CSS文件就可以重新设计整个网站的页面。

3.3 XMLHttpRequest

在Ajax涉及到的技术中，“最新”并且对于未从接触过Ajax的开发者而言可能最陌生的术语就是XMLHttpRequest对象了。通过这个对象，Ajax可以像桌面应用程序一样只同服务器进行数据层面的交换。XMLHttpRequest对象与服务器交互通常都通过XML来实现，当然也可以是基于文本的其他形式。

XMLHttpRequest其实是一个JavaScript对象。在客户端，我们很容易就可以创建一个XMLHttpRequest对象。

3.4 DOM

DOM是Document Object Model文档对象模型的缩写。根据W3C DOM规范，DOM是一种与浏览器，平台，语言无关的接口，使得你可以访问页面其他的标准组件。简单理解，DOM解决了Netscape的Javascript和Microsoft的Jscript之间的冲突，给予web设计师和开发者一个标准的方法，让他们来访问他们站点中的数据、脚本和表现层对像。

DOM是以层次结构组织的节点或信息片断的集合。这个层次结构允许开发人员在树中导航寻找特定信息。分析该结构通常需要加载整个文档和构造层次结构，然后才能做任何工作。由于它是基于信息层次的，因而 DOM 被认为是基于树或基于对象的。

利用JavaScript操作DOM，Ajax应用就能够实时修改用户界面，例如有效地重绘页面的某一部分，或者修改表格的内容。

4 Ajax使用的场合

Ajax虽然可以实现无刷新更新页面内容，但是也不是什么地方都可以使用，它主要应用在交互较多、频繁读数据、数据分类良好的Web应用中。

4.1 适用场合

1）表单驱动的场合

使用Ajax，可以随时提交异步数据，并在页面上快速显示更新结果，而不需要刷新整个页面。

2）深层次的树的导航

深层次的级联菜单（树）的遍历是一项非常复杂的任务。使用JavaScript来控制显示逻辑，使用Ajax延迟加载更深层次的数据可以有效地减轻服务器的负担。

3）快速的用户与用户之间的交流响应

在众多人参与交流讨论的场合下，为了避免用户主动刷新页面以获取新的结果，Ajax是最好的选择。

4）类似投票无关痛痒的场合

对于类似这样的场合，如果提交过程较长，很多用户就会因为等待时间太长而不参与。但是利用Ajax可以把时间控制在很短的时间内，从而吸引更多的用户参与。

5）对数据进行过滤和操纵相关数据的场合

对数据使用过滤器，按照某一字段排序，开关过滤器等，任何要求具备很高交互性数据操纵的场合都应该使用JavaScript。在每次数据更新后，在对其进行查找和处理需要耗费较多的时间，而Ajax可以加速这个过程。

6）普通的文本输入提示和自动完成的场合

在文本框等输入表单中给予输入提示，或者自动完成，可以有效地改善用户体验。论文参考。尤其对于那些自动完成的数据可能来自于服务器端的场合，Ajax是很好的选择。

2.不适用场合

1）部分简单的表单

虽然表单提交可以从Ajax获取最大的一处，但太多简单的表单极少能从Ajax得到明显改善。

2）搜索

有些使用了Ajax的搜索引擎不允许使用浏览器的后退按钮来查看前一次的搜索结果，这对已经养成搜索习惯的用户来说是不可原谅的。

3）替换大量的文本

使用Ajax可以实现页面的局部刷新，但是如果页面的每个部分都改变了，重新请求服务器要更加合理一些。

4）对呈现的操纵

Ajax看起来是纯粹的UI技术，但事实上不是。对于可维护的干净的Web应用，不使用Ajax来控制页面呈现是一个不错的主意。JavaScript可以很简单地处理XHTML/HTML/DOM，使用CSS就可以很好的表达数据显示。

5 结论