1.1 Ajax概述
在设计Ajax网页之前，了解与Ajax相关的一些概念是十分必要的。下面首先讲述什么是Ajax，以及Ajax技术有哪些优势，然后讨论与Ajax相关的各种技术，最后介绍一些目前比较流行的Ajax框架。
1.1.1 什么是Ajax
如果要用“充满魅力”来形容当前流行的各种Web开发技术，那么其中首屈一指的就是首推Ajax技术了。术语“Ajax”最早出自Jesse James Garrett在2005年2月撰写的一篇文章，标题是“Ajax：A New Approach to Web Application”。在这篇文章中，Garrett把Asynchronous JavaScript and XML简写为Ajax。由此可知，Ajax即异步的JavaScript和XML。
Ajax并不是一种单一的技术，而是一系列技术的无缝整合，每种技术都有其独特之处，把这些技术整合在一起就形成了一种功能强大的新技术。
Ajax主要包含了以下几种技术。
1.使用HTML/XHTML和CSS表示文档结构和样式
Ajax使用HTML/XHTML描述文档的结构，用于设置页面的初始外观，并通知浏览器下载客户端JavaScript脚本文件和外部CSS文件。随着程序的运行，文档的结构可能会有所变化。CSS（Cascading Style Sheet，层叠样式表）用于增强或控制网页元素的样式，并且允许将样式信息与网页内容分离。
2.使用DOM实现动态显示和交互
DOM（Document Object Model）即文档对象模型，用于描述网页元素的层次关系。W3C对DOM定义了从DOM0到DOM2的三个层次，通过JavaScript代码和相关函数可以访问公用的文档对象集合，也可以访问包括XML和CSS在内的所有页面元素，从而可以动态地改变文档的结构和内容。
3.使用XML和XSLT进行数据交换和处理
XML（Extensible Markup Language）是一种扩展性标记语言，是标准的数据表示方式，客户端或服务器端都可以对XML数据进行解析。XSLT（eXtensible Stylesheet Language Transformations）是一种扩展样式表转换语言，可以用于对XML文档进行转化。虽然通过XMLHttpRequest对象可以在客户端获取从服务器端响应的数据，但这些数据在传输过程中将被序列化为文本形式。为了更好地传输和处理数据，通常利用服务器端编程语言生成XML格式的文档，即用XML表示服务器与客户端的通信内容，在客户端接收到XML数据后，通过JavaScript对这些数据进行解析，并用来对页面进行局部刷新。
4.使用XMLHttpRequest实现与服务器的异步通信
XMLHttpRequest是Ajax技术中的核心对象，通过JavaScript脚本可以创建该对象，并允许以异步通信方式向服务器发出HTTP请求并得到响应，这就允许客户端可以在任何时候与服务器进行通信，而不局限于提交整个页面时；由于采用了异步通信方式，因此用户仍然可以与页面进行交互。XMLHttpRequest对象目前已经得到多数浏览器的支持，这也正是Ajax技术能够大行其道的一个前提条件。
5.使用JavaScript把所有的东西绑定在一起
通过JavaScript代码可以对当前页面中的所有DOM对象进行访问，并进行添加、修改和删除等操作，从而改变页面的内容；通过JavaScript代码可以设置页面元素的CSS类样式，从而改变该元素的外观样式（如显示/隐藏、颜色等）；通过JavaScript代码可以创建XMLHttpRequest对象，由此实现对服务器端程序的访问，并以GET或POST方式传递参数，然后接收服务器端返回的XML数据，并将解析结果应用于当前页面元素。
Ajax技术的应用需要使用支持上述技术的Web浏览器作为运行平台，这些浏览器目前包括：Mozilla、Firefox、Internet Explorer、Opera、Konqueror及Safari。不过，Opera不支持XSL格式对象，也不支持XSLT。
1.1.2 为什么使用Ajax
之所以要使用Ajax技术，主要是基于以下10个理由。
1.基于公开标准
Ajax技术是基于各主流浏览器和平台都支持的公开标准的技术，构成Ajax的大多数技术都可以长期使用。现在，对于绝大多数的用户和企业来说，浏览器是一个可以信任的应用平台。对于Ajax来说，Mozilla 1.0的发布并支持XML HTTP Request对象成为一个转折点，这种异步数据交换的技术多年前已被Internet Explorer浏览器支持。异步数据交换技术的支持和Mozilla Firefox浏览器的广泛应用，使人们认识到实现跨浏览器的富Internet应用（RIA，Rich Internet Application）是完全可能的。
2.可用性和用户体验
Ajax技术可以使Web应用有更好的可用性，它允许从服务器端请求少量的信息，而不是整个网页；它增加了页面数据的更新，同时还减少了页面刷新和刷新等待，从而可以提供更好的用户体验，无论数据来自内部网还是广域网服务，都能够快速获得信息。
3.跨浏览器和跨平台的兼容性
Internet Explorer和Mozilla Firefox是目前占据市场份额最大的两款浏览器，它们都支持在浏览器上轻松地创建基于Ajax的Web应用。现在开发运行在更为先进Web浏览器上的基于Ajax的富Web应用已经成为可能。
4.使常规的Web应用受益
Ajax技术使得从当今Web应用获得的利益超过了桌面应用，这些利益包括部署应用的低投入、维护方便、开发时间缩短，以及不需要安装，等等。Ajax技术不仅使Web应用获得益处，也使最终用户受益。
5.促使技能、工具和技术的升级
由于Ajax基于近年来一直使用的一些公开标准，因此很多开发人员有掌握新技术的要求，以便能够开发Ajax应用。20世纪90年代以来，一些企业在开发基于浏览器应用方面花费了大量投资，现在希望能在原有基础上增强用户体验。开发人员需要迅速将这些系统的用户界面升级到Ajax，但并不需要进行大规模的升级和重写Web应用。
6.能与Flex技术集成
Adobe Flex可以在企业内部或在Web上创建并交付富Internet应用程序，堪称最完整、最强大的RIA开发解决方案，可以极大地提高用户体验。Ajax和Flash两种技术在不同的场合拥有各自的优点和缺点，但是它们有大量的机会可以集成到一起工作。很多开发人员和技术提供商已经意识到这一点，并且集成Ajax和Flex协调使用。
7.采用率
Ajax现在已经被业界广泛采用，Google、Yahoo、Amazon及Microsoft等都使用了Ajax技术并获得了很大的成功。Google地图吸引了许多Web开发人员的目光，当人们开始调查是什么原因使Google拥有如此惊人的用户体验时，终于揭开了罩在Ajax头上的面纱。现在，许多金融机构、政府机构、航空公司和其他主要商业机构都在采用Ajax，并且早在Ajax流行之前就开始使用了。
8.Web 2.0
Web 2.0的运行吸引了开发人员、风险投资商、市场及最终用户的目光，有力地促进了Ajax的早期应用。实际上，Ajax界面就是Web 2.0应用的主要内容。Web 2.0的主要原则之一是使用Web作为一个应用开发的平台，而良好的可用性和交互能力的用户界面是一切应用平台的主要组成部分。
9.Ajax基于服务器技术的不确定性
Ajax技术兼容所有的标准型的服务器和服务端语言，如PHP、ASP、ASP.NET、Perl、JSP、Cold Fusion等，开发人员可以选择适合于自己的服务器技术，然后开始结合Ajax技术进行开发。这就使得Ajax开发具有相对的独立性，因为所有的开发人员都能使用并一起讨论相同的表现层。
10.基于Web的下一代RIA技术尚未出现
目前基于Web的下一代RIA技术尚未出现，不过已经出现了两种新的语言，即XUL（XML User Interface Language）和XAML（eXtensible Application Markup Language），它们都使用XML语言来描述用户界面。XUL的优势在于它提供了一套简易和跨平台的Widget定义，可以节省编码量。XAML是一种扩展的应用标记语言，使用XAML标记可以创建可视化的UI元件，并且通过JavaScript操作使用XAML声明的对象并对事件做出响应。XAML和XUL技术都使开发富Web应用变得简单，Ajax开发人员应该关注这些技术。
1.1.3 Ajax的工作机制
首先回顾一下传统的Web应用程序模型的工作方式。传统的Web应用程序采用浏览器/服务器模型以同步交互方式进行工作，如图1-1所示。当用户通过Web浏览器进行各种操作时，大多数操作在Web页面上会触发一个HTTP请求发送到Web服务器；Web服务器获取客户端数据后，按照应用逻辑对数据进行处理，最后以HTML形式把响应返回客户端浏览器进行显示，呈现页面时通常用CSS样式来丰富显示效果。
图1-1 传统Web应用程序模型（同步交互）
从技术角度来讲，传统的Web应用程序模型是行之有效的，这样的模型十分适合于以超文本为基础的Web应用程序。不过，这种模型并不适用于创建完美的用户体验。当服务器进行数据处理时，用户所能做的事情只能是两个字：等待。一个任务所需要的操作步骤越多，用户需要等待的次数也越多，需要等待的时间越长。
不言而喻，开发Web应用程序时理应重视用户体验，不应当让用户经常处在等待状态中。Web页面一旦加载完成，为什么还要因为客户端需要从服务器传输一些数据而中断用户交互呢？实际上，用户完全没有必要看到客户端与服务器的联系。
Ajax应用程序在用户与服务器之间引入了一个Ajax引擎，摒弃了传统的“请求-等待-响应”的交互形式。用户会话一旦建立，客户端浏览器就加载一个Ajax引擎。Ajax引擎用JavaScript脚本语言编写，其任务包括构造用户界面并与服务器进行沟通，如图1-2所示。Ajax引擎允许用户与应用程序的交互以异步方式进行，无须直接访问服务器。因此，用户永远不会在服务器处理数据期间无奈地面对一个空白页和沙漏图标。
图1-2 Ajax应用程序模型（异步交互）
一个Ajax交互过程是从一个称为XMLHttpRequest的JavaScript对象开始的，通过JavaScript客户端脚本以异步交互的方式来执行HTTP请求，并对服务器响应的XML数据进行解析，然后转换为HTML格式并辅以CSS呈现在客户端浏览器中。
在Ajax交互过程中，主要包括以下几个处理步骤。
1 用户通过客户端浏览器在网页上执行某个操作，如单击按钮、移动鼠标或从键盘上按下某个按键等。
2 由于用户操作，网页上发生相应的DHTML事件。
3 通过响应这个DHTML事件，执行相应的客户端JavaScript函数，执行过程中创建一个XMLHttpRequest对象实例，注册一个回调函数，通过使用XMLHttpRequest对象以异步方式向服务器端发送HTTP请求，此时可以通过Web页面继续响应用户的界面交互，避免了浏览器挂起并等待服务器的响应。
4 当服务器端收到XMLHttpRequest对象的HTTP请求时，可通过ASP、JSP、PHP、ASP.NET等服务器端技术对客户端请求的参数进行解析，然后执行适当的应用逻辑并将响应序列化到XML数据中。
5 Web服务器以标准的XML格式将响应的数据传递给Ajax。
6 当服务器响应到达客户端时，JavaScript回调函数被调用，对XML数据进行解析和处理，并通过CSS和DOM实现页面局部刷新。
7 用户通过客户端浏览器看到页面更新。
在传统Web应用程序模式中，用户操作的处理通过表单提交来触发一个HTTP请求；在Ajax模式中，用户操作通过JavaScript事件来触发对Ajax引擎的调用。对用户操作的响应不必等到服务器处理后返回，例如一些简单的数据验证，在内存中编辑数据，甚至一些导航功能都直接由Ajax引擎来处理，响应速度相当快。由于Ajax引擎通常以XML格式触发一个异步请求，因此即使Ajax引擎需要提交数据给服务器处理，并从服务器获取新数据并加载额外的界面代码，用户端也完全没有被中断的感觉。
1.1.4 流行的Ajax框架
如前所述，JavaScript是Ajax技术的一个主要组成部分。在开发Ajax应用的过程中，往往需要编写大量的JavaScript代码。为了减少JavaScript编码量，简化Ajax应用开发任务，目前出现了许多出色的Ajax开发框架。下面介绍目前比较流行的几种Ajax框架。
1.Dojo框架
Dojo是麻省理工学院（Massachusetts Institute of Technology，MIT）许可下的一个开放源码项目，由Alex Russell和Dylan Schiemann等人在2004年发起，其设计目标是解决DHTML开发中长期困扰人们的一些问题。Dojo是一个JavaScript用户界面开发工具包，它使编写JavaScript代码更容易，构建大型界面更快捷，部署动态的用户界面更方便。Dojo的基础是一个小型的库文件，该文件包括了Ajax、事件处理、页面特效及语言工具等。在这个基础上，在Dojo核心中还添加了一些高质量的工具，如拖放工具、Ajax扩展表单工具、I/O工具、Json-RPC、国际化及回调方法等。
Dojo的相关功能可以分为5个层次，自下而上依次是：打包系统，JavaScript语言库，与运行环境相关的脚本库，应用支持库，Widget工具包。
目前Dojo的最新版本为0.4.3，可以从http://www.dojotoolkit.org/处下载。
2.Prototype框架
Prototype是一个基础性的Ajax开发框架，其文件尺寸小，但功能很实用，适合于开发中小型Web应用。Prototype提供了跨浏览器的兼容性支持，对一些JavaScript内置对象进行了扩展，还添加了许多自定义对象，Ajax支持功能也是在自定义对象中实现的。
使用Prototype框架可以实现以下目标：对字符串进行各种处理；通过枚举方式访问集合对象；通过更简单的方式实现常见的DOM操作；使用CSS选择符定位页面元素；通过Ajax方式发送HTTP请求并对响应进行处理；监听DOM事件并对事件进行处理。
目前Prototype的最新版本为1.5.1.1，可以从http://www.prototypejs.org/处下载。
3.script.aculo.us框架
script.aculo.us也是麻省理工学院许可下的一个开放源码项目，它是构建于Prototype框架之上的JavaScript库。script.aculo.us框架的设计目标是帮助开发人员快速创建页面展示和操作的各种特效。该框架拥有强大的动画功能，并且支持各种DOM操作和拖放操作，也提供了一些控件和小部件，例如自动完成、滑动块及就地编辑等。
script.aculo.us框架由以下5个模块组成。
● builder.js：包含基础工具类。
● effects.js：包含页面呈现特效。
● controls.js：控件工具箱，包括自动完成控件和就地编辑控件。
● dragdrop.js：用于实现页面元素的拖放效果。
● slider.js：用于实现滑块功能。
由于script.aculo.us是一个基于Prototype的框架，因此，使用script.aculo.us框架之前，必须首先导入Prototype框架的JavaScript库，然后再导入script.aculo.us的JavaScript库。
目前script.aculo.us的最新版本为1.7.0，可以从http://script.aculo.us/downloads处下载。
4.Spry框架
Spry框架由Adobe公司开发，该框架实际上是一个JavaScript和CSS库，可用来构建向站点访问者提供更丰富体验的Ajax网页。使用Spry框架，可以显示XML数据，并创建用来显示动态数据的交互式页面元素，而无需刷新整个页面。有了Spry框架，就可以使用HTML、CSS和极少量的JavaScript代码，把XML数据合并到HTML文档中，也可以创建构件（如折叠构件和菜单栏）或者向各种页面元素中添加不同种类的效果。
Spry在设计上与其他Ajax框架不同，Spry框架的标记非常简单，便于那些具有HTML、CSS和JavaScript基础知识的用户使用，可以同时为设计人员和开发人员所用，因为实际上它的99%都是HTML。更为可喜的是，在Dreamweaver CS3中已经提供了对Spry框架的支持。通过Dreamweaver CS3，可以使用Spry框架进行动态用户界面的可视化设计、开发和部署。本书主要讲述如何利用Dreamweaver CS3创建基于Spry框架的Ajax网页。
Spry框架主要通过以下三种方式提供对Ajax技术的支持。
（1）Spry数据。Spry数据集是通过JavaScript脚本创建的一个对象。只需要在网页中编写几行代码，就可以创建一个Spry数据集对象并从指定的数据源（如XML文档、HTML表格及JSON对象等）异步加载数据，然后在网页上通过Spry区域来显示数据。
（2）Spry构件。这是一些预置的常用用户界面组件，可以使用CSS自定义这些构件，然后将其添加到网页中。使用Dreamweaver CS3，可以将多个Spry构件添加到页面中，这些构件包括XML驱动的列表和表格、折叠构件、选项卡式界面，以及具有验证功能的表单元素。
（3）Spry效果。这是一种提高网站外观吸引力的简洁方式，这种效果差不多可以应用于HTML页面上的所有元素。通过添加Spry效果可以放大、收缩、渐隐和高亮显示元素，在一段时间内以可视方式更改页面元素，以及执行更多的操作。
使用Spry框架时，应注意以下两点。
● Dreamweaver CS3内置的Spry框架版本为1.4，目前Spry 1.6版已经发布，可以从http://www. macromedia.com/go/labs_spry_download处下载。下载的Spry 1.6是一个ZIP压缩包（文件名为spry_p1_6_100107.zip）。该压缩包中包括完整的Spry支持文件和一些示例，也包括用于Dreamweaver CS3的Spry扩展升级文件（文件名为spry_p1_6_updater_100107.mxp）。若要用Spry 1.6来替换Dreamweaver CS3内置的Spry 1.4，可利用Adobe Extension Manager CS3程序安装此扩展包。
● 即使在Dreamweaver CS3中实现了Spry框架的升级，新版本中添加的Spry构件也不会自动出现在插入栏上，在这种情况下，仍然要通过手动方式编写代码来使用这些构件。在XML数据访问方面情况也是如此。
5.ASP.NET Ajax框架
ASP.NET Ajax框架由Microsoft公司开发，其主要设计目标是对现有的ASP.NET服务器端模型进行扩展，让其可以生成实现富客户端的JavaScript代码，并通过对ASP.NET增加客户端编程模型来简化客户端编程。
在服务器端编程方面，ASP.NET Ajax框架有以下特性：实现了与Visual Studio开发环境的无缝集成；开发者可以使用类似于ASP.NET的方式声明Ajax服务器端控件，运行期间Ajax所需要的脚本会自动发送到客户端浏览器并执行；对于客户端异步调用服务器端方法，ASP.NET Ajax提供服务器端/客户端数据类型转换、将服务器端方法或Web服务方法自动暴露给客户端、为远程Web服务生成本地客户端代理等功能；ASP.NET的许多内置功能（如身份验证等）也被暴露给客户端。
在客户端编程方面，ASP.NET Ajax框架有以下特性：对JavaScript进行扩展，使其支持完全面向对象编程方式；提供跨浏览器的兼容性支持；提供大量的预定义客户端组件；提供一种基于XML的声明性脚本编程语言，即ASP.NET Ajax XML Script。
目前ASP.NET Ajax的版本为1.0，可以从以下网址下载：