AJAX（Asynchronous JavaScript and XML，異步JavaScript和XML）是一種用于在網頁上實現異步數據交換的技術。JS（JavaScript）是一種腳本語言，能夠為網頁增加動態效果并與服務器進行通信。樹狀菜單是一種常見的網頁導航方式，可以讓用戶快速瀏覽和選擇所需內容。結合AJAX和JS，我們可以輕松地創建動態的樹狀菜單，提供直觀的導航體驗。

假設我們有一個文件夾結構，其中包含多個文件夾和文件。在網頁上展示這個結構并提供導航功能，可以使用樹狀菜單。當用戶點擊菜單中的某個節點時，我們可以通過AJAX請求來獲取該節點下的子節點，然后動態更新菜單。這樣，用戶可以快速瀏覽文件夾結構，找到所需的文件并進行相關操作。

├─ 文件夾1
│  ├─ 子文件夾1.1
│  ├─ 子文件夾1.2
│  └─ 文件1.1
├─ 文件夾2
└─ 文件夾3
├─ 子文件夾3.1
│  ├─ 文件3.1.1
│  └─ 文件3.1.2
├─ 子文件夾3.2
│  ├─ 文件3.2.1
│  └─ 文件3.2.2
└─ 文件3.1

首先，我們需要定義一個HTML結構來展示樹狀菜單。使用無序列表（

和
• 標簽）可以很好地表示樹形結構。每個節點包含一個內容和一個子節點列表，如果沒有子節點，則為空。

  <ul id="treeMenu">
  <li>
  文件夾1
  <ul>
  <li>子文件夾1.1</li>
  <li>子文件夾1.2</li>
  <li>文件1.1</li>
  </ul>
  </li>
  <li>文件夾2</li>
  <li>
  文件夾3
  <ul>
  <li>
  子文件夾3.1
  <ul>
  <li>文件3.1.1</li>
  <li>文件3.1.2</li>
  </ul>
  </li>
  <li>
  子文件夾3.2
  <ul>
  <li>文件3.2.1</li>
  <li>文件3.2.2</li>
  </ul>
  </li>
  <li>文件3.1</li>
  </ul>
  </li>
  </ul>

  接下來，我們使用JavaScript來實現點擊節點時的動態更新。首先，我們為每個菜單項添加一個點擊事件監聽器。當用戶點擊節點時，我們首先判斷該節點是否存在子節點，如果存在則發送AJAX請求，并在獲取數據后進行處理。

  var treeMenu = document.getElementById('treeMenu');
  var nodes = treeMenu.getElementsByTagName('li');
  for (var i = 0; i< nodes.length; i++) {
  nodes[i].addEventListener('click', function(e) {
  var subMenu = this.getElementsByTagName('ul')[0];
  if (subMenu) {
  // 子菜單存在，發送AJAX請求
  var xhr = new XMLHttpRequest();
  xhr.open('GET', 'getSubmenu.php?node=' + this.innerText, true);
  xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
  // 獲取數據成功后，更新子菜單內容
  var data = JSON.parse(xhr.responseText);
  subMenu.innerHTML = '';
  for (var j = 0; j< data.length; j++) {
  var li = document.createElement('li');
  li.innerText = data[j];
  subMenu.appendChild(li);
  }
  }
  };
  xhr.send();
  }
  });
  }

  在這個例子中，我們使用了一個簡單的AJAX請求，向服務器發送獲取子菜單的請求，并在獲取數據成功后更新子菜單的內容。服務器返回的數據可以是JSON格式的，我們解析后將其添加到子菜單中。通過這種方式，我們可以實現動態加載子菜單的功能，并且不需要刷新整個頁面。

  總結來說，結合AJAX和JavaScript，我們可以輕松地創建樹狀菜單，并且實現動態加載子菜單的功能。通過不斷獲取數據并更新菜單，我們可以提供直觀的導航體驗，并讓用戶更加方便地瀏覽和選擇所需內容。