Ajax（Asynchronous JavaScript and XML）是一種用于創(chuàng)建動(dòng)態(tài)網(wǎng)頁的技術(shù)，可以在不重新加載整個(gè)頁面的情況下更新網(wǎng)頁的一部分。局部切換是Ajax的核心功能之一，通過局部切換，我們可以在不影響整個(gè)頁面的情況下更新特定區(qū)域的內(nèi)容。下面將通過一些具體的例子來說明如何使用Ajax實(shí)現(xiàn)局部切換。

假設(shè)我們有一個(gè)電子商務(wù)網(wǎng)站，其中有一個(gè)商品列表頁面，每個(gè)商品都有一個(gè)“加入購物車”按鈕。當(dāng)我們點(diǎn)擊“加入購物車”按鈕時(shí)，我們希望更新購物車圖標(biāo)上顯示的商品數(shù)量，而無需刷新整個(gè)頁面。

首先，我們需要在頁面上用Ajax監(jiān)聽“加入購物車”按鈕的點(diǎn)擊事件，并發(fā)送一個(gè)POST請(qǐng)求到服務(wù)器，將選中的商品加入購物車。代碼如下：

$("#add-to-cart-btn").on("click", function() {
$.ajax({
url: "/add-to-cart",
method: "POST",
data: { productId: "123" },
success: function(response) {
// 更新購物車圖標(biāo)上的商品數(shù)量
$("#cart-icon .quantity").text(response.quantity);
}
});
});

上面的代碼使用了jQuery來簡(jiǎn)化Ajax請(qǐng)求的過程。當(dāng)點(diǎn)擊“加入購物車”按鈕時(shí)，它發(fā)送了一個(gè)POST請(qǐng)求到服務(wù)器的“/add-to-cart”端點(diǎn)，并傳遞了一個(gè)包含商品ID的數(shù)據(jù)對(duì)象。服務(wù)器端負(fù)責(zé)將該商品加入購物車，并返回一個(gè)包含購物車中商品數(shù)量的響應(yīng)。

在接收到服務(wù)器響應(yīng)后，我們可以使用響應(yīng)的數(shù)量更新購物車圖標(biāo)上的商品數(shù)量。通過將響應(yīng)中的數(shù)量填充到購物車圖標(biāo)的一個(gè)特定元素中，我們實(shí)現(xiàn)了局部切換，只更新了購物車圖標(biāo)的一部分內(nèi)容。

除了購物車數(shù)量的更新，Ajax還可以用于動(dòng)態(tài)加載其他頁面的內(nèi)容。比如，我們有一個(gè)新聞網(wǎng)站，當(dāng)用戶點(diǎn)擊導(dǎo)航菜單中的不同鏈接時(shí)，我們希望只更新頁面主體中的內(nèi)容，而不是整個(gè)頁面的重載。

為了實(shí)現(xiàn)這個(gè)功能，我們可以使用Ajax來監(jiān)聽導(dǎo)航菜單鏈接的點(diǎn)擊事件，并根據(jù)點(diǎn)擊的鏈接發(fā)送相應(yīng)的GET請(qǐng)求獲取對(duì)應(yīng)頁面的內(nèi)容。代碼如下：

$(".nav-link").on("click", function(event) {
event.preventDefault(); // 阻止默認(rèn)的鏈接跳轉(zhuǎn)行為
var pageUrl = $(this).attr("href");
$.ajax({
url: pageUrl,
method: "GET",
success: function(response) {
// 更新頁面主體的內(nèi)容
$("#main-content").html(response);
}
});
});

上面的代碼使用了preventDefault()方法來阻止鏈接的默認(rèn)跳轉(zhuǎn)行為，這樣點(diǎn)擊鏈接時(shí)頁面不會(huì)刷新。然后，它獲取到鏈接的href屬性值，即對(duì)應(yīng)頁面的URL，并使用Ajax發(fā)送一個(gè)GET請(qǐng)求獲取頁面的HTML內(nèi)容。

當(dāng)服務(wù)器返回響應(yīng)后，我們可以使用響應(yīng)中的HTML內(nèi)容更新頁面主體的內(nèi)容。通過將響應(yīng)的HTML內(nèi)容填充到頁面主體的一個(gè)特定元素中，我們實(shí)現(xiàn)了局部切換，只更新了頁面主體的一部分內(nèi)容。

總之，Ajax提供了一種簡(jiǎn)便的方式來實(shí)現(xiàn)局部切換，使我們能夠在不刷新整個(gè)頁面的情況下更新特定區(qū)域的內(nèi)容。無論是更新購物車數(shù)量還是動(dòng)態(tài)加載頁面主體內(nèi)容，Ajax都提供了強(qiáng)大的功能來實(shí)現(xiàn)我們的需求。