在開發網頁應用時，我們經常需要局部地更新頁面的某些部分而不是重新加載整個頁面。這樣可以提升用戶體驗，并減少不必要的網絡請求。幸運的是，通過使用 AJAX（Asynchronous JavaScript and XML），我們可以輕松地實現此功能。

AJAX 是一種在后臺與服務器進行數據交換的技術，它可以使網頁在不刷新整個頁面的情況下與服務器進行通信。以購物網站為例，當我們添加一個商品到我們的購物車時，我們不希望整個頁面都被重新加載。使用 AJAX，我們可以在不刷新整個頁面的情況下，將商品添加到購物車，并通過更新購物車部分來向用戶反饋此操作。

要使用 AJAX 重新加載整個頁面，我們可以通過以下步驟實現：

// 創建一個函數來重新加載整個頁面
function reloadPage() {
// 創建一個新的 XMLHttpRequest 實例
var xhr = new XMLHttpRequest();
// 定義請求的類型、URL 以及是否異步處理請求
xhr.open('GET', window.location.href, true);
// 當請求完成時執行此函數
xhr.onload = function() {
if (xhr.status >= 200 && xhr.status< 400) {
// 通過替換當前頁面的 HTML 內容來重新加載整個頁面
document.documentElement.innerHTML = xhr.responseText;
}
};
// 發送請求
xhr.send();
}
// 當需要重新加載整個頁面時，調用 reloadPage 函數
reloadPage();

上述代碼片段中創建了一個名為 reloadPage 的函數。此函數使用 XMLHttpRequest 對象發送一個 GET 請求到當前頁面的 URL，并在請求完成時更新頁面。代碼中的 xhr.open 語句設置了請求的類型為 GET，并傳遞了當前頁面的 URL。xhr.send 語句發送了請求。xhr.onload 函數在請求成功時執行，它首先檢查響應的狀態碼是否在 200 到 399 之間，這表示請求成功。然后，它通過替換當前頁面的 HTML 內容來重新加載整個頁面。

當我們需要調用 reloadPage 函數時，我們可以將其綁定到某個 HTML 元素的點擊事件上。例如，我們可以在購物車頁面上添加一個“清空購物車”按鈕，并將 reloadPage 函數綁定到此按鈕的點擊事件。當用戶點擊此按鈕時，整個頁面將被重新加載。

另一種情況是在表單提交后重新加載整個頁面。例如，當用戶在一個評論表單中提交評論時，我們可以使用 AJAX 發送評論到服務器，并在成功響應后重新加載整個頁面以顯示新的評論。以下是在表單提交后重新加載整個頁面的代碼示例：

// 獲取表單元素
var form = document.querySelector('#comment-form');
// 監聽表單的 submit 事件
form.addEventListener('submit', function(e) {
e.preventDefault(); // 阻止表單提交的默認行為
// 創建一個新的 XMLHttpRequest 實例
var xhr = new XMLHttpRequest();
// 定義請求的類型、URL 以及是否異步處理請求
xhr.open('POST', form.action, true);
// 當請求完成時執行此函數
xhr.onload = function() {
if (xhr.status >= 200 && xhr.status< 400) {
// 通過替換當前頁面的 HTML 內容來重新加載整個頁面
document.documentElement.innerHTML = xhr.responseText;
}
};
// 發送表單數據
xhr.send(new FormData(form));
});

以上代碼片段中創建了一個名為 form 的變量，它獲取了頁面中的評論表單元素。然后，使用 form.addEventListener 函數監聽表單的 submit 事件，并在事件觸發時執行回調函數。此回調函數首先調用 e.preventDefault() 阻止表單提交的默認行為，然后使用 XMLHttpRequest 對象發送一個 POST 請求到表單的 action URL，并在請求完成時更新頁面。

總結來說，通過使用 AJAX 技術，我們可以輕松地實現頁面的局部刷新而不是重新加載整個頁面。無論是在購物車頁面上添加商品，還是在提交評論后顯示新的評論，我們都可以通過發送 AJAX 請求并更新頁面來獲得更好的用戶體驗。