17.2  为什么需要Ajax

从Web出现之日起，Web开发人员从不放弃过为客户提供更快速便捷服务的目标，并不遗余力地为之工作。传统的Web应用采用同步交互方式，浏览器负责初始、发送请求，并等待、处理服务器返回的响应。浏览器在等待服务器返回的过程中，不能进行其他操作，而屏幕往往一片空白（白屏现象）。针对这种现象，开发人员找到了改进的契机，那就是异步Web交互模式——Ajax应用模式。

 17.2.1  传统的Web框架

传统的Web应用模型如图17.1所示，客户端接口通过HTTP 传输协议直接与Web服务器交互。

传统的Web应用模型采用同步交互模式，如图17.2所示，客户端首先向服务器端发送请求，服务器端接到客户端请求后进行相关的处理，并把结果返回给客户端，而在服务器处理的过程中，客户端不能进行任何其他操作，只能等待。得到服务器响应数据后，进行处理，再重新发送新的请求并等待响应。

这是一种不连贯的用户体验。如果交互的数据不多，而服务器的处理速度足够快，响应时间足够短，则该种交互模式没有什么太大的问题。但一旦交互数据比较大，由于服务器的业务比较大，处理响应时间比较长，则客户端等待响应时间相对较长，而往往客户面对的是空白的屏幕（白屏现象）。如果时间太长（大于4秒），客户是没有耐心去等待的；更糟糕的是，等待相当长的时间后，最终的结果却是连接服务器超时，这是不可忍受的。

此外，用户在某些时候只需要更新页面中的部分数据，而在传统Web模式下，他不得不刷新页面，或重新装载该页面。同时，在传统Web模式下，若服务器端页面有更新，客户为了实时地得到最新的信息，不得不重复刷新页面，而不能在不刷新页面的前提下只更新目标页面中需要更新的内容。

对于这些问题，Ajax能给出很好的解决方法，下面来看看Ajax的框架。

图17.1  传统Web应用模式                    图17.2  同步交互模式

 17.2.2  Ajax技术框架

Ajax Web应用模型如图17.3所示，客户端与Web服务器间增加了Ajax Engine（Ajax 引擎），客户端接口与Ajax引擎交互，而Ajax引擎再通过HTTP 传输协议与Web服务器端交互。

图17.3  Ajax Web应用模式

与传统Web应用模式根本的不同是，Ajax Web应用采用异步交互模式，如图17.4所示。Ajax在用户与服务器之间引入一个中间媒介——Ajax引擎，消除了同步交互模式中的“处理-等待-处理-等待”缺点。Ajax引擎用JavaScript语言编写，通常藏在一个隐藏的框架中。它负责编译用户界面及与服务器之间的交互，允许用户与应用软件之间的交互过程异步进行，独立于用户与Web服务器间的交流。异步交互模式下，客户端在等待响应的过程可以做一些不需要服务器端协作的操作，提供了更好的用户体验。

图17.4  异步交互模式

Ajax在客户端和服务器之间增加了Ajax引擎，使用户操作与服务器响应异步化。并不是所有的用户请求都提交给服务器，像一些数据验证和数据处理等都交给Ajax引擎处理，只有确定需要从服务器读取新数据时再由Ajax引擎代为向服务器提交请求。这样就把一些服务器负担的工作转到客户端，利用客户端闲置的处理能力，减轻服务器和带宽的负担。

Ajax能够在不刷新整个页面的情况下替换现有页面上的一部分，或者在现有页面上增加新的内容，譬如在某个地方增加一幅图片或者文字信息，在表格上增加或替换一行。这可以大大降低通信所需要的数据，也没有页面整体改变的闪烁感。执行服务器返回的脚本，开发人员可以在不刷新页面的情况下完全改变当前页面的风格、行为和外观。最后，在客户端上使用JavaScript可以对返回数据进行操作。Ajax的调用是异步的，或者说是非阻塞的，而任何其他的浏览器事件，例如滚动、用户单击等操作都不会受到影响。因此，用户很少会有等待的感觉。因此，Ajax带来了更好的用户体验。

 17.2.3  Ajax的优势

传统的Web应用模式采用同步交互模式，客户端过分依赖于服务器的响应，“等待-处理-等待”的处理过程缺点比较明显，有时对部分数据的更新不得不重新装载整个页面。传统Web应用同步模式效率低，同时对带宽的消耗较大。

与传统Web应用模式不同，Ajax应用模式采用异步交互模式，可以仅向服务器发送并取回必需的数据（按需取数据），并在客户端采用JavaScript处理来自服务器的响应。由于在服务器和浏览器之间交换的数据大量减少，Web应用的响应更快，提高了带宽利用率。同时很多的处理工作可以在发出请求的客户端机器上完成，而Web服务器处理业务减少。

总的看来，使用Ajax Web应用模式的优势有如下几方面：

— 无刷新更新页面，减少用户心理和实际的等待时间。当读取大量数据时，不会出现恼人的“白屏”现象；当页面有更新时，不需要重新加载该页面，只更新需要更新的部分。若为异步交互模式，在等待服务器响应的过程中，用户可以在原有页面上操作，以缩短可感知等待时间；

— 减轻服务器的负担。Ajax的原则是“按需取数据”，可以最大程度地减少冗余请求，从而减少对服务器造成的负担；由于Ajax是按需取数据，需要什么取什么，需要多少取多少，这将大大减少冗余请求，避免冗余数据的传输，减轻服务器负担的同时提高带宽利用率；

— 带来更好的用户体验；客户端与服务器端的交互更及时更快捷，为用户带来更好的体验；

—  Ajax可以把以前一些服务器负担的工作转到客户端，利用客户端闲置的能力来处理，减轻服务器和带宽的负担，节约空间和带宽租用成本，对用户和ISP是双赢的局面；

—  Ajax可以调用外部数据，增加了Ajax的灵活性；

— 基于标准化的并被广泛支持的技术，不需要下载插件或者小程序；

— 进一步促进页面呈现和数据的分离，特别是使用XML数据表示形式，该优势更明显。数据与呈现的分离，有利于分工合作、减少非技术人员对页面修改造成的Web应用程序错误、提高效率。

与传统的Web应用模式相比，Ajax Web应用模式有着很多吸引人的优点。也正是这些优势，使Ajax在短时间内成为炙手可热的技术名词。Ajax是一组“老技术”的组合，也正是这些“老技术”的巧妙结合，呈现出了各种新性能。下面简要介绍一下这些Ajax中核心的“老技术”。