6.5　关注请求

到现在为止，我们已经学习了如何调用Ajax方法，并且始终都在处理响应。然而，有时候多了解一些调用Ajax方法过程中的HTTP请求也会给我们带来方便。为满足这种需求，jQuery提供了一组函数，通过它们能够为各种与Ajax相关的事件注册回调函数。

其中，.ajaxStart()和.ajaxStop()方法就是这些“观察员”函数中的两个例子，可以把它们添加给任何jQuery对象。当Ajax请求开始且尚未进行其他传输时，会触发.ajaxStart()的回调函数。相反，当最后一次活动请求终止时，则会执行通过.ajaxStop()注册的回调函数。所有这些“观察员”都是全局性的，因为无论创建它们的代码位于何处，当Ajax通信发生时都需要调用它们。而且这些方法都与.ready()方法一样，只能由$(document)调用。

在网络连接的速度比较慢时，可以通过这些方法为用户提供一些反馈。页面中用作反馈的HTML可以包含适当的Loading…（加载中）信息，例如：

<div id="loading">
  Loading...
</div>

反馈信息就是一个HTML片段，比如可以包含用作动态指示器的一幅动态GIF图像。此时，可以在CSS文件中添加一些简单的样式，这样当显示该信息时，页面的外观如图6-11所示。

图　6-11

但是，依照渐进增强的原则，我们并没有把HTML标记直接放在页面中。因为这段信息只能在JavaScript有效的情况下使用，所以应该通过jQuery来插入它：

$(document).ready(function() {
  $('<div id="loading">Loading...</div>')
    .insertBefore('#dictionary')
});

而在CSS文件中，我们为这个<div>添加了一条display:none;样式规则，以便在初始时隐藏这条信息。要在恰当的时机显示这条信息，只需通过.ajaxStart()将它注册为一个“观察员”即可：

$(document).ready(function() {
  var $loading = $('<div id="loading">Loading...</div>')
    .insertBefore('#dictionary');
  $(document).ajaxStart(function() {
  $loading.show();
  });
});

而且，可以在此基础上继续连缀相应的隐藏行为：

代码清单6-15

$(document).ready(function() {
  var $loading = $('<div id="loading">Loading...</div>')
    .insertBefore('#dictionary');
  $(document).ajaxStart(function() {
    $loading.show();
  }).ajaxStop(function() {
    $loading.hide();
  });
});

好的！我们的加载反馈系统已经就位了。

同样，我们注意到，这两个方法没有通过特别的方式与Ajax通信的开始建立联系。链接A上的.load()和链接B上的.getJSON()都可以导致反馈操作发生。

在这种情况下，全局行为是有必要的。假如我们想要建立具体的联系，也有一些可控的选项。某些观察员方法，如.ajaxError()，会向它们的回调函数发送一个对XMLHttpRequest对象的引用。这样就可以做到区别不同的请求来提供不同的行为。其他更具体的处理可以通过使用低级的$.ajax()函数来完成。

不过，与请求最常见的交互方式（我们已经介绍过了），是成功（success）回调函数。在前面的几个例子中，我们就是使用这个回调函数来解析从服务器返回的数据，然后将结果填充到页面上。当然，也可以使用其他回调函数。现在，仍然以代码清单6-1中使用的.load()方法为例：

$(document).ready(function() {
  $('#letter-a a').click(function(event) {
    event.preventDefault();
    $('#dictionary').load('a.html');
  });
});

此时，通过使加载的内容淡入视图而不是突然出现，可以从视觉上加入一些增强的效果。.load()方法可以接受一个加载完成时触发的回调函数，参见代码清单6-16。

代码清单6-16

$(document).ready(function() {
  $('#letter-a a').click(function(event) {
    event.preventDefault();
    $('#dictionary').hide().load('a.html', function() {
      $(this).fadeIn();
    });
  });
});

以上代码首先隐藏了目标元素，然后开始加载。当加载完成时，又通过回调函数以淡入方式逐渐显示出新生成的元素。