第四部分：Ajax与Web服务器通信

第11章　初识Ajax

J avaScript很不错，但是它不能做所有的事情。如果想要显示来自一个数据库的信息，使用来自一个表单的结果完成一封E-mail，或者只是下载其他的HTML，我们都需要和Web服务器通信。对于这些任务，通常需要载入一个新的Web页面。例如，当从一个数据库查找信息的时候，我们通常离开查找页面去往另一个结果页面。

当然，等待一个新页面载入需要时间。并且，如果我们仔细考虑，一个页面消失然后再重新出现的概念通常来讲确实很奇怪。想象一下我们要使用Microsoft Word，并且每次打开一个新的文件，程序的菜单、面板和窗口都突然消失，然后当新文件打开的时候再次重新出现。像Facebook、Twitter、Google Maps和Gmail这样的站点，混淆了Web站点和桌面计算机程序之间的界限。如果说二者之间还有区别的话，就是人们希望Web站点给人的感觉更快、更具有响应性，像桌面程序那样。使得这种新一代的Web应用程序成为可能的技术，是一种叫做Ajax的编程技术。

Ajax允许一个Web页面向Web服务器提出请求并接收来自Web服务器的响应，然后更新自己而不必像以前那样载入一个新的Web页面。结果是Web站点给人的感觉是更具有响应性。例如，当我们访问Google Maps的时候（如图11-1所示），可以放大地图，向北、向南、向东或向西移动，甚至可以抓起地图来回移动。所有这些响应都不用载入一个新的Web页面就发生了。

图　11-1　Google Maps（http：//maps.google.com）是使用Ajax刷新页面内容而不必载入一个新的W e b页面的第一个大规模站点。这个站点的响应性基于只有地图数据改变这样一个事实，在请求新的地图信息时，页面的其他部分，例如logo、搜索框、搜索结果栏和地图空间都保持不变

11.1　Ajax

术语Ajax最初产生于2005年，用来描述Google的Google Maps（http：//maps.google.com）、Gmail（www.gmail.com）和Google Suggest（www.google.com/webhp?complete=1＆hl=en）等新一代Web站点所具备的基本特征。Ajax表示Asynchronous JavaScript and XML（异步JavaScript和XML），但是，它不是像HTML、JavaScript或CSS这样的一种“正式的”技术。它是表示一些技术的混合交互（JavaScript、Web浏览器和Web服务器）的一个术语，它使得我们可以获取和显示新的内容而不必载入一个新的Web页面。

注意：如果想要阅读关于Ajax在哪里第一次提出的博客帖子，请访问www.adaptivepath.com/ideas/essays/archives/000385.php。

简而言之，当前的Web浏览器允许我们使用JavaScript来向Web服务器发送一个请求，而Web服务器反过来把数据送回到Web浏览器。JavaScript程序接收数据，然后对它做些事情。例如，如果单击Google Maps页面上的“north”箭头按钮，页面的JavaScript从Google服务器请求一个新的地图数据。新的信息随后用于显示一个新的地图。

尽管我们可能不会再创建下一个Google Maps，但还是有很多简单的事情可以用Ajax技术做到：

·显示新的HTML内容而不用载入页面。例如，在列出新闻标题的一个页面上，当访问者单击一个标题的时候显示文章，你可以避免枯燥地等待新页面载入。相反，新闻报道可能出现在同一Web页面的右边，而banner、边栏和页脚或者其他的页面内容都不需要重新载入。我们将在10.3.2节学习如何做到这点。

·提交一个表单并且立即显示结果。例如，假设有一个“注册新闻组”表单，当某人填写并提交了表单，表单消失并且立即出现一条“你已经注册了我们的新闻组”的消息。我们将在11.3.3节学习如何使用Ajax制作这样的表单。

·登录而不用离开页面。这里有另外一个表单也和使用JavaScript相关，该页面带有一个小小的“登录”表单。填写了该表单，单击“登录”按钮，并且用户不仅登录了，而且页面会转而展示用户特定的登录状态、用户名以及可能的其他信息。

·星级评定挂件。在列出图书、电影和其他产品的站点上，我们经常看到星级评定，通常使用1～5来表示访问者如何评价项目的质量。这些评定系统通常使我们能够通过单击星级的数目来表达自己的观点。使用Ajax，我们可以允许访问者投票而不用离开Web页面，他们所必须做的只是单击星级。这里有一个可以做到这点的漂亮的jQuery插件：http：//plugins.learningjquery.com/half-star-rating/。

·遍历数据库信息。Amazon是可以浏览的在线数据库的一个典型例子。当在Amazon上查找一本书的时候，例如，找一本JavaScript图书，将会得到Amazon销售的JavaScript图书的一个列表。通常，这里会有很多的图书，以至于一个页面放不下，因此，我们需要从一个页面跳转到另一个页面来查看“下10个项目”。使用Ajax，我们可以在数据库记录之间移动而不必跳转到其他页面。Twitter是这样使用Ajax的：当你浏览Twitter页面的时候，会看到你所follow的人的一系列的tweet。如果滚动到该页面的底部，Twiter将载入更多的tweet。再次滚动，还会出现更多的tweet。这就好像是一个永远不会结束的Web页面！

除了“不要载入一个新页面”部分，上面列出的任务都没有什么创新的地方，我们可以使用常规的HTML和一些服务器端编程（例如，来收集数据或访问数据库信息）来实现同样的基本的结果。然而，Ajax使得Web页面更具响应性，并且提升了站点的用户体验。实际上，Ajax允许我们创建Web站点并且使其感觉更像是桌面程序而不像Web页面。