使用Ajax（Asynchronous JavaScript and XML）獲得多個JSON數據是一種常見的前端開發技術。通過Ajax，我們可以異步地向服務器發送請求并接收多個JSON數據，然后在頁面上進行動態展示和處理。例如，當我們在一個電子商務網站上點擊“購物車”按鈕時，頁面會使用Ajax向服務器發送請求，獲取購物車中的商品信息，并將其以JSON格式返回到客戶端，然后通過JavaScript處理這些JSON數據，更新頁面上的購物車內容。通過使用Ajax獲得多個JSON數據，我們可以有效地提升用戶體驗和頁面性能。
要使用Ajax獲得多個JSON數據，我們首先需要創建一個XMLHttpRequest對象，然后通過該對象發送請求到服務器，并在接收到響應后進行處理。下面是使用Ajax獲得多個JSON數據的示例代碼：

function getMultipleJSONData() {
var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://example.com/data1.json', true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var data1 = JSON.parse(xhr.responseText);
var xhr2 = new XMLHttpRequest();
xhr2.open('GET', 'https://example.com/data2.json', true);
xhr2.onreadystatechange = function() {
if (xhr2.readyState === 4 && xhr2.status === 200) {
var data2 = JSON.parse(xhr2.responseText);
// 處理data1和data2的邏輯代碼
// ...
// 更新頁面內容
document.getElementById('result').innerHTML = '獲取到多個JSON數據并處理成功！';
}
};
xhr2.send();
}
};
xhr.send();
}

在上面的代碼中，我們先創建了一個XMLHttpRequest對象xhr，然后使用xhr.open()方法指定要發送GET請求的URL，通過xhr.onreadystatechange函數監聽xhr對象的狀態變化。當xhr對象的readyState屬性值為4（表示請求已完成）且status屬性值為200（表示請求成功）時，我們使用JSON.parse()方法解析服務器返回的JSON數據，并將其保存在data1變量中。
接著，我們創建了一個新的XMLHttpRequest對象xhr2，用于請求第二個URL中的數據。同樣，在xhr2.onreadystatechange函數中處理服務器響應，并將解析后的JSON數據保存在data2變量中。
在處理完兩個JSON數據之后，我們可以根據實際需求編寫代碼邏輯來處理和展示這些數據。例如，可以根據data1和data2中的商品信息生成購物車列表，并實現添加商品、刪除商品等功能。
最后，我們可以通過JavaScript操作DOM元素，將結果返回到頁面上。在上述示例代碼中，我們使用了document.getElementById()方法獲取id為"result"的元素，并通過innerHTML屬性將結果顯示在頁面上。
通過以上步驟，我們就可以使用Ajax獲得多個JSON數據，并在頁面上進行處理和展示。這種方式不僅提升了用戶體驗，還可以減輕服務器的負載，提高頁面性能。在實際的前端開發中，我們可以根據具體的業務需求和頁面設計，靈活運用Ajax來獲取和處理多個JSON數據。