第 6 章　通过 Ajax 发送数据 - 6.9　其他工具 - 《jQuery基础教程（第4版）》

6.9　其他工具

6.9　其他工具

jQuery的Ajax工具箱中包含的工具非常丰富，前面我们介绍的只是其中一小部分。鉴于有用的工具确实很多，下面我们就概述一些定制Ajax通信过程中较为重要的工具。

6.9.1　低级Ajax方法

前面已经介绍了一些用于启动Ajax通信的方法。但在内部，jQuery会把这些方法都对象为$.ajax()全局函数的一种变体。这个函数不针对任何特定的Ajax通信类型，而是接收一个选项对象参数，并根据该参数来决定相应的行为。

我们介绍的第一个例子，是使用$('#dictionary').load('a.html')加载HTML片段。同样的操作如果使用$.ajax()来实现，应该如代码清单6-21所示。

代码清单6-21

$.ajax({
  url: 'a.html',
  success: function(data) {
    $('#dictionary').html(data);
  }
});

这里，$.ajax()接受了一个包含30余项设置（settings）的对象作为参数（或者一个URL字符串作为第一个参数，一个对象作为第二个参数），提供了极大的灵活性。使用低级的$.ajax()函数时，可以获得下列特殊的好处。

避免浏览器缓存来自服务器的响应。非常适合服务器动态生成数据的情况。
抑制正常情况下所有Ajax交互都可以触发的全局处理程序（例如通过$.ajaxStart()注册的处理程序）。
在远程主机需要认证的情况下，可以提供用户名和密码。

要了解如何利用上述及其他特性，请参考在线API（http://api.jquery.com/jQuery.Ajax）。

6.9.2　修改默认选项

使用 $.ajaxSetup() 函数可以修改调用 Ajax 方法时每个选项的默认值。这个函数与$.ajax()接受相同的选项对象参数，之后的所有Ajax请求都将使用传递给该函数的选项——除非明确覆盖，参见代码清单6-22。

代码清单6-22

$.ajaxSetup({
  url: 'a.html',
  type: 'POST',
  dataType: 'html'
});
$.ajax({
  type: 'GET',
  success: function(data) {
    $('#dictionary').html(data);
  }
});

这里的操作与前面使用$.ajax()时实现的操作相同，不过由于已经通过$.ajaxSetup()为请求指定了默认的URL，因此调用$.ajax()时就不需要再指定该选项了。相对而言，虽然已经把type参数的默认值指定为POST，但在$.ajax()调用中仍然可以覆盖这个值，将其修改为GET。

6.9.3　部分加载HTML页面

本章讨论的第一种，也是最简单的一种Ajax技术，就是取得并将HTML片段插入到当前页面中。不过，有时候服务器提供的页面中虽然包含我们需要的部分，但该部分之外的HTML却不是我们所需要的。当遇到这种服务器不能提供适当的数据格式的情况时，也可以在客户端求助于jQuery。

如果在本章第一个例子中，我们需要的字典解释包含在如下所示的完整的HTML页面（h.html）中：

<html lang="en">
  <head>
    <meta charset="utf-8"/>
    <title>The Devil's Dictionary: H</title>
    <link rel="stylesheet" href="dictionary.css"
      media="screen" />
  </head>
  <body>
    <div id="container">
      <div id="header">
        <h2>The Devil's Dictionary: H</h2>
        <div class="author">by Ambrose Bierce</div>
      </div>
      <div id="dictionary">
        <div class="entry">
          <h3 class="term">HABEAS CORPUS</h3>
          <div class="part">n.</div>
          <div class="definition">
            A writ by which a man may be taken out of jail
            when confined for the wrong crime.
          </div>
        </div>
        <div class="entry">
          <h3 class="term">HABIT</h3>
          <div class="part">n.</div>
          <div class="definition">
             A shackle for the free.
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

那么，可以通过代码清单6-1中的技术把整个文档都加载到页面中，如代码清单6-23所示。

代码清单6-23

//未完成的代码
$(document).ready(function() {
  $('#letter-h a').click(function(event) {
    event.preventDefault();
    $('#dictionary').load('h.html');
  });
});

不过产生的结果并不理想，因为文档中包含不需要的内容（加载的内容中包含页面标题和作者名，这显然与已有内容重复了），如图6-13所示。

图　6-13

要去掉页面中多余的内容，可以利用.load()的一些新特性——在指定要加载文档的URL时，也可以提供一个jQuery选择符表达式。如果指定了这个表达式，.load()方法就会利用它查找加载文档的匹配部分。最终，只有匹配的部分才会被插入到页面中。具体来说，我们可以利用这个技术，只取得文档中的词条部分，然后插入到页面中，如代码清单6-24所示。

代码清单6-24

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