Ajax是一種在網頁中進行異步數據交互的技術，它能夠動態地獲取服務器上的數據并將其展示在頁面上，而不需要刷新整個頁面。在本文中，我們將探討如何使用Ajax獲取數據，并將其展示在頁面中。
首先，讓我們考慮一個簡單的示例情景。假設我們正在開發一個新聞網站，并希望通過Ajax從服務器獲取最新的新聞列表并展示在頁面上。我們可以使用以下代碼發送一個Ajax請求：

<pre>javascript
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var newsList = JSON.parse(xhr.responseText);
// 在這里我們可以使用獲取到的數據進行展示
}
};
xhr.open("GET", "https://example.com/news", true);
xhr.send();

在上面的代碼中，我們創建了一個XMLHttpRequest對象并為其指定了一個onreadystatechange的回調函數。這個回調函數將在每當readyState屬性發生變化時被調用。我們通過檢查readyState為4并且status為200來確認Ajax請求已經成功返回。如果成功返回，我們將獲取到的數據解析為一個JavaScript對象，并可以在這里根據需要對數據進行操作和展示。
一種常用的展示方式是將新聞列表作為HTML列表放置在頁面的特定位置。假設我們有一個id為news-list的div元素用于展示新聞列表。我們可以在回調函數中添加以下代碼來實現這一目標：

<pre>javascript
// 假設解析后的數據為一個數組，其中每個元素包含新聞的標題和鏈接
var newsListElement = document.getElementById("news-list");
for (var i = 0; i < newsList.length; i++) {
var newsItem = document.createElement("li");
var newsLink = document.createElement("a");
newsLink.textContent = newsList[i].title;
newsLink.href = newsList[i].url;
newsItem.appendChild(newsLink);
newsListElement.appendChild(newsItem);
}

在上面的代碼中，我們首先通過id獲取到了news-list元素，然后使用一個for循環遍歷獲取到的新聞列表數據。我們創建了一個li元素作為每個新聞項的容器，并使用createElement方法創建了一個a元素用于顯示新聞標題，并將其與對應的鏈接綁定。最后，我們將新聞項添加到news-list元素中。
通過上述代碼的運行，我們已經成功地將Ajax獲取到的新聞列表展示在頁面上了。這種展示方式既簡單又直觀，讓用戶可以方便地查看最新的新聞。
除了使用HTML列表，我們還可以使用其他的展示方式，例如將數據展示在表格中、使用卡片方式展示等等。具體的展示方式取決于實際需求和設計風格。
總結起來，我們可以使用Ajax獲取服務器上的數據，并將其動態地展示在頁面中。無論是將數據展示在HTML列表、表格還是其他形式的容器中，我們都可以通過解析獲取到的數據，并使用JavaScript動態地構建對應的HTML元素來實現數據的展示。Ajax技術為網頁的數據交互提供了更加流暢和便捷的方式，使用戶能夠實時獲取更新的數據，從而提升了用戶體驗。