1.2 为什么使用Ajax

1.2  为什么使用Ajax

传统的Web应用采用同步交互过程，这种情况下，用户首先向Web服务器发送一个请求，然后Web服务器根据用户请求的内容，执行相应的任务，并向用户返回结果，如图1-1所示。这是一种不连贯的用户体验，在服务器处理请求时，用户只能等待，此时浏览器显示的页面是空白的，这也就是通常所说的“白屏”现象。

自从采用HTML进行Web传输和呈现以来，无论是基于哪种服务器技术（ASP、ASP.NET、JSP或PHP），Web应用中采用的都是如图1-1所示的处理模式。当页面内容比较少，或者服务器处理时间较短的时候，采用这种模式似乎没有什么不妥。但是，如果页面内容很多，服务器的响应时间较长，对于用户来说就难以接受了。根据调查，一个网页加载的时间如果超过4～5秒，那么大多数用户将不会等待，可能会选择切换到其他窗口或者直接关闭该页面。

图1-1  传统Web应用程序模型

此外，用户在某些时候仅仅需要改变页面中某部分的数据，但是他不得不刷新整个页面。尤其在人机交互较为频繁的应用系统中，这种现象屡见不鲜，这显然是和人性化的软件设计原则相违背的。如何减少用户的等待时间，提高系统的可用性呢？现在除了优化代码、调整服务器配置之外，还可以选择使用Ajax技术。

与传统的Web应用不同，Ajax采用了异步交互的方式。它在用户和服务器之间引入了一个中间媒介，从而改变了同步交互过程中的“处理－等待－处理－等待”模式。用户的浏览器在执行任务时即装载了Ajax 引擎。该引擎是用JavaScript语言编写的，通常位于一个隐藏的框架中，负责转发用户界面和服务器之间的交互。Ajax引擎允许用户和应用系统之间的交互以异步的方式进行，独立于用户与Web服务器之间的交互。现在，可以用JavaScript调用Ajax引擎来产生一个HTTP的用户请求，数据编辑、页面导航和数据验证等操作不再需要重新加载整个页面，可以通过Ajax引擎向Web服务器发送请求。基于Ajax的Web应用程序的模型如图1-2所示。

使用Ajax可以带来的好处有以下几方面。

• 减轻服务器的负担。Ajax的原则是“按需取数据”，可以最大程度地减少冗余请求，减轻服务器的负担。

图1-2  基于Ajax的Web应用程序模型

• 无需刷新页面，减少用户心理和实际的等待时间。特别是在读取大量数据时，不会像刷新页面那样出现白屏的情况，Ajax使用XMLHttpRequest对象发送请求并且得到服务器响应，在不重新载入整个页面的情况下，用JavaScript操作DOM更新页面。因此在读取数据的过程中，用户所面对的不是白屏，是原来的页面内容（也可以加一个“Loading”的提示框让用户知道目前正在读取数据），只有在数据接收完毕之后才更新相应部分的内容。这种更新是瞬间的，用户几乎感觉不到。

• 带来更好的用户体验。

• 可以把以前一些服务器负担的工作转嫁到客户端，利用客户端闲置的能力来处理，减轻服务器负担，充分利用带宽资源，节约空间和宽带租用成本。

• 可以调用外部数据。

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

• 进一步促进页面呈现与数据的分离。