在現代Web開發中，為了提升用戶體驗，經常會使用Ajax技術實現網頁的異步加載和動態更新。通過Ajax，我們可以在不刷新整個頁面的情況下，從服務器端獲取數據并將其展示在網頁上。本文將介紹如何使用Ajax獲取數據，并將獲取的數據展示在HTML頁面上。
使用Ajax獲取數據的第一步是創建XMLHttpRequest對象。XMLHttpRequest對象是瀏覽器提供的用于發送HTTP請求的接口。通過該對象，我們可以向服務器發送請求并獲取響應。
以下是一個示例代碼，展示了如何創建一個XMLHttpRequest對象：

var xhr = new XMLHttpRequest();

在創建成功XMLHttpRequest對象后，我們需要設置回調函數，該函數會在接收到服務器響應的時候被調用。回調函數一般會處理服務器返回的數據，并將其展示在網頁上。以下是一個例子：

xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var responseData = xhr.responseText;
// 在這里處理服務器返回的數據
}
};

異步請求數據之后，通過使用xhr.responseText屬性可以獲取到服務器返回的數據。在這個例子中，responseData變量存儲了服務器返回的數據。
接下來的步驟是將獲取的數據展示在HTML頁面上。這通常需要根據數據的類型和格式進行相應的處理。例如，如果我們使用JavaScript在HTML頁面上創建一個表格，并將服務器返回的數據作為表格的內容展示，我們可以像以下代碼一樣操作：

var table = document.createElement('table');
document.body.appendChild(table);
var data = JSON.parse(responseData);
for (var i = 0; i < data.length; i++) {
var row = document.createElement('tr');
var cell1 = document.createElement('td');
cell1.innerText = data[i].name;
row.appendChild(cell1);
var cell2 = document.createElement('td');
cell2.innerText = data[i].age;
row.appendChild(cell2);
table.appendChild(row);
}

在上面的代碼中，我們通過解析服務器返回的數據為一個JavaScript對象，并根據數據的格式創建一個表格來展示數據。通過使用document.createElement和相關DOM操作，我們可以動態地創建表格中的每一行和每一列，并將數據填充到相應的位置。
通過以上的例子，我們可以看出，使用Ajax獲取數據并將其展示在HTML頁面中并不復雜。通過XMLHttpRequest對象，我們可以輕松地向服務器端發送請求并接收響應。然后，通過JavaScript和DOM操作，我們可以在網頁上動態地展示獲取的數據，從而提升用戶體驗。無論是展示數據表格、圖表還是其他形式的數據，都可以通過類似的方式實現。