1.5 Ajax应用实例

1.5  Ajax应用实例

尽管Ajax的概念提出的时间还不长，但是目前已经出现了许多基于Ajax的应用。这一节中将介绍其中的几个，读者也可以访问相应的网站，亲身体会Ajax应用具有的独特的用户体验。

1.5.1  实例1：Google Suggest

Google Suggest（如图1-3所示）实在是一个值得称道的Ajax应用，它不仅很好地设置了下拉区，还会在输入框中自动输入最有可能的答案，并且将非用户输入的部分置灰，在下拉区中可以使用上下箭头或者鼠标选择搜索词。下拉区为每个可能的搜索词都提供了一些结果，用户可以清楚地了解当前输入的搜索词是否合适。

图1-3  Google Suggest

1.5.2  实例2：Google Maps

Google Maps（如图1-4(a)所示）是一个地图搜索的Web应用。在地图展示区中，用户可以鼠标拖动地图，或者用滚轮放大、缩小地图。在这个操作过程中用户可以看到，原来没有展示的区域会暂时处于空白状态，不久从服务器端传回的数据就可以将空白部分填满。但是整个下载数据的过程并不影响用户，用户可以继续其他的操作。Google Maps中还有一个很有趣的功能就是动态的信息提示，如图1-4(b)所示。当鼠标移到相应位置上时，会出现有关该位置的详细信息。注意，这些信息是即时获取的，而不是事先下载到本地的，实际上这也是Ajax按需取数据原则的一个体现。

(a)

(b)图1-4  Google Maps

1.5.3  实例3：A9.com

A9.com（见图1-5）是Amazon的搜索引擎，其特点是搜索选项可以随时增加、去除。如图1-5(a)所示是仅搜索“Web页”和“图像”的结果，如果这时用户还想看一看当前的搜索词在“图书”中有哪些结果，只需勾上“books”选项，页面会自动变为图1-5(b)所示，及时加载“图书”相关的搜索结果。由于应用了Ajax技术，原有的搜索结果仍然在网页上保留，只是添加了在“图书”范围内搜索并返回的结果，同时页面的布局发生了相应改变。当然所有这些过程中，页面只是局部更新，而不是刷新整个页面。

(a)

(b)图1-5  A9.com

1.5.4  实例4：Gmail

Gmail（如图1-6所示）是Google推出的电子邮件系统，从发布之日起Gmail就受到了业界极大的关注。原因之一是其超大的容量（2.5GB，并且在不断增长中），以及不同于其他电子邮件系统的邀请注册方式，这是Google推广策略的独到之处，和技术本身关系并不大。另一个重要原因则是该系统将Ajax技术应用得淋漓尽致，给用户使用Gmail邮件系统带来了很多便利，同时也引起了Web开发人员的广泛关注。

(a)

(b)

(c)图1-6  Gmail电子邮件系统

在以往的Web邮件系统中写邮件时，如果出现错误或者操作失误导致浏览器关闭，那么邮件的内容就会丢失。如果遇到这样的问题，人们以后再写比较长的邮件会先在其他编辑器中写好，再复制到邮件系统中去。现在使用Gmail则不会再出现这个问题，因为它会定时自动保存邮件的内容，即使浏览器被关闭也没有关系，邮件的内容已经在服务器上保存了。

在桌面的电子邮件客户端程序（如Outlook，Foxmail）中，收件人地址填写的提示功能是很方便的，而传统基于Web的邮件系统则不具有这种便利。但是在Gmail中，只需输入一部分邮件地址，就可以得到相应的提示，既快速又准确（类似Google Suggest）。

Gmail电子邮件系统中还有很多细微而贴心的小功能，虽然是一些小的改进，但是意义却是重大的。大多数功能的实现是基于Ajax技术的，在Gmail电子邮件系统中，由于大量使用了Ajax技术，浏览器不再仅仅是呈现页面内容，更重要的是承载了一个功能丰富的应用系统。

1.5.5  实例5：Amazon钻石搜索

Amazon（亚马逊）钻石搜索（如图1-7所示）可以让用户快速地查询符合要求的钻石。通常用户购买钻石时，会根据形状、价格、克拉数、切工、颜色以及纯净度等指标综合考虑，选择最合适的钻石。但是如果直接搜索的话，搜索的结果可能很多也可能很少甚至没有，用户很难锁定一个合适的范围进行挑选。Amazon钻石搜索基于Ajax技术采用了一种独特的方式，钻石的每一项特性都可以通过可调节的拉杆进行限定，在调节的同时，用户可以即时地看到当前选择的范围内有多少种钻石产品。当用户选择好范围以后，可以继续点击查看详细的产品信息，这种方式比传统的搜索方式更加直观、快捷，让用户购物更加方便。在Amazon钻石搜索应用中，Ajax起到了关键的作用，避免了频繁的页面提交和刷新，提高了系统的性能。

图1-7  Amazon钻石搜索