第三部分

第8章 Ajax技术详解

近两年来，Ajax逐渐成为一个炙手可热的名词，其良好的用户体验，得到人们越来越多的推崇。它整合了XMLHttpRequest、JavaScript、DOM、CSS、XML等众多技术，使得原来笨拙的Web界面变得交互性十足。

本章从Ajax的来源讲起，介绍其工作原理、发展趋势和应用示例，然后分别介绍Ajax的核心技术，最后介绍目前比较流行的Ajax实现框架，并对它们进行比较。目的是让读者明白什么是Ajax，如何应用Ajax。

8.1 Ajax概述

当软件开发从C/S模式转入B/S模式时，人们惊呼B/S模式所带来的便利，但随着B/S的应用，它的缺点也逐渐暴露出来，这时Ajax的出现也就水到渠成了。Ajax的英文全称是Asynchronous JavaScript and XML，即异步JavaScript和XML。

8.1.1 Ajax的来源

很明显，B/S模式的应用很容易部署和维护，因为客户端所有的操作系统都会有浏览器，而且不需要下载和安装客户端，用户可以利用基于浏览器的客户端做事情。但B/S模式是一个同步的请求/响应系统，会导致浏览器对整个页面进行刷新，当服务器负载很小时，这种交互方式并没有什么问题；但当服务器负载很大时，用户需要等待很长的时间才能得到想要的数据，这给用户带来的交互体验不是太好。由此可以看出，人们需要一个异步的交互模式。

Ajax正是这种异步交互模式的代表，它采用XMLHttpRequest对象进行数据的异步交互，使用JavaScript增强用户体验，使用DOM组织内容，使用CSS显示外观，使用XML封装数据。Ajax不是一种新的技术，而是几种已有技术的整合，是由Adaptive Path公司的Jesse James Garrett在2005年提出来的——2005年的2月，他发表了一篇《Ajax: A New Approach to Web Applications》文章，在这篇文章中Ajax概念第一次被提出来。

8.1.2 Ajax的工作原理

在传统的Web交互方式中，首先由用户通过界面触发一个HTTP请求到服务器，服务器根据请求的内容进行相应的处理，然后将处理完毕的内容再返回给客户端。这是一个同步的过程，当服务器处理客户端提交的请求时，客户端的用户只能空闲等待，无论用户是想处理很少的数据，还是要进行大批量的数据处理，服务器都会给用户重新返回一个完整的页面。这种传统的同步交互模式如图8.1所示。

在传统的同步交互模式下，客户端每次都要浪费时间和带宽去重新读取整个页面。前面讲过，如果服务器负载比较小，速度还会比较快；如果此时服务器负载很大，则需要较长的时间才能在服务器端处理完，而此时用户却要白白地浪费时间在客户端等待，这样的用户体验是相当糟糕的。

Ajax却不一样，它采用异步机制，使得用户可以一边等待反应，一边查看网页中的内容。Ajax的工作原理相当于在用户和服务器之间加了一个引擎，这个引擎用来统一处理提交的数据，它把不需要服务器端处理的数据直接返回给页面，而只把需要后台处理的数据传给服务器端，这种典型的异步交互模式如图8.2所示。

在这种异步交互模式下，客户端不需要重新读取整个页面，而只读取所需要的那部分内容，这样的用户体验无疑是不错的。

8.1.3 Ajax的发展趋势

Ajax的这种异步交互模式，给Web应用带来了很多好处：

● 按需取数据——Ajax只把那些需要后台处理的数据提交到服务器端，从而减轻服务器端的压力。

● 更好的用户体验——Ajax采用异步交互机制，可以使用户一边浏览网页，一边提交数据。

● 数据和呈现分离——Ajax采用DOM来组织内容，采用CSS来显示外观，从而使UI设计人员可以只关注界面的展示。

但Ajax目前也有很多问题没有解决，比如：

● 浏览器的“前进”和“后退”按钮的功能失效。

● 搜索引擎不容易找到网页的内容。

● 不同浏览器对JavaScript的支持存在兼容性问题。

而且目前出现一些新的技术有取代Ajax的趋势，比如：

● Macromedia Flash——Flash技术可以对视频和音乐进行交互操作，还可以进行组件和可视化开发，但要运行Flash就必须在浏览器上安装插件。

● Java Web Start——Java Web Start是基于Java技术的应用程序的一种部署解决方案，它使应用程序的部署过程自动完成，不需要进行复杂的升级；但使用Java Web Start的相关技术必须要求客户端安装Java运行时环境。

● Microsoft Smart Client——Microsoft Smart Client是基于.NET平台的应用程序的一种部署解决方案，它部署在IIS服务器上，本质上是基于.NET的WinForm程序，因此要使用Microsoft Smart Client的相关技术必须要求客户端安装.NET框架环境。

Java Web Start和Microsoft Smart Client技术从实现机制上来说，是非常相似的，只是它们分别支持Java和.NET平台。它们都采用B/S模式下载和升级、安装应用程序，但其实都应该属于C/S结构的应用程序，而Ajax技术只是增强了B/S的交互模式和响应速度。

8.1.4 Ajax的应用示例

Google是Ajax应用的先行者，它的Suggest（搜索建议）、Map、Gmail等都实现了Ajax技术。比如，在Google的首页搜索栏中，输入英文字母g，用户看不到它和后台进行交互，但它却能及时地给出搜索建议，如图8.3所示。

Google Map的用户体验更好，用户只需要用鼠标在地图上拖曳即可，如图8.4所示。