在現代網頁開發中，經常需要使用Ajax技術從服務器獲取數據并將其快速顯示在網頁上。Ajax（Asynchronous JavaScript and XML）是一種在不重新加載整個網頁的情況下，通過異步請求與服務器進行數據交互的技術。本文將介紹如何使用Ajax獲取數據，并通過實例說明數據如何在網頁中顯示。

一般情況下，我們通過Ajax從服務器獲取的數據是以JSON（JavaScript Object Notation）格式返回的。JSON是一種輕量級的數據交換格式，在JavaScript中簡單易用。下面是一個使用Ajax獲取數據并將其顯示在網頁上的簡單示例：

<script>
// 創建XMLHttpRequest對象
var xhr = new XMLHttpRequest();
// 設置請求方式和請求地址
xhr.open('GET', 'example.com/api/data', true);
// 發送請求
xhr.send();
// 監聽請求狀態變化
xhr.onreadystatechange = function() {
// 判斷請求是否完成
if (xhr.readyState === 4 && xhr.status === 200) {
// 解析返回的JSON數據
var data = JSON.parse(xhr.responseText);
// 在網頁中顯示數據
document.getElementById('dataContainer').innerHTML = data.name;
}
};
</script>

在上面的示例中，我們首先創建了一個XMLHttpRequest對象，并使用open()方法設置請求方式和請求地址。然后，我們發送了異步請求并監聽請求狀態的變化。當請求狀態為4且狀態碼為200時，表示請求已完成且響應成功。此時，我們可以使用JSON.parse()方法解析返回的JSON數據，并將其顯示在指定的網頁元素(dataContainer)中。

除了顯示單個數據，我們還可以通過循環的方式將多個數據顯示在網頁上。例如，假設我們從服務器獲取的數據是一個包含多個人員信息的數組，我們可以通過循環遍歷該數組，并將每個人員的姓名和年齡顯示在網頁上：

<script>
var xhr = new XMLHttpRequest();
xhr.open('GET', 'example.com/api/persons', true);
xhr.send();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var persons = JSON.parse(xhr.responseText);
var dataContainer = document.getElementById('dataContainer');
for (var i = 0; i < persons.length; i++) {
var person = persons[i];
var personElement = document.createElement('p');
personElement.innerHTML = '姓名：' + person.name + '，年齡：' + person.age;
dataContainer.appendChild(personElement);
}
}
};
</script>

在上面的示例中，我們通過循環遍歷persons數組，并使用document.createElement()方法創建p元素，然后設置其innerHTML屬性為每個人員的姓名和年齡，并將其添加到dataContainer元素中。這樣，每個人員的信息都會被顯示為一個獨立的段落。

通過上述示例，我們可以看到使用Ajax獲取數據并在網頁上顯示的過程非常簡單。我們只需要創建XMLHttpRequest對象，發送異步請求，解析返回的JSON數據，并將其顯示在網頁上。通過靈活運用JavaScript的DOM操作，我們可以實現各種復雜的數據顯示效果。