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

完整的 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 请求指定一个或多个名称/值对。下表中可能的名称/值：

名称	值/说明
`async`	一个布尔值，指示是否应异步处理请求。默认为`true`。请注意，从 jQuery 1.8 开始，`async: false`的使用已被弃用。您必须使用`success` / `error` / `complete`回调选项，而不要使用`jqXHR`对象的相应方法，例如`jqXHR.done()`或已弃用的`jqXHR.success()`。
`beforeSend(xhr)`	发送请求之前运行的函数
`cache`	一个布尔值，指示浏览器是否应缓存请求的页面。默认为`true`
`complete(xhr,status)`	请求完成后要运行的函数（成功和错误函数之后）
`contentType`	将数据发送到服务器时使用的内容类型。默认值为：“`application/x-www-form-urlencoded`”
`context`	为所有与 AJAX 相关的回调函数指定“`this`”值
`data`	指定要发送到服务器的数据
`dataFilter(data,type)`	用于处理`XMLHttpRequest`的原始响应数据的函数
`dataType`	服务器响应期望的数据类型。
`error(xhr,status,error)`	如果请求失败，则运行的函数。
`global`	一个布尔值，指定是否触发请求的全局 AJAX 事件句柄。默认为`true`
`ifModified`	一个布尔值，指定是否仅在自上一个请求以来响应已更改的情况下，请求才成功。默认值为：`false`。
`jsonp`	覆盖 jsonp 请求中的回调函数的字符串
`jsonpCallback`	为 jsonp 请求中的回调函数指定名称
`password`	指定在 HTTP 访问认证请求中使用的密码。
`processData`	一个布尔值，指定是否应将与请求一起发送的数据转换为查询字符串。默认为`true`
`scriptCharset`	指定请求的字符集
`success(result,status,xhr)`	请求成功时要运行的函数
`timeout`	请求的本地超时（以毫秒为单位）
`traditional`	一个布尔值，指定是否使用传统的参数序列化样式
`type`	指定请求的类型。（获取或发布）
`url`	指定将请求发送到的 URL。默认为当前页面
`username`	指定在 HTTP 访问认证请求中使用的用户名
`xhr`	用于创建`XMLHttpRequest`对象的函数

例如，示例 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 调用的全部内容。随时在下面的评论部分中发表您的评论和建议。

学习愉快！

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

$.ajax()方法

jqXHR（jQuery XMLHttpRequest）与 XHR（XMLHttpRequest）

调用 jQuery Ajax HTTP 方法

jQuery Ajax HTTP GET 或 DELETE 方法

jQuery Ajax HTTP POST 或 PUT 方法

同步与异步通信

jQuery Ajax 全局事件处理器

$.ajaxSend()

$.ajaxStart()

$.ajaxStop()

$.ajaxSuccess()

$.AjaxError()

$.ajaxComplete()

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

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