AJAX是一種用于在后臺獲取數據并動態更新網頁內容的技術。它可以通過異步請求向后臺發送請求，并在接收到返回的數據后，通過JavaScript來更新網頁的部分內容，而無需刷新整個頁面。本文將介紹如何使用AJAX獲取后臺數據，并將數據以樹形表格的形式展示在網頁上。

假設我們有一個文件夾結構，包含多個文件夾和文件。我們希望將這個結構以樹形表格的形式呈現在網頁上。首先，我們需要一個后臺接口來獲取文件夾結構的數據。比如，我們可以創建一個PHP接口來查詢數據庫并返回文件夾結構的JSON數據。

<?php
// PHP 代碼
$data = [
[
"id" => 1,
"name" => "文件夾1",
"children" => [
[
"id" => 2,
"name" => "文件夾2",
"children" => [
[
"id" => 3,
"name" => "文件夾3",
"children" => []
]
]
],
[
"id" => 4,
"name" => "文件夾4",
"children" => []
]
]
],
[
"id" => 5,
"name" => "文件夾5",
"children" => []
],
[
"id" => 6,
"name" => "文件夾6",
"children" => []
]
];
header('Content-Type: application/json');
echo json_encode($data);
?>

在前端，我們可以使用JavaScript和AJAX來獲取后臺返回的文件夾結構數據，并將數據以樹形表格的形式展示在網頁上。

// JavaScript 代碼
var table = document.getElementById('tree-table');
function createRow(data) {
var row = document.createElement('tr');
var nameCell = document.createElement('td');
nameCell.innerText = data.name;
row.appendChild(nameCell);
if (data.children.length > 0) {
row.classList.add('has-children');
var childrenCell = document.createElement('td');
childrenCell.colSpan = 3;
var childrenTable = document.createElement('table');
childrenTable.classList.add('children-table');
data.children.forEach(function(child) {
var childRow = createRow(child);
childrenTable.appendChild(childRow);
});
childrenCell.appendChild(childrenTable);
row.appendChild(childrenCell);
}
return row;
}
function renderTable(data) {
data.forEach(function(item) {
var row = createRow(item);
table.appendChild(row);
});
}
var xhr = new XMLHttpRequest();
xhr.open('GET', 'api.php', true);
xhr.onload = function() {
if (xhr.status === 200) {
var data = JSON.parse(xhr.responseText);
renderTable(data);
}
};
xhr.send();

上述代碼首先通過getElementById方法獲取樹形表格的容器元素。接著，定義一個createRow函數，用于遞歸地創建每一行的DOM元素。在createRow函數中，我們根據傳入的數據構建行元素，并根據是否有子文件夾來決定是否給行元素添加“has-children”類名。如果有子文件夾，我們還創建一個嵌套的表格元素，并遞歸地創建每一行的子元素。最后，我們定義一個renderTable函數來遍歷數據數組，并調用createRow函數來創建每一行的DOM元素，將其添加到表格中。

最后，我們使用XMLHttpRequest對象來發送HTTP GET請求到后臺接口，請求獲取文件夾結構的數據。在onload事件中，我們通過解析返回的JSON數據，并調用renderTable函數來呈現樹形表格。

通過使用AJAX獲取后臺數據并以樹形表格的形式展示在網頁上，我們可以實現動態更新網頁內容，用戶能夠更方便地瀏覽和操作文件夾結構。同時，通過JavaScript和AJAX這種異步通信的方式，用戶不會因為刷新整個頁面而感到不便。