完整的 jQuery Ajax（$.ajax）教程 · HowToDoInJava 中文系列教程

# 完整的 jQuery Ajax（`$.ajax`）教程 > 原文： [https://howtodoinjava.com/jquery/jquery-ajax-tutorial/](https://howtodoinjava.com/jquery/jquery-ajax-tutorial/) 在本 [Ajax 教程](//howtodoinjava.com/scripting/complete-ajax-tutorial/)中，我们已经学习了 [Ajax](https://en.wikipedia.org/wiki/Ajax_%28programming%29)（异步 JavaScript 和 XML）。我们了解了有关 ajax 的工作原理和基本组成部分的基本但重要的概念。让我们继续进行讨论，看看如何利用 jQuery 充分利用 ajax 的功能来使应用开发变得简单，快速和有效。 ```java 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 请求。使用此函数的语法是： ```java $.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 版本）： ```java $.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 调用： ```java $.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`**](https://api.jquery.com/deferred.promise/)对象的所有属性，方法和行为。 *jQuery 库作者已努力使其向后兼容，但不支持`onreadystatechange()`方法。* ## 调用 jQuery Ajax HTTP 方法让我们看看 jQuery ajax 如何调用不同的 HTTP 方法。我只是在编写代码框架，希望您根据需要更改代码。 #### jQuery Ajax HTTP GET 或 DELETE 方法 ```java $.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 方法 ```java $.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`”参数，如下所示： ```java $.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()`函数中注册的回调函数。 ```java $(document).ajaxSend(function() { console.log("called before each send"); }); ``` #### `$.ajaxStart()` 每当即将发送 Ajax 请求时，jQuery 都会检查是否还有其他未完成的 Ajax 请求。如果没有正在进行中，则 jQuery 触发`ajaxStart`事件。如果在全局选项设置为`false`的情况下调用`$.ajax()`或`$.ajaxSetup()`，则将不会触发`ajaxStart()`方法。 ```java $( document ).ajaxStart(function() { $( "#loading" ).show(); }); ``` #### `$.ajaxStop()` 每当 Ajax 请求完成时，jQuery 都会检查是否还有其他未完成的 Ajax 请求。如果没有剩余的内容，jQuery 将触发`ajaxStop`事件。如果在全局选项设置为`false`的情况下调用`$.ajax()`或`$.ajaxSetup()`，则不会触发`.ajaxStop()`方法。 ```java $( document ).ajaxStop(function() { $( "#loading" ).hide(); }); ``` #### `$.ajaxSuccess()` 每当 Ajax 请求成功完成时，jQuery 就会触发`ajaxSuccess`事件。 ```java $( document ).ajaxSuccess(function( event, xhr, settings ) { $( "#msg" ).append( "<li>Successful Request!</li>" ); }); ``` #### `$.AjaxError()` 只要 Ajax 请求完成并出现错误，jQuery 就会触发`ajaxError`事件。 ```java $( document ).ajaxError(function( event, xhr, settings ) { $( "#msg" ).append( "<li>Failed Request!</li>" ); }); ``` #### `$.ajaxComplete()` 每当 Ajax 请求完成时，jQuery 都会触发`ajaxComplete`事件。 ```java $( document ).ajaxComplete(function( event, xhr, settings ) { $( "#msg" ).append( "<li>Request Completed !!</li>" ); }); ``` ## 使用`$.ajaxSetup()`全局化参数您是否认为将一组通用参数传递给所有 ajax 请求很无聊，您可以使用`$.ajaxSetup()`函数对其进行一次注册，然后在所有 ajax 调用中重复使用它们。 `$.ajaxSetup()`函数可用于设置所有 AJAX 调用使用的选项，包括通过`$.ajax()`，`$.load()`，`$.get()`等执行的选项。您可以在`$.ajaxSetup()`中设置所有选项，这些选项可以设置为`$.ajax()`调用。例如： ```java $.ajaxSetup({ type : "POST" }); ``` 上面的函数默认会将来自应用的所有 jQuery ajax 请求设为 HTTP POST 方法。因此，无论何时，您想发送 HTTP GET 方法，都必须在特定的`$.ajax()`调用中对其进行显式设置，如下所示： ```java $.ajax({ url : "/app-url/relative-url", type : "GET" }); ``` ## 使用`$.ajaxPrefilter()`过滤 Ajax 请求如果您曾经在服务器端进行 Web 开发，那么您会认识到过滤器是实现某些目标（如输入值清洁等）的好方法。现在 jQuery 也使用`ajaxPrefilter`事件在客户端提供了此功能。使用此功能，您可以在所有 AJAX 调用发送到服务器之前对其进行过滤。发送请求之前，可以在`$.ajaxPrefilter()`中更改传递给`$.ajax()`函数的所有 Ajax 选项/参数（“过滤”）。例如，如果您希望发送到以“`/add`”结尾的 URL 的所有 HTTP 请求都必须是 HTTP POST 调用，则可以在此处应用逻辑。 ```java $.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()`函数的示例： ```java 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 请求。 ```java 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 中。 ```java $("#loadTarget").load("html-response.html"); ``` 您也可以只插入一部分已加载的 HTML。如果在`url`后面附加`space + jQuery selector`字符串，则`load()`将仅插入与选择器匹配的部分已加载 HTML。 ```java $("#loadTarget").load("html-response.html #someDiv"); ``` 在上面的示例中，ajax 调用将从 URL `html-response.html`加载 HTML 响应，然后对`id=someDiv`执行响应的 jQuery ID [选择器](//howtodoinjava.com/scripting/jquery/jquery-selectors/)，然后将结果 HTML 插入`loadTarget`的`innerHTML`中。如果加载的 HTML 包含任何 JavaScript，则将 HTML 插入目标 HTML 元素时将执行该 JavaScript。但是，如果加载片段（URL + jQuery 选择器），则在插入 HTML 之前，将删除在加载的文件中找到的所有 JavaScript。 #### `$.getScript()`函数 jQuery 中的`$.getScript()`函数加载一个 JavaScript 文件并执行它。此函数使用 jQuery 的基础 AJAX 函数，因此由于**跨域限制**，`$.getScript()`函数无法从其他域加载脚本。例如： ```java $.getScript("js/myscript.js"); ``` 这就是使用 jQuery 处理 ajax 调用的全部内容。随时在下面的评论部分中发表您的评论和建议。学习愉快！