无法使用AJAX从PHP生成的Bootstrap选项卡中检索数据

<div class="container">
  <ul class="nav nav-tabs">
    <li class="active"><a href="#tab1" data-toggle="tab">选项卡1</a></li>
    <li><a href="#tab2" data-toggle="tab">选项卡2</a></li>
    <li><a href="#tab3" data-toggle="tab">选项卡3</a></li>
  </ul>

  <div class="tab-content">
    <div class="tab-pane active" id="tab1">
      <!-- 这里显示选项卡1的内容 -->
    </div>
    <div class="tab-pane" id="tab2">
      <!-- 这里显示选项卡2的内容 -->
    </div>
    <div class="tab-pane" id="tab3">
      <!-- 这里显示选项卡3的内容 -->
    </div>
  </div>
</div>

function retrieveData(tabId) {
  // 创建一个新的AJAX请求对象
  var xhr = new XMLHttpRequest();

  // 定义请求的URL和方法
  xhr.open('GET', 'retrieve_data.php?tab=' + tabId, true);

  // 定义请求完成后的回调函数
  xhr.onload = function() {
    if (xhr.status === 200) {
      // 更新选项卡内容
      document.getElementById(tabId).innerHTML = xhr.responseText;
    }
  };

  // 发送请求
  xhr.send();
}

// 在页面加载完成后，为每个选项卡绑定点击事件
document.addEventListener('DOMContentLoaded', function() {
  var tabs = document.querySelectorAll('.nav-tabs a');
  for (var i = 0; i < tabs.length; i++) {
    tabs[i].addEventListener('click', function(e) {
      e.preventDefault();
      var tabId = this.getAttribute('href').substring(1);
      retrieveData(tabId);
    });
  }
});

<?php
$tab = $_GET['tab'];

// 根据选项卡ID检索数据
// ...

// 返回数据
echo $data;
?>