AJAX（Asynchronous JavaScript and XML）是一種用于創建交互式網頁應用程序的技術。它可以在不重新加載整個頁面的情況下，通過與服務器進行異步通信，更新部分頁面內容。這種實時更新的功能使得網頁更加動態、快速和用戶友好。下面將通過舉例，介紹如何使用AJAX實現右側頁面更換。

假設我們有一個網站的主頁，其中包含一個導航欄和一個右側的內容區域。每個導航按鈕對應著不同的頁面內容，點擊某個按鈕應該能夠實現右側內容的更換，而不需要重載整個頁面。這種情況下，我們可以利用AJAX來實現。

首先，我們需要在HTML中添加一個用于顯示內容的容器，比如一個div元素。

<div id="content"></div>

接下來，我們可以使用jQuery的AJAX方法來進行異步請求，并將返回的內容填充到我們之前創建的容器中。

$.ajax({
url: "content.php", // 請求的URL
method: "GET", // 請求方法
dataType: "html", // 返回的數據類型
success: function(response) {
$("#content").html(response); // 將返回的內容填充到容器中
}
});

在上述代碼中，我們通過AJAX向服務器發送了一個GET請求，URL為content.php。服務器返回一個HTML代碼片段作為響應。在success回調函數中，我們將返回的內容填充到id為content的div中。這樣，右側的頁面內容就會被實時更新。

舉例來說，假設我們網站的導航欄有三個按鈕：首頁、產品和聯系我們。點擊不同的按鈕會對應顯示不同的頁面內容。

<button id="homeButton">首頁</button>
<button id="productsButton">產品</button>
<button id="contactButton">聯系我們</button>

然后，我們可以為每個按鈕添加一個點擊事件的監聽器，當點擊按鈕時進行AJAX請求，并將返回的內容填充到容器中。

$("#homeButton").on("click", function() {
$.ajax({
url: "home.php",
method: "GET",
dataType: "html",
success: function(response) {
$("#content").html(response);
}
});
});
$("#productsButton").on("click", function() {
$.ajax({
url: "products.php",
method: "GET",
dataType: "html",
success: function(response) {
$("#content").html(response);
}
});
});
$("#contactButton").on("click", function() {
$.ajax({
url: "contact.php",
method: "GET",
dataType: "html",
success: function(response) {
$("#content").html(response);
}
});
});

通過上述代碼，當用戶點擊不同的按鈕時，會發送不同的AJAX請求，服務器會返回對應的頁面內容，并將其填充到右側的內容區域中。

總之，使用AJAX可以實現網頁右側內容的實時更新，提高用戶體驗。通過異步請求和動態填充頁面內容，用戶可以快速地切換不同的頁面，而不需要重新加載整個網頁。這種功能在購物網站中常見，用戶可以在不離開當前頁面的情況下，瀏覽不同的商品信息。使用AJAX可以有效地提高網頁的性能和可用性。