Ajax（Asynchronous JavaScript and XML）是一種在Web開發中常用的技術，通過使用JavaScript和XMLHttpRequest對象，可以異步地向服務器請求數據并更新頁面內容，而不需要刷新整個頁面。在使用Ajax的過程中，我們經常需要引用外部的JSON數據，以進行頁面內容的動態更新。本文將介紹如何通過Ajax引用外部JSON數據，并以具體的例子進行說明。

在使用Ajax引用外部JSON數據之前，我們首先需要明確獲取JSON數據的來源。一種常見的情況是，我們可以從一個URL地址上獲取JSON數據，這個URL可以是一個服務器接口，也可以是一個本地的JSON文件。假設我們需要獲取一個名為“data.json”的本地JSON文件中的數據，并在頁面上顯示出來。

// 創建一個XMLHttpRequest對象
var xhr = new XMLHttpRequest();
// 使用GET方法請求數據，將第二個參數設置為JSON文件的URL地址
xhr.open('GET', 'data.json', true);
// 設置響應類型為JSON
xhr.responseType = 'json';
// 發送請求
xhr.send();
// 監聽readystatechange事件，當請求狀態發生改變時觸發
xhr.onreadystatechange = function() {
// 確保請求已完成并且請求狀態為成功
if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
// 獲取JSON數據
var jsonData = xhr.response;
// 對JSON數據進行處理和展示
displayData(jsonData);
}
};
// 處理和展示JSON數據的函數
function displayData(data) {
// 假設JSON數據包含一個名為“items”的數組，每個元素有“name”和“age”兩個屬性
var items = data.items;
// 遍歷數組并以列表形式顯示在頁面上
var list = document.createElement('ul');
for (var i = 0; i < items.length; i++) {
var item = items[i];
var listItem = document.createElement('li');
listItem.textContent = item.name + ' - ' + item.age;
list.appendChild(listItem);
}
document.body.appendChild(list);
}

在上述例子中，我們使用了XMLHttpRequest對象來發送一個GET請求，請求的目標為名為“data.json”的本地JSON文件的URL。在請求成功后，我們通過response屬性獲取到獲取到的JSON數據，并將其傳遞給displayData函數進行處理和展示。

除了從本地JSON文件中獲取數據外，我們還可以通過請求服務器接口來引用外部的JSON數據。假設我們需要根據用戶輸入的城市名獲取該城市的天氣情況，我們可以向一個提供天氣數據的API接口發送請求，接口會返回對應城市的天氣信息。

// 用戶輸入的城市名
var city = 'Shanghai';
// 創建一個XMLHttpRequest對象
var xhr = new XMLHttpRequest();
// 使用GET方法請求數據，將URL參數設置為城市名
xhr.open('GET', 'https://api.weather.com/v1/weather?city=' + city, true);
// 設置響應類型為JSON
xhr.responseType = 'json';
// 發送請求
xhr.send();
// 監聽readystatechange事件，當請求狀態發生改變時觸發
xhr.onreadystatechange = function() {
// 確保請求已完成并且請求狀態為成功
if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
// 獲取JSON數據
var jsonData = xhr.response;
// 對JSON數據進行處理和展示
displayWeather(jsonData);
}
};
// 處理和展示天氣數據的函數
function displayWeather(data) {
// 假設返回的天氣數據中有一個名為“temperature”的屬性
var temperature = data.temperature;
// 在頁面上顯示城市名和溫度
var cityElement = document.createElement('h2');
cityElement.textContent = city;
var temperatureElement = document.createElement('p');
temperatureElement.textContent = 'Temperature: ' + temperature;
document.body.appendChild(cityElement);
document.body.appendChild(temperatureElement);
}

在上述例子中，我們使用了一個虛擬的天氣API接口來獲取城市的天氣情況。在發送請求時，我們將URL參數設置為用戶輸入的城市名，接口會返回對應城市的天氣數據。在請求成功后，我們通過response屬性獲取到獲取到的JSON數據，并將其傳遞給displayWeather函數進行處理和展示。

通過上述兩個例子，我們可以看到，使用Ajax引用外部JSON數據可以幫助我們實現頁面內容的動態更新。無論是從本地的JSON文件中獲取數據，還是通過請求服務器接口獲取數據，我們都可以使用Ajax的異步請求來實現。通過處理和展示JSON數據，我們可以將獲取到的數據在頁面上進行展示，從而提升用戶體驗和數據的實時性。