武汉科技馆检身份证:谁在使用Ajax

谁在使用Ajax

有许多商业性网站已经使用Ajax技术来改进其用户体验。这些网站和传统的产品手册式的网站相比，更像是一个Web应用，因为它不再仅用来显示信息，而是通过访问它来实现一个特定的目标。下面就是一些知名的、运转良好的、使用Ajax的Web应用程序。

1.6.1 Google Suggest

当开发人员讨论Ajax时，引用的第一个例子往往是Google Suggest（www.google.com/webhp? complete=1），其界面是Google主界面的一个简单克隆，有一个突出的文本框用来输入搜索关键字。当你在这个文本框中输入内容时，所有可能相匹配的内容都将显示出来。当你输入时，Google Suggest会从服务器上获取一些提示，以下拉列表的形式将你可能感兴趣的搜索关键字都显示出来。而且对于显示出的每个提示都将列出可能匹配的结果总数，以帮助你做出选择（参见图1-2）。

图 1-2

这个简单的客户端—服务器交互的功能很强大、有效，并且不会让用户感到厌烦。其界面所能做出的反应超出了原来对于一个Web应用程序的认识和预期；不管你输入有多快它都将做出相应的更新，就像桌面软件中的自动填充功能一样，可以通过上下箭头来在提示列表中选择任何一项。尽管它仍然还是beta版，不过可以肯定这个方法将会应用于Google的主页面上。

1.6.2 Gmail

Google的免费电子邮件服务Gmail已被当作Ajax时代客户端—服务器交互的奇迹而广为宣传。当你第一次登录Gamil时，应用程序所使用的某一个iframe将会载入用户界面引擎，以后所有与服务器交互的请求都将由这个用户界面引擎通过XMLHttp对象来完成。往返传输的数据将是JavaScript代码，浏览器下载之后能够快速执行。这些请求作为对用户界面引擎的指令，指示需要在屏幕上更新的内容。

另外，Gmail应用程序使用几个帧和iframe来管理和缓存较大的用户界面变化。如果用帧，要使Gmail能够正确地应对后退和前进按钮是一件极其复杂的事，这也是使用帧（或iframe）或结合XMLHttp的好处之一。

Gmail最大的胜利在于其可用性。如图1-3所示的用户界面相当简单、毫不杂乱，与用户之间的交互和与服务器之间的通信都显得自然、无缝。Google再次使用Ajax来对原本简单的概念进行改进，提供了一种特殊的用户体验。

图 1-3

1.6.3 Google Maps

Google最后一个引领潮流的Ajax Web应用程序是Google Maps（http://maps.google. com）。为了与原来已经地位稳固的地图应用网站竞争，Google Maps通过Ajax彻底避免了对主页面的重载（参见图1-4）。

图 1-4

与其他地图应用网站不同，Google Maps可以让你朝不同方向拖动地图。对于JavaScript开发人员而言，这些实现拖动效果的代码并没有什么新东西，不过，地图的分块拼接和看似无限制的滚动效果则另当别论。地图被分解成一组图像，它们组合在一起就构成了连续的图像。用来显示地图的图像数量是有限的，如果每次用户移动地图时创建新的图像，那很快就会造成内存问题。因此，应将同样的图像反复用于显示地图的不同片段。

客户端—服务器通信将通过一个隐藏的iframe来完成。只要你搜索或请求一个新的方向，该信息将在该iframe中提交并接收响应。返回的数据将以XML格式表示，并传给一个JavaScript函数（Ajax引擎）来处理。接着，这个XML将以不同的方式来使用：一些用来调用正确的地图图像，一些使用XSLT转换成HTML并显示在主窗体上。其结果就是展示出了一个前景光明的、复杂的Ajax应用程序。

1.6.4 A9

Amazon.com是世界著名的在线商城，几乎销售所有商品。当其发布搜索引擎时，并未引起太大声势和注意。A9（www.a9.com）的引入中显示了大大增强的搜索能力，它允许你同时搜索不同类型的信息。它通过Google来搜索网站和图像，还可以在Amazon.com上搜索图书，在IMDb（因特网电影数据库）上搜索电影。而且还可以搜索在2005年中期发布的Answers.com以及黄页和维基百科（Wikipedia）的内容。

让A9与众不同的是其用户界面的工作方式。当你执行一个搜索时，不同类型的结果将显示在页面上的不同区域中（参见图1-5）。

在搜索结果页面中，你可以使用同一个条件执行其他搜索。当选中与要搜索的类型相应的复选框时，搜索将通过组合隐藏帧技术和XMLHttp在后台执行。用户界面将为额外的搜索结果腾出位置，一旦从服务器接收到搜索结果就将其载入到页面中。结果是一个响应迅速的搜索结果页面，在你想搜索不同类型信息时，该页面根本无需重新载入。

图 1-5

1.6.5 Yahoo!News

网站Yahoo!News（http://news.yahoo.com）也在2005年引入了新的设计。新设计最主要的特性是一个令人感兴趣的功能增强：当你将鼠标移到一个特定的标题上时，将会弹出一个小方框，里面显示出消息的摘要，而且可能还包括一个相关的图片（参见图1-6）。

图 1-6

图片和摘要信息是使用XMLHttp从服务器上获得的，然后动态地插入到页面上。这是一个展示Ajax如何用于增强Web页面的绝佳例子。Yahoo!News网站并没有将Ajax作为最主要的使用模型，当浏览器没有Ajax支持时仍然是可用的；Ajax函数只是用来在有浏览器支持时增强用户体验的及时响应性。在其之下的是语义正确的HTML页面，甚至在不支持CSS的浏览器上也能够做出合乎逻辑的布局。

1.6.6 Bitflux Blog

Bitflux Blog（http://blog.bitflux.ch/）是另外一个将Ajax只用于功能增强的好例子，它的主要特性是一个称为LiveSearch的技术。LiveSearch和网站上的搜索框协同工作。当你在搜索框中输入信息时，一组可能的搜索结果就会立即显示在搜索框下面（参见图1-7）。

图 1-7

这些搜索结果是通过XMLHttp获取的，并以HTML字符串返回，然后插入到页面中。同样你也可以采用原来的方式来完成搜索：在文本框中输入文字，然后按回车。LiveSearch的Ajax功能只是为了增加整个网站的功能，但并非所有的搜索都必须使用它。