jQuery AJAX函数使我们可以在HTML页面中轻松使用AJAX。术语AJAX是异步Javascript和XML的缩写。 AJAX使得从后台服务器异步获取内容成为可能，并用新内容更新页面的所有部分，而不必重新加载完整的HTML页面。

jQuery AJAX示例

这是第一个jQuery AJAX示例，显示了如何在jQuery中进行AJAX调用：

var jqxhr =
    $.ajax({
        url: "/theServiceToCall.html",
        data: {
            name : "The name",
            desc : "The description"
        }
    })
    .done  (function(data, textStatus, jqXHR)        { alert("Success: " + response) ; })
    .fail  (function(jqXHR, textStatus, errorThrown) { alert("Error")   ; })
    .always(function(jqXHROrData, textStatus, jqXHROrErrorThrown)     { alert("complete"); })
    ;

首先调用$ .ajax()函数。向此函数传递一个JavaScript对象，该对象包含有关要进行的AJAX调用的信息。在示例中，此对象包含URL和要发送到服务器的数据。

$ .ajax()函数返回一个对象。在这个对象上，示例调用了三个函数：done()，fail()和always()。

函数done()被赋予一个函数作为参数。如果AJAX请求成功，则执行作为参数传递给done()函数的回调函数。回调函数获得三个参数：data，textStatus和jqXHR。 data参数是服务器返回的数据。 textStatus参数是服务器返回的文本状态消息。 jqXHR参数是jqXHR对象，它也由$ .ajax()函数返回。

还给fail()提供了一个函数作为参数。如果AJAX请求失败，则作为参数传递给fail()函数的回调函数将被调用。回调函数获得三个参数：jqXHR，textStatus和errorThrown。 jqXHR参数是jqXHR对象，它也是由$ .ajax()函数返回的。 " textStatus"是服务器返回的文本状态消息。 errorThrown参数是jQuery抛出的错误。

每当AJAX请求完成时，无论AJAX请求是成功还是失败，都将调用传递给always()函数的回调函数。传递给回调函数的三个参数将与传递给done()或者fail()的三个参数相同，这取决于AJAX请求是成功还是失败。

1.8.0之前的jQuery AJAX

在jQuery 1.8.0之前，从jQuery $ .ajax()函数返回的对象不包含done()，fail()和always()函数。取而代之的是，这些函数被称为"成功()"，"错误()"和"完成()"。

1.8.0之后的jQuery AJAX

从jQuery 1.8.0开始，$ .ajax()函数返回一个jqXHR对象，该对象实现了promise接口(done()，fail()，always()等)，而不是success()，error()和complete()函数。现在不推荐使用success()，error()和complete()函数。我在有关jQuery延迟对象的文章中描述了promise接口。

使用AJAX接收HTML

默认情况下，jQuery AJAX函数不会解析从服务器接收到的数据。我们可以将其原始插入div中，如下所示：

var jqxhr =
    $.ajax({
        url: "/theServiceToCall.html",
        data: {
            name : "The name",
            desc : "The description"
        }
    })
    .done (function(data) { $('#theDiv').html(data); })
    .fail   (function()     { alert("Error")   ; })
    ;

请注意，done()函数如何选择ID为theDiv的div并调用其html()函数，并将从服务器接收的数据作为参数传递。

使用AJAX接收JSON

如果我们希望jQuery将从服务器接收到的数据解释为JSON，则必须将dataType：'json'字段添加到作为参数传递给$ .ajax()调用的JavaScript对象中。假设我们从服务器返回了一个JSON对象，如下所示：

{
    "param1" : "hello world"
}

然后，我们可以通过$ .ajax()调用来解析该JSON对象并引用param1属性：

var jqxhr =
    $.ajax({
        url: "/theServiceToCall.json",
        dataType: 'json',
        data: {
            name : "The name",
            desc : "The description"
        }
    })
    .done (function(data) { alert("Success: " + data.param1) ; })
    .fail   (function()     { alert("Error")   ; })
    ;

在AJAX请求中发送参数

我们可以通过jQuery的AJAX函数将参数发送到服务器。我们已经看到了这样的示例。这是传递给$ .ajax()函数的JavaScript对象的data属性，其中包含要发送到服务器的数据。这是一个用粗体标记的data对象的示例：

var jqxhr =
    $.ajax({
        url: "/theServiceToCall.html",
        data: {
            name : "The name",
            desc : "The description"
            }
    })
    .done (function(data) { alert("Success: " + data.param1) ; })
    .fail   (function()     { alert("Error")   ; })
    ;

data属性应始终为JavaScript对象。它的属性被序列化为必需的查询字符串(用于GET请求)或者常规的帖子主体参数字符串(用于POST请求)。然后，此序列化的字符串与AJAX请求一起发送到服务器。

在服务器上，我们可以读取数据对象的属性，就像通过GET或者POST将其作为简单的请求参数发送一样。就像属性是表单中的字段一样。在上面的示例中，服务器将能够读取两个请求属性：name和desc。

在AJAX请求中发送原始数据

如果我们不希望jQuery将data对象转换为序列化的参数字符串，则可以通过在传递给$ .ajax()函数的JavaScript对象中设置processData：false来避免这种情况。这是一个例子：

var jqxhr =
    $.ajax({
        url: "/test.jsp",
        processData : false,
        type : "POST",
        data: "THE DATA"
    })
    .done (function(data) { $('#ajaxDiv').html(data) })
    .fail   (function()  { alert("Error ")   ; })
    ;

注意将processData属性设置为false。这告诉jQuery在将data属性发送到服务器之前不要对其进行处理。

其次，注意" type"属性，该属性设置为" POST"。这告诉jQuery将数据发布到服务器。

第三，请注意data属性现在只是一个要发送到服务器的原始数据字符串。如果我们在发送数据之前未处理数据，则不能将JavaScript对象用作"数据"属性。

在AJAX请求中发送JSON

如果需要通过AJAX请求将JavaScript对象作为JSON字符串发送到服务器，则需要将JavaScript对象转换为JSON字符串并将字符串作为原始数据发送。这是一个jQuery JSON帖子示例：

var theObject = { p1: "v1", p2 : "v2 };

var jqxhr =
    $.ajax({
        url: "/test.jsp",
        processData : false,
        type : "POST",
        data: JSON.stringify(theObject)
    })
    .done (function(data) { $('#ajaxDiv').html(data) })
    .fail (function()  { alert("Error ")   ; })
    ;

HTTP GET和POST

HTTP请求可以作为GET，POST，PUT，DELETE或者HEAD请求发送。在这里，我将向我们展示如何执行GET和POST请求。由于AJAX请求是HTTP请求，因此我们还可以指定要与jQuery AJAX请求一起使用的HTTP方法。

如我们先前所见，可以通过其JavaScript参数对象将要使用的HTTP方法传递给$ .ajax()。我们可以通过设置参数对象的type参数来实现。这首先是一个使用jQuery AJAX函数的HTTP GET示例：

var jqxhr =
    $.ajax({
        url: "/target.jsp",
        type : "GET",
        data: {
            param1 : "value1",
            param2 : "value2"
        }
    })
    .done (function(data) { /* process data */ })
    .fail (function()  { alert("Error ")   ; })
    ;

这是一个使用jQuery AJAX函数的HTTP POST示例：

var jqxhr =
    $.ajax({
        url: "/target.jsp",
        type : "POST",
        data: {
            param1 : "value1",
            param2 : "value2"
        }
    })
    .done (function(data) { /* process data */ })
    .fail (function()  { alert("Error ")   ; })
    ;

$ .get()和$ .post()函数

jQuery具有两个函数，可用于发送简化的HTTP GET和HTTP POST请求。这些函数是$ .get()和$ .post()函数。

这是显示如何使用jQuery的$ .get()函数的示例：

var parameters = { p1 : "val1", p2 : "val2"};
$.get("data.html", parameters )
    .done(function(data) {
        $("#targetElement").html(data);
    }) ;

$ .get()函数将URL和请求参数对象作为参数。 $ .get()函数返回一个jqXHR对象，就像$ .ajax()函数一样。因此，响应的处理类似于使用$ .ajax()函数处理响应的方式。

jQuery的$ .post()函数以相同的方式工作。这是一个例子：

var parameters = { p1 : "val1", p2 : "val2"};
$.post("data.html", parameters )
    .done(function(data) {
        $("#targetElement").html(data);
    }) ;

$ .getJSON()函数

$ .get()和$ .post()函数不处理服务器返回的数据。如果要将服务器返回的数据解释为JSON，则可以使用jQuery的$ .getJSON()函数：以下是$ .getJSON()示例：

var parameters = { p1 : "val1", p2 : "val2"};
$.getJSON("data.json", parameters )
    .done(function(data) {
        $("#getJSONTarget").html(data.param1);
    }) ;

如我们所见，$ .getJSON()函数的函数与$ .get()和$ .post()函数的工作原理非常相似。唯一的区别是，通过done()传递给回调函数集的data参数现在是一个JavaScript对象。

load()函数

jQuery还有一个名为" load()"的函数，可以在选定的元素上调用它。 load()元素通过AJAX加载一些HTML并将其插入到选定的元素中。这是一个jQueryload()示例：

$("#loadTarget").load("html-fragment.html");

并带有请求参数：

var parameters = { p1 : "val1", p2 : "val2"};
$("#loadTarget").load("html-fragment.html", parameters);

并在load()完成时调用一个回调：

var parameters = { p1 : "val1", p2 : "val2"};
$("#loadTarget").load("html-fragment.html", parameters, function() {
    console.log("load done");
});

我们也可以只插入一部分HTML。如果在url后面添加空格+ jQuery选择器字符串，则load()将仅插入与选择器匹配的已加载HTML的一部分。这是一个例子：

$("#loadTarget2").load("html-fragment.jsp #div2");

本示例加载HTML片段html-fragment.jsp，从该片段中选择ID为div2的元素，然后仅插入该元素，而不管HTML片段还包含什么内容。

注意：如果加载的HTML包含任何JavaScript，则将HTML插入目标HTML元素时将执行该JavaScript。但是，如果加载片段(URL + jQuery选择器)，则在插入HTML之前，将删除在加载的文件中找到的所有JavaScript。通常，不要使用load()来加载JavaScript(除非我们绝对需要一起加载HTML和JavaScript)。 jQuery为此具有$ .getScript()函数。

$ .getScript()函数

jQuery中的$ .getScript()函数加载一个JavaScript文件并执行。该函数使用jQuery的基础AJAX函数，因此$ .getScript()函数无法从其他域加载脚本，而不是从中加载请求的HTML页面(就像普通AJAX调用一样)。

这是一个jQuery.getScript()示例：

$.getScript("sample-script.js");

带有参数示例的jQuery$ .getScript()：

var parameters = {};
$.getScript("sample-script.js", parameters);

还有一个带有回调示例的jQuery$ .getScript()：

var parameters = {};
$.getScript("sample-script.js", parameters, function() {
    console.log("sample-script.js loaded");
});

最后一个函数调用也可以在省略" parameters"对象的情况下使用。

全局AJAX函数

jQuery具有一组全局AJAX函数，我们可以使用它们在通过jQuery发送的所有AJAX请求中侦听AJAX事件。这些全局AJAX函数是：

• .ajaxSend()
• .ajaxStart()
• .ajaxStop()
• .ajaxSuccess()
• .ajaxError()
• .ajaxComplete()

在发送每个AJAX请求之前，将调用在ajaxSend()函数中注册的回调函数。这是一个例子：

$(document).ajaxSend(function() {
    console.log("called before each send");
});

注意，在jQuery选择对象上调用了ajaxSend()。

如果当前没有正在执行的AJAX请求，则在发送AJAX请求之前，调用在ajaxStart()函数中注册的回调函数。这是一个例子：

$(document).ajaxStart(function() {
    console.log("called before each AJAX request if no other request are executing");
});

如果没有其他正在执行的AJAX请求，则在AJAX请求完成后调用在`ajaxStop()函数中注册的回调函数。这是一个例子：

$(document).ajaxStop(function() {
    console.log("called after an AJAX request finishes, if no other request are executing");
});

每当AJAX请求成功时，都会调用在ajaxSuccess()函数中注册的回调函数。这是一个例子：

$(document).ajaxSuccess(function(event, jqxhr, ajaxOptions, data) {
    console.log("called if an AJAX request succeeds");
});

每当AJAX请求失败时，都会调用在ajaxError()函数中注册的回调函数。这是一个例子：

$(document).ajaxError(function(event, jqxhr, ajaxOptions, errorThrown) {
    console.log("called if an AJAX request fails");
});

每当AJAX请求完成时，无论AJAX请求成功还是失败，都将调用在ajaxComplete()函数中注册的回调函数。这是一个例子：

$(document).ajaxComplete(function(event, jqxhr, ajaxOptions) {
    console.log("called after an AJAX request completes");
});

jqXHR对象

jQuery的许多AJAX函数返回的jqXHR对象包含一些有用的信息。注意，在Web服务器发送回响应之前，某些信息不可用，这意味着可以从done()，fail()或者always()回调函数内部使用。

jqXHR对象包含以下属性和函数：

• status
• statusText
• responseText
• responseXML
• getAllResponseHeaders()
• getResponseHeader()
• abort()

状态属性包含网络服务器发送回的HTTP状态代码(例如200或者404等)。

状态文本属性包含文本成功或者错误，具体取决于AJAX请求是成功还是失败。

如果响应以文本形式发送(例如，内容类型为文本/ html，文本/纯文本或者应用程序/ json)，则responseText包含服务器发送回的HTTP响应的正文。

如果响应是以XML格式发送回去的，则responseXML属性包含服务器发送回的HTTP响应的正文(例如，内容类型为text / xml或者application / xml)。

getAllResponseHeaders()以字符串形式返回HTTP响应标头。每个标头在其自己的行中列出，并包含标头名称，冒号和标头值。例如：

Content-Encoding: gzip
Server: Jetty(9.2.1.v20140609)
Content-Length: 54
Content-Type: application/json

getResponseHeader()函数可用于访问各个HTTP响应标头。我们可以这样传递HTTP标头的名称：

var contentType = jqXHR.getResponseHeader("Content-Type");

jqXHR对象上的abort()函数可在完成之前中止AJAX(HTTP)请求。我们应该在调用任何done()，fail()或者always()回调函数之前调用此函数。当服务器已发送回响应时，将调用这些回调函数，而此时中止AJAX调用为时已晚。

处理错误

如果AJAX请求失败，我们可以对通过$ .ajax()函数返回的对象的fail()函数添加的回调函数内部的故障做出反应。这是一个jQuery AJAX错误处理示例：

var jqxhr =
    $.ajax({
        url: "/this-page-does-not-exist.jsp",
    })
    .done (function(data) { /* will never happen - page not found*/)
    .fail (function(jqxhr, textStatus, errorThrown)  {
        alert("Error: " + textStatus + " : " + errorThrown) ;
    })
    ;

如果上述AJAX请求中发生错误，传递给done()函数的回调函数将被执行。在此回调函数中，我们可以处理错误。处理错误通常包括通知用户请求失败。本示例显示警报，但是我们也可以将错误消息插入页面中某个位置的HTML元素中。

记住，我们可以访问服务器响应返回的HTTP状态代码。在某些情况下，我们可能需要根据此代码的值做出不同的反应。这是一个简单的示例：

var jqxhr =
    $.ajax({
        url: "/this-page-does-not-exist.jsp",
    })
    .done (function(data) { /* will never happen - page not found*/)
    .fail (function(jqxhr, textStatus, errorThrown)  {
        if(jqxhr.status == 404) {
            alert("page not found!");
        }
    })
    ;

我们还可以查看响应标头或者响应正文。这是一个例子：

var jqxhr =
    $.ajax({
        url: "/this-page-does-not-exist.jsp",
    })
    .done (function(data) { /* will never happen - page not found*/)
    .fail (function(jqxhr, textStatus, errorThrown)  {
        var contentType   = jqxhr.getResponseHeader("Content-Type");
        var responseBody  = jqxhr.responseText;

        //do something depending on response headers and response body.
    })
    ;

ajaxError()

通常，我们将以相同的方式处理所有AJAX错误。不必在每个AJAX调用上都设置fail()处理函数，我们可以使用全局函数ajaxError()来处理单个AJAX错误回调函数。这是一个jQueryajaxError()示例：

$(document).ajaxError(function(event, jqxhr, ajaxOptions, errorThrown) {
        var contentType   = jqxhr.getResponseHeader("Content-Type");
        var responseBody  = jqxhr.responseText;

        //do something depending on response headers and response body.
});

var jqxhr =
    $.ajax({
        url: "/this-page-does-not-exist.jsp",
    })
    .done (function(data) { /* will never happen - page not found*/)
    ;

请注意，没有fail()处理函数添加到AJAX请求中。现在，所有AJAX请求的AJAX错误处理都由传递给$(document).ajaxError()的回调函数来处理。我们也可以在此回调中访问jqXHR对象，以及产生失败请求的AJAX选项对象，等等。

$ .ajaxSetup()

$ .ajaxSetup()函数可用于设置所有AJAX调用使用的选项，包括通过$ .ajax()，load()，$。get()等执行的选项。我们可以设置的选项与传递给$ .ajax()调用的选项相同。例如，下面的示例将所有AJAX调用的type属性设置为POST：

$.ajaxSetup({
    type : "POST"
});

现在，所有AJAX调用都将是HTTP POST请求，除非请求明确覆盖了该属性。 AJAX请求可以像这样覆盖它：

$.ajax({
    url  : "the-service.json",
    type : "GET"
});

通过在AJAX选项对象中显式设置type属性，$。ajax()调用将通过$ .ajaxSetup()覆盖全局设置。

jQuery文档建议我们谨慎使用$ .ajaxSetup()。设置全局选项可能导致无法预料的副作用(使用错误的选项触发AJAX请求)。

$ .ajaxPrefilter()

jQuery中的$ .ajaxPrefilter()函数用于设置预过滤函数，该函数可以在所有AJAX调用发送之前对其进行过滤。过滤是指传递给$ .ajax()函数的AJAX选项对象可以在发送请求之前进行更改("过滤")。

这是一个jQuery AJAX $ .ajaxPrefilter()示例：

$.ajaxPrefilter(function(options, originalOptions, jqXHR){
    
    if(options.url.indexOf("/app") != -1) {
        options.type = "POST";
    }
});

这个示例设置了一个预过滤器函数，该函数检查options对象的url属性是否包含子字符串" / app"。如果是这样，则将options.type设置为POST。

传递给filter函数的options参数是options对象，该对象将由$ .ajax()函数处理。该对象包含通过$ .ajaxSetup()设置的设置和调用时传递给$ .ajax()函数的options对象的合并。

originalOptions对象包含传递给$ .ajax()函数的options对象，而从$ .ajaxSetup()设置的选项中未合并任何选项。

" jqXHR"对象是普通的" jqXHR"对象，将用于执行此AJAX请求。

$ .ajaxSetup()函数和$ .ajaxPrefilter()函数之间的主要区别在于，$ .ajaxSetup()函数采用静态选项对象作为参数。这些选项将应用于所有AJAX请求。 $ .ajaxPrefilter()将函数作为参数。与默认选项与请求选项的简单合并相比，函数可以对选项执行更智能的筛选。