完整的 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 調用的全部內容。隨時在下面的評論部分中發表您的評論和建議。學習愉快！