核心要點(diǎn)

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

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

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

幸運(yùn)的是，jQuery 為我們提供了一套處理這些問(wèn)題的方法，使我們能夠?qū)Ｗ⒂谖覀兿Ｍㄟ^(guò)代碼完成的任務(wù)。jQuery 提供了一個(gè)主要方法 $.ajax()，它可以高度配置以適應(yīng)你的任何需求。它還提供了一套簡(jiǎn)寫(xiě)方法，稱為簡(jiǎn)寫(xiě)方法，因?yàn)樗鼈冎皇蔷哂蓄A(yù)設(shè)配置的 $.ajax() 方法的包裝器，每個(gè)方法都服務(wù)于單一目的。

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

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

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

$.ajax(...);

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

load()

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

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

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

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

這看起來(lái)很難用嗎？讓我們看一個(gè)具體的例子。

假設(shè)你的網(wǎng)站中有一個(gè) ID 為 main 的元素，它代表主要內(nèi)容。我們要做的是異步加載主菜單中鏈接引用的頁(yè)面的主要內(nèi)容，理想情況下，其 ID 為 main-menu。我們只想檢索此元素內(nèi)部的內(nèi)容，因?yàn)椴季值钠渌糠植粫?huì)更改，因此不需要加載它們。

這種方法旨在作為一種增強(qiáng)，因?yàn)槿绻L問(wèn)網(wǎng)站的用戶禁用了 JavaScript，他們?nèi)匀豢梢允褂猛ǔ５耐綑C(jī)制瀏覽網(wǎng)站。我們希望實(shí)現(xiàn)此功能，因?yàn)樗梢蕴岣呔W(wǎng)站的性能。在此示例中，我們假設(shè)菜單中的所有鏈接都是內(nèi)部鏈接。

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

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

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

為了解決這個(gè)問(wèn)題，jQuery 允許我們?cè)谥付ǖ?URL 后立即添加一個(gè)選擇器。使用 load() 方法的此功能，我們可以將之前的代碼改寫(xiě)為：

$.ajax(...);

這次我們檢索頁(yè)面，然后過(guò)濾 HTML 代碼，只注入 ID 為 main 的元素的后代。我們包含了通用選擇器（*），因?yàn)槲覀兿Ｍ苊庠?#main 元素內(nèi)有 #main 元素；我們只想要 #main 內(nèi)的內(nèi)容，而不是 #main 本身。

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

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

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

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

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

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

$.post()

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

它們?cè)诠δ苌舷嗨疲ㄏ蚍?wù)器發(fā)出請(qǐng)求），并且在簽名和接受的參數(shù)方面相同。唯一的區(qū)別是，一個(gè)發(fā)送 POST 請(qǐng)求，另一個(gè)發(fā)送 GET 請(qǐng)求。很明顯，不是嗎？

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

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

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

參數(shù)如下所述：

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

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

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

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

$.ajax(...);

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

為了讓你更好地了解這種類型的 JSON 對(duì)象可能是什么樣子，這里有一個(gè)示例：

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

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

$.get()

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

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

參數(shù)與 $.post() 方法的參數(shù)相同，因此我不會(huì)在這里重復(fù)它們。

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

結(jié)論

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

請(qǐng)查看 jQuery 的 Ajax 簡(jiǎn)寫(xiě)文檔，以了解有關(guān)這些方法和其他方法的更多信息。盡管我們?cè)谶@里沒(méi)有討論其他內(nèi)容，但你應(yīng)該能夠利用你在本文中獲得的知識(shí)來(lái)開(kāi)始使用其他方法。

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

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