jQuery中Ajax几个常用的函数

2019-02-13 10:27:11

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

一、使用 .ajax()

前面已经介绍了一些用于Ajax通信的方法。但在jQuery内部，它们都是$.ajax()全局函数的一种变体。

比如我们要加载一个静态页面，使用$('#container').load('a.html')加载HTML片段。同样的操作如果使用$.ajax()来实现，代码如下。
示例：
$.ajax({
   url: 'a.html',
   success: function(data) {
       $('#container').html(data);
   }
});

这里， $.ajax()接受了一个包含30余项设置（settings）的对象作为参数（或者一个URL字符串作为第一个参数，一个对象作为第二个参数），提供了极大的灵活性。
使用 $.ajax()函数的好处：
[1]避免浏览器缓存来自服务器的响应。非常适合服务器动态生成数据的情况。
[2]抑制正常情况下所有Ajax交互都可以触发的全局处理程序（例如通过$.ajaxStart()注册的处理程序）。
[3]在远程主机需要认证的情况下，可以提供用户名和密码。

二、使用$.ajaxSetup()

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

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

这与上面使用$.ajax()时实现的操作相同。
注意，虽然$.ajaxSetup()已经把type参数的默认值指定为POST，但在$.ajax()调用中仍然可以覆盖这个值，将其修改为GET。

三、部分加载HTML页面

使用Ajax技术取得并将HTML片段插入到当前页面中很简单。不过，有时候服务器提供的页面中的数据并非都是我们想要的，有些部分对我们来说没用。当遇到这种情况时，也可以使用jQuery。
示例：
a.html完整代码如下：

<div class="partA">
    <p>This is the content of partA</p>
</div>
<div class="partB">
    <p>This is the content of partB</p>
</div>
<div class="partC">
    <p>This is the content of partC</p>
</div>
<div class="partD">
    <p>This is the content of partD</p>
</div>

主页面HTML：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Load HTML Segment</title>
</head>
<body>
    <div id="main">
        <div id="letter">
            <h3><a href="#">Load Data</a></h3>
        </div>
        <div id="container">
        </div>
    </div>
</body>
</html>

Ajax取得a.html并将HTML片段插入到当前页面

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

不过加载的内容中有些没有用，我们只想要此页面中的一部分(如partC部分)。
可以这么做：

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

这样就只加载了我们想要的部分。