如何在单击后退按钮时更改html Ajax内容？

window.onpopstate = function(event) {
  // 处理后退按钮点击事件
}

window.onpopstate = function(event) {
  var anchor = window.location.hash; // 获取URL的锚点标识
  // 根据不同的锚点标识加载相应的内容
  if (anchor === '#page1') {
    loadPage1Content();
  } else if (anchor === '#page2') {
    loadPage2Content();
  } else {
    // 默认加载首页内容
    loadHomePageContent();
  }
}

function loadPage1Content() {
  // 发起Ajax请求，加载Page 1的内容
  var xhr = new XMLHttpRequest();
  xhr.open('GET', 'page1.html', true);
  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
      var content = xhr.responseText;
      // 将加载的内容更新到页面中的特定元素
      document.getElementById('content').innerHTML = content;
    }
  };
  xhr.send();
}

function loadPage1Content() {
  var xhr = new XMLHttpRequest();
  xhr.open('GET', 'page1.html', true);
  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
      var content = xhr.responseText;
      document.getElementById('content').innerHTML = content;

      // 更新浏览器的历史记录
      history.pushState(null, null, '#page1');
    }
  };
  xhr.send();
}