完整的 jQuery Ajax（`$.ajax`）教程

原文： https://howtodoinjava.com/jquery/jquery-ajax-tutorial/

在本 Ajax 教程中，我们已经学习了 Ajax（异步 JavaScript 和 XML）。 我们了解了有关 ajax 的工作原理和基本组成部分的基本但重要的概念。 让我们继续进行讨论，看看如何利用 jQuery 充分利用 ajax 的功能来使应用开发变得简单，快速和有效。

Table of Contents
$.ajax() Method
jqXHR (jQuery XMLHttpRequest) vs. XHR (XMLHttpRequest)
Invoking jQuery Ajax HTTP Methods
Synchronous vs. Asynchronous Communication
jQuery Ajax Global Event Handlers
    $.ajaxSend()
    $.ajaxStart()
    $.ajaxStop()
    $.ajaxSuccess()
    $.ajaxError()
    $.ajaxComplete()
Using $.ajaxSetup() to Globalize Parameters
Using $.ajaxPrefilter() to filter Ajax Requests
Other Ajax Powered Functions in jQuery
    $.get() and $.post() Functions
    $.load() Function
    $.getScript()

$.ajax()方法

jQuery Ajax 的根是ajax()函数。 此函数用于执行默认情况下异步的 HTTP 请求。 使用此函数的语法是：

$.ajax({name:value, name:value, ... })

参数为 AJAX 请求指定一个或多个名称/值对。 下表中可能的名称/值：

例如，示例 ajax 请求可以像这样（直到 jQuery 1.7 版本）：

$.ajax({
    url: "/app-url/relative-url", 
    data: {
        name : "The name",
        desc : "The description"
    },
    success: function(data, textStatus, jqXHR)
    {
        alert("Success: " + response); 
    },
    error: function(jqXHR, textStatus, errorThrown)
    {
        alert("Error"); 
    }
});

在 jQuery 1.8 之后，您可以编写如下的 ajax 调用：

$.ajax({
    url: "/app-url/relative-url",
    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"); 
});

jqXHR（jQuery XMLHttpRequest）与 XHR（XMLHttpRequest）

jQuery 1.8 在 jQuery 模式方面带来了重大变化。 此更改是$.ajax()方法的返回类型。 在 1.7 版之前，返回类型为XHR，即XMLHttpRequest，但从 1.8 版开始，其返回类型为jqXHR，即 jQuery XMLHttpRequest。

在 jQuery 1.8 中，库使用超集 API 包浏览器本机XMLHttpRequest对象，并返回jqXHR对象。 jqXHR对象可模拟本地XHR功能，并提供更多功能，例如：

• 它处理 HTTP 请求标头（Last-Modified，etag，Content-Type，MIME 类型等）
• 它处理请求的回调（包括Promise回调.done()、.fail()等）
• 它处理为请求设置的所有预过滤器
• 它处理为请求设置的任何超时
• 它处理任何跨域调用（包括 jsonp）

$.ajax()返回的 jqXHR 对象实现Promise接口。 该对象具有一个Promise对象的所有属性，方法和行为。

jQuery 库作者已努力使其向后兼容，但不支持onreadystatechange()方法。

调用 jQuery Ajax HTTP 方法

让我们看看 jQuery ajax 如何调用不同的 HTTP 方法。 我只是在编写代码框架，希望您根据需要更改代码。

jQuery Ajax HTTP GET 或 DELETE 方法

$.ajax({
    url: "/app-url/relative-url",
    type: "GET", //Or "DELETE" for http delete calls
    dataType: 'json',    
})
.done (function(data, textStatus, jqXHR) { 
    alert("Success: " + response); 
})
.fail (function(jqXHR, textStatus, errorThrown) { 
    alert("Error"); 
})
.always (function(jqXHROrData, textStatus, jqXHROrErrorThrown) { 
    alert("complete"); 
});

jQuery Ajax HTTP POST 或 PUT 方法

$.ajax({
    url: "/app-url/relative-url",
    type: "POST", //Use "PUT" for HTTP PUT methods
    dataType: 'json',   
    data: {
        key : "value",
    }
})
.done (function(data, textStatus, jqXHR) { 
    alert("Success: " + response); 
})
.fail (function(jqXHR, textStatus, errorThrown) { 
    alert("Error"); 
})
.always (function(jqXHROrData, textStatus, jqXHROrErrorThrown) { 
    alert("complete"); 
});

同步与异步通信

默认情况下，所有通过 jQuery 发送的 ajax 请求都是异步的。 如果要进行同步调用（完全不建议这样做，因为它可能导致浏览器冻结，这会导致一些非常不满意的用户），请在函数调用中使用“async : false”参数，如下所示：

$.ajax({
    url: "/app-url/relative-url",
    type: "POST", 
    async: false,
    dataType: 'json',    
    data: {
        key : "value",
    }
})
.done (function(data, textStatus, jqXHR) { 
    alert("Success: " + response); 
})
.fail (function(jqXHR, textStatus, errorThrown) { 
    alert("Error"); 
})
.always (function(jqXHROrData, textStatus, jqXHROrErrorThrown) { 
    alert("complete"); 
});

在 jQuery 1.8 及更高版本中，不赞成使用“async:false”选项。

jQuery Ajax 全局事件处理器

除了上述三种方法（即done()，fail()或always()）之外，jQuery 还具有一组全局 AJAX 函数，您可以使用这些函数来监听通过 jQuery 发送的所有 AJAX 请求中的 AJAX 事件。 让我们来看看它们：

$.ajaxSend()

在通过 jQuery 发送 AJAX 请求之前，总是会调用在ajaxSend()函数中注册的回调函数。

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

$.ajaxStart()

每当即将发送 Ajax 请求时，jQuery 都会检查是否还有其他未完成的 Ajax 请求。 如果没有正在进行中，则 jQuery 触发ajaxStart事件。

如果在全局选项设置为false的情况下调用$.ajax()或$.ajaxSetup()，则将不会触发ajaxStart()方法。

$( document ).ajaxStart(function() {
      $( "#loading" ).show();
});

$.ajaxStop()

每当 Ajax 请求完成时，jQuery 都会检查是否还有其他未完成的 Ajax 请求。 如果没有剩余的内容，jQuery 将触发ajaxStop事件。

如果在全局选项设置为false的情况下调用$.ajax()或$.ajaxSetup()，则不会触发.ajaxStop()方法。

$( document ).ajaxStop(function() {
      $( "#loading" ).hide();
});

$.ajaxSuccess()

每当 Ajax 请求成功完成时，jQuery 就会触发ajaxSuccess事件。

$( document ).ajaxSuccess(function( event, xhr, settings ) {
      $( "#msg" ).append( "<li>Successful Request!</li>" );
});

$.AjaxError()

只要 Ajax 请求完成并出现错误，jQuery 就会触发ajaxError事件。

$( document ).ajaxError(function( event, xhr, settings ) {
      $( "#msg" ).append( "<li>Failed Request!</li>" );
});

$.ajaxComplete()

每当 Ajax 请求完成时，jQuery 都会触发ajaxComplete事件。

$( document ).ajaxComplete(function( event, xhr, settings ) {
      $( "#msg" ).append( "<li>Request Completed !!</li>" );
});

使用$.ajaxSetup()全局化参数

您是否认为将一组通用参数传递给所有 ajax 请求很无聊，您可以使用$.ajaxSetup()函数对其进行一次注册，然后在所有 ajax 调用中重复使用它们。 $.ajaxSetup()函数可用于设置所有 AJAX 调用使用的选项，包括通过$.ajax()，$.load()，$.get()等执行的选项。

您可以在$.ajaxSetup()中设置所有选项，这些选项可以设置为$.ajax()调用。 例如：

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

上面的函数默认会将来自应用的所有 jQuery ajax 请求设为 HTTP POST 方法。 因此，无论何时，您想发送 HTTP GET 方法，都必须在特定的$.ajax()调用中对其进行显式设置，如下所示：

$.ajax({
    url  : "/app-url/relative-url",
    type : "GET"
});

使用$.ajaxPrefilter()过滤 Ajax 请求

如果您曾经在服务器端进行 Web 开发，那么您会认识到过滤器是实现某些目标（如输入值清洁等）的好方法。现在 jQuery 也使用ajaxPrefilter事件在客户端提供了此功能。 使用此功能，您可以在所有 AJAX 调用发送到服务器之前对其进行过滤。

发送请求之前，可以在$.ajaxPrefilter()中更改传递给$.ajax()函数的所有 Ajax 选项/参数（“过滤”）。 例如，如果您希望发送到以“/add”结尾的 URL 的所有 HTTP 请求都必须是 HTTP POST 调用，则可以在此处应用逻辑。

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

这里的参数是：

• options – 是请求选项
• originalOptions – 是$.ajax()方法提供的选项，未经修改，因此没有ajaxSettings的默认值
• jqXHR – 是请求的 jqXHR 对象

jQuery 中其他由 Ajax 支持的函数

让我们在内部使用 ajax 浏览 jQuery 库提供的其他实用函数，这些函数可以直接使用。

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

jQuery 具有这些函数，可用于发送简化的 HTTP GET 和 HTTP POST 请求。 这是显示如何使用 jQuery 的$.get()函数的示例：

var parameters = { p1 : "val1", p2 : "val2"};
$.get( "/app/url", parameters )
.done(function(data) {
    $("#label").html(data);
})
.fail(function() {
    alert( "error" );
})
.always(function() {
    alert( "finished" );
});

同样，您可以使用$.post()函数发出 HTTP POST 请求。

var parameters = { p1 : "val1", p2 : "val2"};
$.post( "/app/url", parameters )
.done(function(data) {
    $("#label").html(data);
})
.fail(function() {
    alert( "error" );
})
.always(function() {
    alert( "finished" );
});

$.load()函数

jQuery load()函数通过 AJAX 加载一些 HTML，并将其插入到选定的元素中。 它是后台的简单 HTTP GET 方法，可从服务器获取一些 HTML 并插入元素的 DOM 中。

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

您也可以只插入一部分已加载的 HTML。 如果在url后面附加space + jQuery selector字符串，则load()将仅插入与选择器匹配的部分已加载 HTML。

$("#loadTarget").load("html-response.html #someDiv");

在上面的示例中，ajax 调用将从 URL html-response.html加载 HTML 响应，然后对id=someDiv执行响应的 jQuery ID 选择器，然后将结果 HTML 插入loadTarget的innerHTML中。

如果加载的 HTML 包含任何 JavaScript，则将 HTML 插入目标 HTML 元素时将执行该 JavaScript。 但是，如果加载片段（URL + jQuery 选择器），则在插入 HTML 之前，将删除在加载的文件中找到的所有 JavaScript。

$.getScript()函数

jQuery 中的$.getScript()函数加载一个 JavaScript 文件并执行它。 此函数使用 jQuery 的基础 AJAX 函数，因此由于跨域限制，$.getScript()函数无法从其他域加载脚本。 例如：

$.getScript("js/myscript.js");

这就是使用 jQuery 处理 ajax 调用的全部内容。 随时在下面的评论部分中发表您的评论和建议。

学习愉快！