使用Ajax獲取數據后，頁面回顯是一種常見的網頁交互方式。通過Ajax技術，我們可以在不刷新整個頁面的情況下，向服務器發送異步請求并獲取數據，然后將這些數據動態地展示在頁面上。這為用戶提供了更好的交互體驗。本文將重點講述如何通過Ajax獲取數據，并通過實例說明如何在頁面中回顯這些數據。
首先，讓我們考慮一個簡單的場景：假設我們有一個商品列表頁，需要從服務器獲取商品的相關信息，如商品名稱、價格等，并在頁面中進行展示。一種常見的做法是使用Ajax獲取這些數據，并將獲取到的數據回顯到頁面上。
在頁面中我們通常會創建一個用于展示商品列表的容器，例如一個div元素，通過JavaScript代碼使用Ajax技術向服務器發送請求，獲取商品數據，并將其回顯到這個容器中。以下是一個實例：

html
<div id="productList"></div>
<script>
// 創建Ajax對象
var xhr = new XMLHttpRequest();
// 發送GET請求
xhr.open('GET','url',true);
// 注冊回調函數
xhr.onreadystatechange = function(){
// 請求完成并成功返回數據
if(xhr.readyState == 4 && xhr.status == 200){
// 獲取服務器返回的數據
var data = JSON.parse(xhr.responseText);
// 獲取商品列表容器
var productList = document.getElementById('productList');
// 清空容器內容
productList.innerHTML = '';
// 循環遍歷商品數據
for(var i = 0; i < data.length; i++){
// 創建一個新的商品元素
var product = document.createElement('div');
// 設置商品名稱
product.innerHTML = data[i].name;
// 將商品元素添加到商品列表容器中
productList.appendChild(product);
}
}
}
// 發送Ajax請求
xhr.send();
</script>

以上代碼中，我們創建了一個Ajax對象，通過調用open方法指定請求的類型和URL，并通過指定一個回調函數來處理請求的響應。當請求成功返回數據時，我們解析服務器返回的數據，并通過動態創建商品元素的方式將商品名稱添加到商品列表容器中。這樣就實現了通過Ajax獲取數據后的頁面回顯。
下面我們再看一個例子，假設我們的網頁中有一個表單，用戶填寫表單后，點擊提交按鈕，我們需要將用戶輸入的數據發送到服務器端，并在頁面中回顯提交結果。以下是一個實例：

html
<form id="submitForm">
<input type="text" id="name" placeholder="請輸入姓名">
<input type="text" id="email" placeholder="請輸入郵箱">
<button type="button" onclick="submitForm()">提交</button>
</form>
<div id="result"></div>
<script>
function submitForm(){
// 獲取表單元素
var name = document.getElementById('name').value;
var email = document.getElementById('email').value;
// 創建Ajax對象
var xhr = new XMLHttpRequest();
// 發送POST請求
xhr.open('POST','url',true);
xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');
// 注冊回調函數
xhr.onreadystatechange = function(){
// 請求完成并成功返回數據
if(xhr.readyState == 4 && xhr.status == 200){
// 獲取服務器返回的數據
var result = JSON.parse(xhr.responseText);
// 獲取結果容器
var resultContainer = document.getElementById('result');
// 清空容器內容
resultContainer.innerHTML = '';
// 根據提交結果回顯提示信息
if(result.success){
resultContainer.innerHTML = '提交成功';
} else {
resultContainer.innerHTML = '提交失敗，請重試';
}
}
}
// 發送Ajax請求
xhr.send('name=' + name + '&email=' + email);
}
</script>

在以上代碼中，我們給表單的提交按鈕綁定了一個調用submitForm函數的點擊事件，在該函數中獲取表單中用戶輸入的數據，并通過Ajax技術將數據發送到服務器中。當請求成功返回數據后，我們解析服務器返回的結果，并根據提交結果在頁面中回顯相應的提示信息。
可以看到，通過使用Ajax獲取數據后頁面回顯，可以實現動態加載數據、實時刷新頁面內容，提升用戶體驗。在實際開發中，我們可以根據具體的需求和業務場景來使用Ajax技術來實現頁面回顯功能，提升網站的用戶交互性。