在前端開發中，我們經常會用到Ajax來獲取服務器接口返回的數據，然后將這些數據通過DOM操作顯示在網頁上。本文將介紹如何使用Ajax來顯示接口數據，通過舉例說明詳細展示實現方法。

首先，我們需要明確接口數據的格式。一般來說，接口數據會以JSON格式返回，因此我們需要將接口返回的JSON數據解析為JavaScript對象，然后根據需要提取相應的數據進行顯示。

舉例來說，假設有一個天氣接口，我們可以通過Ajax請求獲取當前城市的天氣信息。首先，我們需要創建一個XMLHttpRequest對象，來發送Ajax請求。

const xhr = new XMLHttpRequest();  // 創建XMLHttpRequest對象
const url = 'https://api.weather.com/weather';  // 接口地址
xhr.open('GET', url, true);  // 配置請求方式和地址
xhr.send();  // 發送請求

然后，我們需要監聽xhr的readyState和status屬性，以便判斷請求是否成功，并在成功返回時進行數據的處理。

xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {  // 成功返回并且狀態碼為200
const response = JSON.parse(xhr.responseText);  // 將返回的JSON數據解析為JavaScript對象
const weather = response.weather;  // 從對象中提取天氣信息
// 將天氣信息顯示在頁面上
document.getElementById('weather-info').innerHTML = '當前天氣：' + weather;
}
};

通過上述代碼，我們成功獲取到天氣接口返回的數據，并將其中的天氣信息顯示在了頁面上。需要注意的是，在實際開發中，我們還應該對請求的異常情況進行處理，比如網絡錯誤或者接口返回錯誤信息。

除了顯示單條數據外，有時候接口返回的數據是一個數組，我們需要將其中的每個元素都顯示出來。舉例來說，假設有一個新聞接口，我們需要將接口返回的新聞列表顯示在頁面上。

const xhr = new XMLHttpRequest();  // 創建XMLHttpRequest對象
const url = 'https://api.news.com/news';  // 接口地址
xhr.open('GET', url, true);  // 配置請求方式和地址
xhr.send();  // 發送請求
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {  // 成功返回并且狀態碼為200
const response = JSON.parse(xhr.responseText);  // 將返回的JSON數據解析為JavaScript對象
const newsList = response.newsList;  // 從對象中提取新聞列表
// 遍歷新聞列表，并將每個新聞顯示在頁面上
for (let i = 0; i < newsList.length; i++) {
const news = newsList[i];
const newsItem = document.createElement('div');
newsItem.innerHTML = news.title;
document.getElementById('news-container').appendChild(newsItem);
}
}
};

通過上述代碼，我們成功獲取到新聞接口返回的新聞列表，并將每個新聞的標題顯示在了頁面上。通過循環遍歷，我們可以處理接口返回的數組數據。

總結一下，通過Ajax我們可以方便地獲取接口數據，并通過DOM操作將數據顯示在頁面上。無論是提取單條數據還是處理數組數據，我們都可以通過類似的方式實現。希望本文對你理解如何使用Ajax來顯示接口數據有所幫助。