本文主要討論的是如何使用 AJAX 技術實現頁面左邊內容不變，右邊跳轉頁面的效果。在許多網站中，我們經常看到這樣的設計，比如電影列表頁面，左邊是電影分類，右邊是電影列表。當我們點擊分類時，右邊的電影列表會實時刷新，但頁面左邊的分類欄不會改變，從而提高了用戶體驗。

要實現這個效果，我們需要使用 AJAX 技術對網頁進行局部更新。AJAX 是 Asynchronous JavaScript and XML 的縮寫，它可以在不刷新整個頁面的情況下與服務器進行數據交換，并更新部分頁面內容。

一般來說，要實現左邊內容不變，右邊跳轉頁面的效果，我們需要在頁面加載時使用 AJAX 加載右邊的初始內容，并給左邊的分類欄添加點擊事件。當用戶點擊分類時，通過 AJAX 請求獲取對應分類下的數據，并將數據渲染在右邊的頁面中。

// HTML 代碼示例
<div id="left" class="category">
<p class="category-item">分類 1</p>
<p class="category-item">分類 2</p>
<p class="category-item">分類 3</p>
</div>
<div id="right" class="content">
<h2>內容標題</h2>
<p>內容描述</p>
</div>
// JavaScript 代碼示例
var categoryItems = document.getElementsByClassName('category-item');
for (var i = 0; i < categoryItems.length; i++) {
categoryItems[i].addEventListener('click', function() {
// 當點擊分類時，發送 AJAX 請求獲取數據并更新右邊的內容
var category = this.innerText;
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var response = JSON.parse(xhr.responseText);
document.getElementById('right').innerHTML = '<h2>' + response.title + '</h2><p>' + response.description + '</p>';
}
};
xhr.open('GET', '/api/content?category=' + category, true);
xhr.send();
});
}

以上代碼示例中，我們通過為左邊的分類欄的每個分類項添加點擊事件，當用戶點擊某個分類時，發送 AJAX 請求到服務器，獲取該分類下的數據，并將數據渲染到右邊的內容區域。這樣，就實現了左邊內容不變，右邊跳轉頁面的效果。

舉個例子來說明，假設我們有一個電影列表頁面，左邊是電影分類，右邊是電影列表。當用戶點擊“動作片”這個分類時，右邊的電影列表會根據“動作片”這個分類重新加載電影數據。但頁面左邊的分類欄不會改變，用戶可以繼續瀏覽其他分類，無需等待整個頁面的刷新。

在實際開發中，我們還可以通過添加動畫效果，優化用戶體驗。比如，在發送 AJAX 請求后，可以顯示一個加載動畫，表示正在獲取數據；當數據返回后，再將加載動畫隱藏，并顯示新的內容。這樣可以提高用戶的等待體驗。

總結來說，通過使用 AJAX 技術，我們可以實現頁面左邊內容不變，右邊跳轉頁面的效果。這種設計提高了用戶體驗，使頁面加載更加快速和流暢。