17.4  Ajax应用实例

随着Ajax技术的流行，越来越多的商业网站使用Ajax技术来改进其用户体验，并获得了很好的效果，受到了广大用户的欢迎。在Ajax技术的应用和推广方面，Google当仁不让是表率。因而提到Ajax技术的应用实例，不得不提Google一系列成功的Ajax技术产品，如Google主页、Google Suggest、Google Maps以及Gmail等。下面列举Google主页和Google Maps的实例，让读者对Ajax技术的应用场合有个整体的认识。

 17.4.1  Google 主页

在搜索目标信息时，若服务器能及时提示一些相关信息，便于用户的选择，这是非常有效的。Google搜索引擎得主页上就实现了上述功能，当用户输入目标信息时，浏览器把此信息及时发给服务器，而服务器根据用户输入的信息将与之相关的信息返回，在客户端页面中以下拉框的方式显示用户可能感兴趣的若干个搜索关键字，并包含每个可能匹配的总数。例如输入“javasc”，提示信息如图17.5所示。

该功能最早使用在Google Suggest上，后来在Google 主页上得到推广应用。该简单的客户端和服务器端交互的功能很强大，也很有效，极大地方便了用户的使用，提供了更好的客户体验，受到用户的喜爱。而且响应速度极快，用户一边输入，下拉框的内容就能及时地从服务器端获得更新。在不刷新页面的情况下，用户能获得相关提示，如果有合适的搜索关键字，只要单击即可选择该项作为搜索关键字。

图17.5  Ajax技术应用于Google搜索引擎主页

 17.4.2  Google Maps

Google另一个引领Ajax Web应用程序的是Google Maps。该应用程序做到了“按需读取数据”的原则，只更新需要更新的部分，这是Ajax的精髓。

Google Maps的功能十分强大，可以随意地拖动、放大和缩小地图。在程序中，地图被分割成很多的图像，地图的拖动或者放大、缩小操作，都要填入或者更新新的图像。Google Maps可以在不刷新页面的情况下，每次在原有的数据上以增量的方式显示地图。

细心的用户会发现，地图在拖动或者放大缩小时，有时地图上会出现空白，如图17.6所示。

图17.6  Google Maps 出现空白

经过一段时间（具体时间依网络速度而定），地图的空白处会补充上新的内容，而页面本身并不用刷新，如图17.7所示。

图17.7  Google Maps 补充空白

地图上空白区域的出现以及无须刷新的补充，说明浏览器端在不断地与服务器端交互，得到新的地图数据后动态地补充到地图中。如果再向右边拖动地图，若交互不及时，则又会出现空白，说明地图数据没有在本地缓存，每次更新都要和服务器交互，以取得需要更新的数据。

可见，Ajax真正地做到了“按需读取数据”的原则，需要什么取什么，需要多少取多少，在减少网络负载的同时，加快了服务器的响应速度。并且页面无须刷新，不会出现恼人的白屏现象。在等待页面更新的过程中，用户仍可看到原有的地图数据，并可进行一些操作，从而提供了非常好的用户体验。因此，Ajax技术在地图搜索领域越来越流行，例如在百度地图中也使用了Ajax技术。