今天我們將討論如何使用AJAX獲取嵌套的JSON數據。AJAX（異步JavaScript和XML）是一種用于交換數據的技術，它可以在不重新加載整個頁面的情況下更新頁面的內容。嵌套的JSON數據是一個復雜的數據結構，其中每個JSON對象可能包含其他JSON對象或數組。這種數據結構對于展示樹形結構的數據非常有用，例如文件系統或組織結構。在本文中，我們將通過舉例來說明如何使用AJAX從服務器獲取嵌套的JSON數據，并展示在頁面上。

首先，讓我們看一個簡單的示例。假設我們有一個JSON數據，它表示一個文件系統，包含文件夾和文件的層次結構。我們可以通過AJAX從服務器獲取此數據，并使用它來構建一個樹形結構的目錄。以下是一個示例的JSON數據：

{
"name": "root",
"type": "folder",
"children": [
{
"name": "folder1",
"type": "folder",
"children": [
{
"name": "file1",
"type": "file"
},
{
"name": "file2",
"type": "file"
}
]
},
{
"name": "folder2",
"type": "folder",
"children": [
{
"name": "file3",
"type": "file"
},
{
"name": "file4",
"type": "file"
}
]
}
]
}

我們可以使用AJAX的XMLHttpRequest對象來獲取JSON數據。以下是一個使用純JavaScript實現的示例：

var xhr = new XMLHttpRequest();
xhr.open('GET', 'example.json', true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var json = JSON.parse(xhr.responseText);
// 處理JSON數據
}
};
xhr.send();

一旦我們獲得了JSON數據，我們可以使用遞歸來訪問并展示所有的子文件夾和文件。以下是一個示例的遞歸函數：

function buildTree(parentElement, data) {
for (var i = 0; i < data.length; i++) {
var item = data[i];
var li = document.createElement('li');
var span = document.createElement('span');
span.textContent = item.name;
li.appendChild(span);
if (item.type === 'folder') {
var ul = document.createElement('ul');
li.appendChild(ul);
buildTree(ul, item.children);
}
parentElement.appendChild(li);
}
}
var jsonData = /* 獲取到的JSON數據 */;
var tree = document.getElementById('tree');
buildTree(tree, [jsonData]);

通過上述代碼，我們可以將JSON數據以樹形結構的形式展示在頁面上。用戶可以展開或折疊文件夾，以查看其子文件夾和文件。

總結起來，AJAX獲取嵌套的JSON數據可以幫助我們動態地展示復雜的數據結構。我們可以使用AJAX請求來獲取JSON數據，并使用遞歸函數將其展示在頁面上。這種方法在處理文件系統、組織結構或任何其他具有層次結構的數據時非常有用。