Ajax（Asynchronous JavaScript and XML）是一種網頁開發技術，可以實現網頁內容的異步加載和更新，不需要重新加載整個頁面。通過使用Ajax，開發者可以在不刷新頁面的情況下從服務器獲取數據，并將其顯示在網頁上。然而，有時候我們需要重新加載頁面以更新內容或執行其他操作。本文將介紹如何使用Ajax重新加載頁面，并使用舉例說明。
要重新加載頁面，我們可以通過Ajax向服務器發送一個新的請求，然后將服務器返回的內容加載到當前頁面中。舉個例子，假設我們有一個簡單的網頁，上面顯示了一篇文章的標題和內容。我們可以在頁面的底部添加一個“刷新”按鈕，當用戶點擊該按鈕時，使用Ajax重新加載頁面，從而獲取最新的文章內容。
// HTML
<button id="refreshButton">刷新</button>
<div id="article">
<h1 id="title"></h1>
<p id="content"></p>
</div>
// JavaScript
document.getElementById("refreshButton").addEventListener("click", function() {
// 創建一個新的XMLHttpRequest對象
var xhr = new XMLHttpRequest();
// 設置請求的類型、URL和異步標志
xhr.open("GET", "/api/article", true);
// 注冊一個回調函數，當請求完成時會被調用
xhr.onload = function() {
if (xhr.status === 200) {
var response = JSON.parse(xhr.responseText);
document.getElementById("title").innerHTML = response.title;
document.getElementById("content").innerHTML = response.content;
}
};
// 發送請求
xhr.send();
});在上面的代碼中，我們通過事件監聽器將“刷新”按鈕與一個匿名函數關聯起來。當用戶點擊按鈕時，函數會執行以下步驟：
- 創建一個新的XMLHttpRequest對象（即XHR對象）。
- 使用XHR對象的open方法設置請求的類型、URL和異步標志。這里我們使用GET方法請求服務器上的"/api/article"接口。
- 注冊一個回調函數xhr.onload，在請求完成時會被調用。
- 在回調函數中，我們首先檢查響應的狀態碼是否為200，表示請求成功。然后，我們將服務器返回的JSON數據解析為JavaScript對象，并更新頁面上的標題和內容。
- 最后，我們調用XHR對象的send方法發送請求。
當用戶點擊刷新按鈕時，瀏覽器會發送一個新的Ajax請求到服務器上的/api/article接口。服務器會處理該請求，并返回最新的文章數據。由于我們使用了異步請求，因此頁面并不會刷新，只有文章的標題和內容會被重新加載和更新。
除了通過按鈕點擊事件觸發重新加載頁面，我們還可以在其他場景下使用Ajax來重新加載頁面。例如，我們可以在定時器中使用Ajax來定期刷新頁面，以顯示最新的數據。又或者，在表單提交后使用Ajax重新加載頁面以顯示操作結果。
總之，Ajax可以通過向服務器發送新的請求并將返回的內容加載到當前頁面來實現頁面的重新加載。通過使用Ajax，我們可以讓頁面在不刷新的情況下獲取最新的數據，并以更加用戶友好的方式來更新頁面內容。