6.1.1 原理分析

第6章  Ajax实例

在上一章里，已经给出了一些使用Ajax来开发Web应用程序的例子，从中可以看到Ajax在用户体验方面带来的明显改善。本章将继续讲解一些Ajax的实例，来展示Ajax在当前Web应用程序中所发挥的强大功能。

本章包括如下内容：

• 提示等待；

• 级联下拉框；

• Google suggest的例子；

• Slider（滑块）。

6.1  提示等待

我们每天都会浏览许多的网页，通常情况下当单击网页中的按钮或链接后系统都会提交表单，进行页面的切换和跳转。网站负载量很大，则对于每个用户的响应就会变慢，这时如果网页显示一片空白，这时用户无法知道服务器的状态，也许等上很久很久的时间也不会看到结果页面。如果在用户等待的时候能够给用户一些提示信息，会使用户在一定程度上了解服务器端的状态，不至于不知所措。

本程序的运行结果如图6-1所示。

6.1.1  原理分析

在上一章中曾讲过，XMLHTTPRequest对象的请求状态有5个可取值：

0 = 未初始化，1 = 正在加载，2 = 已加载，3 = 交互中，4 = 完成。

除了值等于4的情况外，其他的状态值都表明服务器端的数据没有全部的返回，也就是用户还没有接收到完整的服务器端的响应，用户处在等待的状态。当状态值等于4的时候，表示数据全部返回，用户的请求从服务器端得到了完整的响应。

因此在程序中，可以在状态值不等于4时对HTML代码进行一些修改，让页面显示一些提示信息，如显示具有滚动效果的文字或者图片，这样便可达到提示等待的效果。下面将对实现这一功能的Ajax代码进行详细解释。