AJAX（Asynchronous JavaScript and XML）是一種用于創建動態網頁的技術。它通過在不重新加載整個頁面的情況下，與后臺服務器進行數據交互，實現局部更新頁面的效果。在應用中，有時候需要獲取不止一個接口的數據，本文將介紹如何使用AJAX獲取兩個接口的數據，并展示如何處理這些數據。

假設我們正在開發一個天氣預報應用。我們需要獲取來自兩個不同接口的數據：一個接口用于獲取當前城市的天氣信息，另一個接口用于獲取未來幾天的天氣預報。我們使用AJAX來獲取這些數據，并將其顯示在網頁上。

// 獲取當前城市天氣的接口
var currentWeatherUrl = "https://api.weather.com/current/weather";
// 獲取未來幾天天氣預報的接口
var forecastUrl = "https://api.weather.com/forecast";

首先，我們使用AJAX發送一個GET請求來獲取當前城市的天氣信息：

// 創建一個新的XMLHttpRequest對象
var xhr = new XMLHttpRequest();
// 設置請求的方法和URL
xhr.open("GET", currentWeatherUrl, true);
// 發送請求
xhr.send();
// 監聽請求狀態改變事件
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
// 處理返回的數據
var response = JSON.parse(xhr.responseText);
var currentWeather = response.weather;
// 更新網頁上的天氣信息
document.getElementById("current-weather").innerHTML = currentWeather;
}
};

上述代碼使用XMLHttpRequest對象發送了一個GET請求到currentWeatherUrl接口，并監聽了onreadystatechange事件。當請求的狀態改變時，會執行事件處理程序。在事件處理程序中，首先判斷請求的狀態是否為4（表示請求已完成），并且HTTP狀態碼是否為200（表示請求成功）。如果滿足條件，我們解析返回的JSON數據，并更新網頁上的當前天氣信息。

接下來，我們使用相同的方式來獲取未來幾天的天氣預報：

var xhr2 = new XMLHttpRequest();
xhr2.open("GET", forecastUrl, true);
xhr2.send();
xhr2.onreadystatechange = function() {
if (xhr2.readyState === 4 && xhr2.status === 200) {
var response = JSON.parse(xhr2.responseText);
var forecastWeather = response.forecast;
// 更新網頁上的天氣預報信息
document.getElementById("forecast-weather").innerHTML = forecastWeather;
}
};

在上述代碼中，我們創建了另一個XMLHttpRequest對象xhr2，并發送了一個GET請求到forecastUrl接口。同樣地，我們監聽了onreadystatechange事件，并在事件處理程序中更新網頁上的天氣預報信息。

通過上述示例，我們展示了如何使用AJAX獲取兩個接口的數據，并將其顯示在網頁上。AJAX的異步特性可以使我們在不重新加載整個頁面的情況下，動態獲取和更新數據。

總結來說，AJAX是一種強大的技術，它使得我們可以通過JavaScript與后臺服務器進行數據交互。對于需要獲取多個接口的數據，我們只需使用多個XMLHttpRequest對象，并為每個請求設置相應的URL和處理程序即可。AJAX的使用將大大提升網頁的用戶體驗和動態性。