AJAX（Asynchronous JavaScript and XML）是一種前端技術，可以實現在不刷新整個頁面的情況下，更新頁面的部分內容。通過使用AJAX，我們可以在用戶與網頁進行交互的同時，實現頁面跳轉而不丟失數據。本文將介紹如何使用AJAX完成頁面跳轉，并通過舉例說明其實際應用。

假設我們有一個電商網站，用戶可以瀏覽不同的商品，并點擊購買按鈕將商品添加到購物車。當用戶點擊購物車圖標時，我們希望能夠實現頁面跳轉到購物車頁面，同時保留用戶已選中的商品信息。使用傳統的方法，頁面跳轉后會重新加載整個頁面，導致用戶需要重新選擇商品。而通過AJAX，我們可以實現在不刷新整個頁面的情況下，完成頁面跳轉并保留用戶已選中的商品信息。

下面是使用AJAX完成頁面跳轉的示例代碼：

function goToCartPage() {
var selectedItems = getSelectedItems();  // 獲取用戶已選中的商品信息
var xhr = new XMLHttpRequest();  // 創建AJAX請求對象
xhr.open('POST', '/cart', true);  // 發送POST請求到購物車頁面
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
// 頁面跳轉完成后的回調函數
window.location.replace('/cart');
}
};
xhr.send(JSON.stringify(selectedItems));  // 將選中的商品信息發送到服務器端
}

上述代碼中，我們首先通過getSelectedItems函數獲取用戶已選中的商品信息，然后創建一個XMLHttpRequest對象，打開一個POST請求到購物車頁面。我們設置了請求的Content-Type為application/json，以便服務器端能夠正確解析請求的數據格式。

在xhr對象的onreadystatechange事件處理函數中，當AJAX請求的狀態變為4（表示請求已完成）且狀態碼為200（表示請求成功）時，我們使用window.location.replace方法進行頁面跳轉。這種方式會替換掉當前的頁面歷史記錄，使用戶無法通過瀏覽器的后退按鈕返回上一頁。

假設用戶在商品詳情頁選擇了兩個商品，并點擊了購物車圖標，下面是實際執行過程：

// 用戶點擊購物車圖標
goToCartPage();
// AJAX請求發送到服務器端
POST /cart HTTP/1.1
Content-Type: application/json
{"items": ["item1", "item2"]}
// 服務器端處理AJAX請求并返回狀態碼200
HTTP/1.1 200 OK
// 頁面跳轉到購物車頁面
GET /cart HTTP/1.1

通過以上的示例可以看出，通過AJAX我們可以在頁面跳轉的同時，向服務器端發送用戶已選中的商品信息，并在跳轉完成后重新加載購物車頁面。這樣用戶就可以直接看到已選中的商品，而無需重新選擇。

總之，AJAX可以實現在頁面跳轉的情況下，保留用戶已選中的數據。如上述的電商網站示例，我們可以通過AJAX將用戶已選中的商品信息發送到服務器端，然后實現頁面跳轉到購物車頁面，并在跳轉完成后重新加載購物車頁面，使用戶能夠直接看到已選中的商品。這大大提升了用戶體驗，減少了不必要的操作。