AJAX（Asynchronous JavaScript and XML）是一種在網頁中無需刷新整個頁面的情況下獲取數據的技術。當頁面需要從服務器獲取數據并更新部分內容時，傳統的刷新頁面方法往往會導致用戶體驗的下降。通過使用AJAX，我們可以在不刷新頁面的情況下獲取所需的數據，并將其動態地顯示在頁面上。當數據被成功獲取后，我們可以通過刷新頁面來觸發一系列的動作，以便在數據更新后立即展示新的內容。接下來我們將詳細介紹如何使用AJAX獲取數據后刷新頁面。

假設我們有一個網頁，上面有一本書的信息，包括書名、作者和出版時間。我們需要從服務器獲取最新的書本信息，并在獲取成功后刷新頁面以展示更新后的數據。為了實現這個功能，我們可以使用AJAX來異步獲取數據，然后使用JavaScript動態地更新頁面。

// JavaScript代碼示例
function refreshPage(data) {
// 將獲取到的數據在頁面上動態顯示
document.getElementById("bookName").innerHTML = data.bookName;
document.getElementById("author").innerHTML = data.author;
document.getElementById("publishDate").innerHTML = data.publishDate;
}
function fetchData() {
// 使用AJAX異步獲取數據
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
// 獲取到數據后調用refreshPage函數刷新頁面
refreshPage(xhr.responseText);
location.reload(); // 刷新頁面以展示最新的數據
}
};
xhr.open("GET", "bookInfo.php", true);
xhr.send();
}

在上面的代碼中，我們定義了兩個函數：refreshPage和fetchData。refreshPage函數用于將獲取到的數據動態地顯示在頁面上，而fetchData函數則用于異步獲取數據并刷新頁面。

在fetchData函數中，我們使用了XMLHttpRequest對象來發起一個GET請求，將獲取到的數據提交給服務器。當請求的狀態發生變化時，我們檢查是否成功獲取到數據（readyState為4且status為200），如果成功則調用refreshPage函數來更新頁面。接下來，我們使用location.reload()方法來刷新頁面，以便立即展示最新的數據。

假設我們的網站是一個在線書店，用戶可以通過搜索功能找到自己想要的書籍。當用戶進行搜索時，我們希望可以在不刷新整個頁面的情況下獲取搜索結果并刷新部分內容。使用AJAX可以輕松實現這一功能。

// JavaScript代碼示例
function refreshResults(data) {
// 將獲取到的搜索結果動態顯示在頁面上
document.getElementById("searchResults").innerHTML = data;
}
function searchBooks() {
var searchQuery = document.getElementById("searchQuery").value;
// 使用AJAX異步獲取搜索結果
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
// 獲取到搜索結果后調用refreshResults函數刷新部分內容
refreshResults(xhr.responseText);
}
};
xhr.open("GET", "search.php?q=" + searchQuery, true);
xhr.send();
}

在上面的代碼中，我們定義了兩個函數：refreshResults和searchBooks。refreshResults函數用于將獲取到的搜索結果動態地顯示在頁面上，而searchBooks函數則用于異步獲取搜索結果并刷新部分內容。

在searchBooks函數中，我們首先獲取用戶輸入的搜索查詢。然后，我們使用XMLHttpRequest對象來發起一個GET請求，將搜索查詢作為參數傳遞給服務器。當請求的狀態發生變化時，我們檢查是否成功獲取到搜索結果（readyState為4且status為200），如果成功，則調用refreshResults函數來更新頁面中的搜索結果部分。

總之，AJAX可以幫助我們在不刷新整個頁面的情況下獲取數據并刷新部分內容，從而提高用戶體驗。通過使用AJAX，我們可以在獲取到數據后刷新頁面，以便立即展示最新的信息。以上是關于使用AJAX獲取數據后刷新頁面的一些示例代碼和說明。希望對你有所幫助！