AJAX (Asynchronous JavaScript and XML) 是一種用于在網頁中實現異步數據傳輸的技術。它可以通過JavaScript和服務器之間的通信，實現在不刷新整個頁面的情況下獲取和展示服務器返回的數據。在開發過程中，我們常常需要從服務器獲取JSON數據，然后進行處理和展示。本文將介紹如何使用AJAX請求JSON數據，并展示多種實例。

下面是一個簡單的例子，演示如何使用AJAX請求并展示JSON數據：

// 創建AJAX請求對象
var xhr = new XMLHttpRequest();
// 設置請求方法和URL
xhr.open('GET', '/data.json', true);
// 設置請求頭
xhr.setRequestHeader('Content-Type', 'application/json');
// 處理服務器響應的數據
xhr.onload = function() {
if (xhr.status === 200) {
// 解析響應的JSON數據
var data = JSON.parse(xhr.responseText);
// 在頁面上展示數據
var output = document.getElementById('output');
output.innerHTML = '<p>' + data.message + '</p>';
}
};
// 發送請求
xhr.send();

在上面的例子中，我們通過AJAX請求獲取了一個名為"data.json"的JSON文件，并將其解析為JavaScript對象。然后，我們在頁面上展示了其中的"message"屬性。

當我們需要在頁面上展示多個JSON對象時，可以使用循環來獲取并展示數據。下面是一個例子：

// 創建AJAX請求對象
var xhr = new XMLHttpRequest();
// 設置請求方法和URL
xhr.open('GET', '/data.json', true);
// 設置請求頭
xhr.setRequestHeader('Content-Type', 'application/json');
// 處理服務器響應的數據
xhr.onload = function() {
if (xhr.status === 200) {
// 解析響應的JSON數據
var data = JSON.parse(xhr.responseText);
// 在頁面上展示所有數據
var output = document.getElementById('output');
for (var i = 0; i < data.length; i++) {
output.innerHTML += '<p>' + data[i].name + ': ' + data[i].value + '</p>';
}
}
};
// 發送請求
xhr.send();

在上面的例子中，我們假設服務器返回的是一個包含多個JSON對象的數組。我們使用循環遍歷數組，并在頁面上展示每個對象的"name"和"value"屬性。

除了使用JavaScript原生的XMLHttpRequest對象獲取JSON數據外，我們還可以使用更方便的技術，如使用jQuery庫中的AJAX方法。以下是一個使用jQuery的例子：

// 發送AJAX請求
$.ajax({
url: '/data.json',
method: 'GET',
dataType: 'json',
success: function(data) {
// 在頁面上展示數據
var output = $('#output');
$.each(data, function(i, obj) {
output.append('<p>' + obj.name + ': ' + obj.value + '</p>');
});
}
});

在上面的例子中，我們使用了jQuery的$.ajax方法，它提供了一種更簡潔的方式來發送AJAX請求。我們通過設置url、method和dataType等屬性來指定請求的URL、方法和數據類型，成功獲取到數據后，我們使用$.each方法來遍歷數據，并將其展示在頁面上。

無論是使用原生的JavaScript還是其他庫，AJAX都是獲取JSON數據的重要技術之一。通過使用AJAX請求并展示JSON數據，我們可以實現更流暢和交互性的用戶體驗，提升網頁的性能和效果。