核心要點

• jQuery 簡寫 Ajax 方法提供了一種簡化 Ajax 調(diào)用的方法，它使用預設(shè)配置為特定目的包裝了 $.ajax() 方法。本文討論的方法包括 load()、$.post() 和 $.get()。
• load() 方法允許從服務(wù)器加載數(shù)據(jù)並將其放入選定的元素中。它使用 URL、可選數(shù)據(jù)和可選回調(diào)函數(shù)。此方法可用於異步加載網(wǎng)頁的主要內(nèi)容。
• $.post() 方法用於向服務(wù)器發(fā)送 POST 請求，並將數(shù)據(jù)作為請求正文的一部分發(fā)送。此方法非常適合可能導致服務(wù)器端狀態(tài)發(fā)生變化的請求。
• $.get() 方法啟動對服務(wù)器的 GET 請求，非常適合服務(wù)器始終針對給定參數(shù)集返回相同結(jié)果的情況，或者用戶需要共享資源的情況。

你是否從未聽說過 Ajax 這個術(shù)語？我敢打賭，幾乎所有人的手都放下，貼近身體。 Ajax（最初代表異步 JavaScript 和 XML）是最常用的客戶端方法之一，有助於創(chuàng)建異步網(wǎng)站和 Web 應(yīng)用程序。

當然可以使用原始 JavaScript 執(zhí)行 Ajax 調(diào)用，但是處理代碼的所有不同部分可能會很麻煩。如果你必須支持像 Internet Explorer 6 這樣的古老瀏覽器，情況更是如此。

幸運的是，jQuery 為我們提供了一套處理這些問題的方法，使我們能夠?qū)Ｗ㈧段覀兿Ｍㄟ^代碼完成的任務(wù)。 jQuery 提供了一個主要方法 $.ajax()，它可以高度配置以適應(yīng)你的任何需求。它還提供了一套簡寫方法，稱為簡寫方法，因為它們只是具有預設(shè)配置的 $.ajax() 方法的包裝器，每個方法都服務(wù)於單一目的。

除 $.ajax() 方法外，所有方法都有一個共同點：它們不操作一組 DOM 元素，而是直接從 jQuery 對象調(diào)用。因此，我們不會像這樣編寫語句：

$('p').ajax(...);

這將選擇頁面中的所有段落，然後調(diào)用 ajax() 方法，而是編寫：

$.ajax(...);

在本文中，我們將討論三個最常用的 jQuery 簡寫方法：load()、$.post() 和 $.get()。

load()

我們將討論的第一個方法是 load()。它使我們能夠從服務(wù)器加載數(shù)據(jù)並將返回的數(shù)據(jù)（通常是 HTML 代碼）放入選擇匹配的元素中。在實際使用之前，讓我們看看它的簽名：

load(url[, data][, callback])

每個參數(shù)的含義如下：

• url：指定要向其發(fā)送請求的資源的 URL 的字符串；
• data：一個可選字符串，應(yīng)該是格式良好的查詢字符串，或者必須作為請求參數(shù)傳遞的對象。如果傳遞字符串，則請求方法將為 GET，如果傳遞對象，則請求方法將為 POST。如果省略此參數(shù)，則使用 GET 方法；
• callback：Ajax 請求完成後調(diào)用的可選回調(diào)函數(shù)。此函數(shù)最多接受三個參數(shù)：響應(yīng)文本、請求的狀態(tài)字符串和 jqXHR 實例。在回調(diào)函數(shù)內(nèi)部，上下文 (this) 會逐個設(shè)置到集合的每個元素。

這看起來很難用嗎？讓我們看一個具體的例子。

假設(shè)你的網(wǎng)站中有一個 ID 為 main 的元素，它代表主要內(nèi)容。我們要做的是異步加載主菜單中鏈接引用的頁面的主要內(nèi)容，理想情況下，其 ID 為 main-menu。我們只想檢索此元素內(nèi)部的內(nèi)容，因為佈局的其他部分不會更改，因此不需要加載它們。

這種方法旨在作為一種增強，因為如果訪問網(wǎng)站的用戶禁用了 JavaScript，他們?nèi)匀豢梢允褂猛ǔ５耐綑C制瀏覽網(wǎng)站。我們希望實現(xiàn)此功能，因為它可以提高網(wǎng)站的性能。在此示例中，我們假設(shè)菜單中的所有鏈接都是內(nèi)部鏈接。

使用 jQuery 和 load() 方法，我們可以使用以下代碼完成此任務(wù)：

$('p').ajax(...);

等等！你能看出這段代碼有什麼問題嗎？你們中的一些人可能會注意到，這段代碼檢索了引用的頁面的所有 HTML 代碼，而不僅僅是主要內(nèi)容。執(zhí)行此代碼會導致類似於有兩個鏡子，一個在另一個前面：你看到一個鏡子在一個鏡子裡面，在一個鏡子裡面，依此類推。我們真正想要的是只加載目標頁面的主要內(nèi)容。

為了解決這個問題，jQuery 允許我們在指定的 URL 後立即添加一個選擇器。使用 load() 方法的此功能，我們可以將之前的代碼改寫為：

$.ajax(...);

這次我們檢索頁面，然後過濾 HTML 代碼，只注入 ID 為 main 的元素的後代。我們包含了通用選擇器（*），因為我們希望避免在 #main 元素內(nèi)有 #main 元素；我們只想要 #main 內(nèi)的內(nèi)容，而不是 #main 本身。

這個例子很好，但它只顯示了可用參數(shù)之一的使用。讓我們看看更多代碼！

使用回調(diào)函數(shù)與 load()

回調(diào)參數(shù)可用於通知用戶操作的完成情況。讓我們最後一次更新之前的示例，以使用它。

這次我們假設(shè)我們有一個 ID 為 notification-bar 的元素，它將用作……好吧，通知欄。

load(url[, data][, callback])

掌握了 load() 後，讓我們將注意力轉(zhuǎn)移到下一個方法。

$.post()

有時我們不僅想將服務(wù)器返回的內(nèi)容注入到一個或多個元素中。我們可能想要檢索數(shù)據(jù)，然後在檢索數(shù)據(jù)後決定如何處理它。為此，我們可以使用 $.post() 或 $.get() 方法。

它們在功能上相似（向服務(wù)器發(fā)出請求），並且在簽名和接受的參數(shù)方面相同。唯一的區(qū)別是，一個發(fā)送 POST 請求，另一個發(fā)送 GET 請求。很明顯，不是嗎？

如果你不記得 POST 請求和 GET 請求之間的區(qū)別，如果我們的請求有可能導致服務(wù)器端狀態(tài)發(fā)生變化，從而導致不同的響應(yīng)，則應(yīng)使用 POST。否則，它應(yīng)該是一個 GET 請求。

$.post() 方法的簽名是：

$('p').ajax(...);

參數(shù)如下所述：

• url：指定要向其發(fā)送請求的資源的 URL 的字符串；
• data：jQuery 將作為 POST 請求的一部分發(fā)送的可選字符串或?qū)ο螅?/li>
• callback：請求成功後執(zhí)行的回調(diào)函數(shù)。在回調(diào)函數(shù)內(nèi)部，上下文 (this) 設(shè)置為表示在調(diào)用中使用的 Ajax 設(shè)置的對象。
• type：一個可選字符串，用於指定如何解釋響應(yīng)正文。接受的值為：html、text、xml、json、script 和 jsonp。這也可以是多個以空格分隔的值的字符串。在這種情況下，jQuery 將一種類型轉(zhuǎn)換為另一種類型。例如，如果響應(yīng)是文本，而我們希望將其視為 XML，我們可以編寫“text xml”。如果省略此參數(shù)，則響應(yīng)文本將不進行任何處理或評估就傳遞給回調(diào)函數(shù)，並且 jQuery 會盡力猜測正確的格式。

現(xiàn)在你知道了 $.post() 可以做什麼以及它的參數(shù)是什麼，讓我們編寫一些代碼。

假設(shè)我們有一個要填寫的表單。每次字段失去焦點時，我們都希望將字段數(shù)據(jù)發(fā)送到服務(wù)器以驗證其有效性。我們將假設(shè)服務(wù)器以 JSON 格式返回信息。一個典型的用例是驗證用戶選擇的用戶名是否尚未被佔用。

為了實現(xiàn)此功能，我們可以使用 jQuery 的 $.post() 方法，如下所示：

$.ajax(...);

在此代碼中，我們向由相對 URL“/user”標識的頁面發(fā)送 POST 請求。我們還使用第二個參數(shù) data 向服務(wù)器發(fā)送失去焦點的字段的名稱和值。最後，我們使用回調(diào)函數(shù)來驗證返回的 JSON 對象的 status 屬性的值是否為 error，在這種情況下，我們將錯誤消息（存儲在 message 屬性中）顯示給用戶。

為了讓你更好地了解這種類型的 JSON 對象可能是什麼樣子，這裡有一個示例：

load(url[, data][, callback])

正如我所說，除了能夠發(fā)出 GET 請求外，$.get() 與 $.post() 相同。因此，下一節(jié)將非常簡短，我將關(guān)註一些用例，而不是重複相同的信息。

$.get()

$.get() 是 jQuery 提供的發(fā)出 GET 請求的方法之一。此方法使用指定的 URL 和提供的可選數(shù)據(jù)向服務(wù)器啟動 GET 請求。請求完成後，它還可以執(zhí)行回調(diào)函數(shù)。其簽名如下：

$('p').ajax(...);

參數(shù)與 $.post() 方法的參數(shù)相同，因此我不會在這裡重複它們。

$.get() 函數(shù)非常適合服務(wù)器始終針對給定參數(shù)集返回相同結(jié)果的情況。對於你希望用戶能夠共享的資源，它也是一個不錯的選擇。例如，對於交通服務(wù)（如火車時刻表信息），人們搜索相同的日期和時間必須獲得相同的結(jié)果，GET 請求是理想的選擇。此外，如果頁面能夠響應(yīng) GET 請求，用戶就可以與朋友共享獲得的結(jié)果——URL 的魔力。

結(jié)論

在本文中，我們討論了一些 jQuery 最常用的 Ajax 簡寫方法。它們是執(zhí)行 Ajax 請求的非常方便的方法，正如我們所看到的，在其基本版本中，只需一行代碼就可以實現(xiàn)我們想要的功能。

請查看 jQuery 的 Ajax 簡寫文檔，以了解有關(guān)這些方法和其他方法的更多信息。儘管我們在這裡沒有討論其他內(nèi)容，但你應(yīng)該能夠利用你在本文中獲得的知識來開始使用其他方法。

(此處應(yīng)添加常見問題解答部分，內(nèi)容與輸入文本中的常見問題解答部分相同)

以上是JQuery的簡介速記Ajax方法的詳細內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！