AJAX（Asynchronous JavaScript and XML）是一種前端技術，可以實現異步加載數據并更新網頁內容，而無需重新加載整個頁面。通過AJAX，我們可以向服務器發送請求并獲得返回的JSON數據，進而在網頁中展示這些數據。本文將介紹如何使用AJAX獲取返回的JSON數據，并給出一些示例。

首先，我們需要創建一個XMLHttpRequest對象來發送AJAX請求。XMLHttpRequest對象是瀏覽器提供的內置對象，可以用來與服務器進行通信。下面是一個簡單的例子：

var xhr = new XMLHttpRequest();

接下來，我們需要指定請求的方法、URL和異步標志。通常，AJAX請求使用GET或POST方法。GET方法用于獲取數據，而POST方法用于向服務器發送數據。URL是請求的目標地址。異步標志指示請求是否是同步還是異步進行。

xhr.open('GET', 'https://api.example.com/data', true);

然后，我們可以定義一個回調函數，在獲取到服務器返回的數據后執行。通過設置xhr對象的onreadystatechange屬性，我們可以指定回調函數。回調函數通常會對返回的數據進行處理，比如展示在網頁中。

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

最后，我們需要發送請求。通過調用xhr對象的send方法即可發送AJAX請求。

xhr.send();

下面是一個完整示例，演示了如何使用AJAX獲取服務器返回的JSON數據并在網頁中展示：

var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data', true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var response = JSON.parse(xhr.responseText);
var dataContainer = document.getElementById('data-container');
response.forEach(function(item) {
var p = document.createElement('p');
p.textContent = item.name + ': ' + item.value;
dataContainer.appendChild(p);
});
}
};
xhr.send();

在上面的示例中，我們向https://api.example.com/data發送了一個GET請求，并在回調函數中將服務器返回的JSON數據解析為JavaScript對象。然后，我們遍歷這個對象，并將每個數據項顯示為一個段落元素，并添加到ID為data-container的元素中。

通過使用AJAX獲取返回的JSON數據，我們可以實現動態更新網頁內容，提升用戶體驗。無需重新加載整個頁面，只需要獲取并展示所需的數據，大大提高了網頁的加載速度。同時，AJAX還可以實現與服務器的實時交互，使網頁更加靈活和互動。

綜上所述，AJAX是一種強大的前端技術，可以通過異步加載數據并更新網頁內容。通過上述步驟，我們可以使用AJAX獲取返回的JSON數據，并在網頁中展示這些數據。不僅如此，AJAX還可以帶來更多的特性和優勢，為我們的前端開發帶來更多的可能性。