10.1 Ajax简介

10.1.1 什么是Ajax

Ajax是Asynchronous JavaScript and XML的简称，其中Asynchronous是异步的意思，所以Ajax又称为异步的JavaScript和XML。从Ajax的名称上看出，它包含3个技术要点：异步、JavaScript和XML。

Ajax并不是什么全新的技术，而是几种技术的集合，结合每个技术的独特之处，从而形成了一个功能强大的新技术。软件系统从早期的机遇C/S架构转向B/S架构，从而避免了烦琐的部署以及其他的工作。客户端只需使用浏览器就能非常轻松地与服务器端进行交互。但是，由于这类交互式同步交互方式，用户每进行一次提交就必须等待服务器的现实，这就大大降低了用户的体验度。Ajax的出现完全打破了这种请求/相应模式，使得客户端浏览器能异步地和服务器进行交互。这样服务器就不用为了显示几行数据而将整个页面数据重新发送到客户端。使用Ajax，用户可以创建接近本地桌面应用的更高效、更丰富、更动态的Web用户界面。

10.1.2 传统Web应用

传统的Web应用采用同步交互的方式与服务器进行通信，其有如下几个特点。

❑ 页面完全刷新。

❑ 即使简单的操作也会导致页面重新加载。

❑ 同步访问服务器端，降低用户体验度。

其同步交互的处理过程图如图10.1所示。从图中可以看出，当用户向服务器发送一个请求时，服务器接收到该请求，并按照事先编号的程序代码执行业务逻辑，然后将处理结果以HTML和CSS数据的方式返回给用户浏览器从而实现显示结果。其同步交互的Web传输过程图如图10.2所示。

从图中可以看出，用户提交请求后在服务器接收请求和处理请求以及返回处理结果这段时间当中只能进行等待。从用户的角度来看，好像整个操作都不是特别连贯，形成了提交—等待—提交—等待的不连贯操作。

10.1.3 Ajax的优势

Ajax相比传统Web应用有哪些优点呢？与传统的Web应用不同的是，Ajax采用异步交互的方式与服务器进行通信，其有如下特点。

❑ 页面部分刷新。

❑ 页面不会重新加载而只做必要的数据更新。

❑ 异步访问服务器端，增加用户体验度。

其异步交互的处理过程图如图10.3所示。从图中可以看出，在客户端和服务器之间有一个Ajax引擎。Web服务器通过相应标准的XML格式数据给Ajax，由Ajax引擎将其转换为HTML，并结合CSS进行显示。其异步交互的Web传输过程图如图10.4所示。

从图中可以看出用户在任何时间都可以向Ajax引擎提交数据，再由Ajax引擎与服务器进行交互。在这过程中，用户又可以提交下一个请求，而无需等待，Ajax引擎将自动将处理结果返回给客户端。从用户的角度来看，好像整个操作都是连贯的，形成了提交—返回结果—提交—返回结果的连贯操作。

10.1.4 Ajax技术组成

Ajax是多种技术的综合，由如下技术组成。

❑ XMLHttpRequest

❑ JavaScript

❑ DOM

❑ XML

❑ XHTML

❑ CSS

这些技术大部分应该都比较熟悉，只有XMLHttpRequest是新名词。其实XMLHttpRequest不是什么技术，而是Ajax中非常重要的一个对象。JavaScript通过它和服务器进行通信，并通过它来解析从服务器获得的XML文件代码。

其中XHTML和CSS用来显示数据，而DOM实现动态的现实和交互，XML则用来进行数据的交换和处理，而贯穿所有操作的是JavaScript。