pushState怎么实现Ajax无刷新页面切换

要实现Ajax无刷新页面切换，可以使用pushState方法来修改浏览器的历史记录而不刷新页面。

下面是一个简单的示例代码，演示如何使用pushState实现Ajax无刷新页面切换：

// 监听链接点击事件
document.addEventListener('click', function(event) {
  var target = event.target;
  // 判断点击的元素是否为链接
  if (target.tagName === 'A') {
    // 阻止默认的页面跳转行为
    event.preventDefault();
    // 获取链接的目标URL
    var url = target.href;
    // 发起Ajax请求获取新页面内容
    var xhr = new XMLHttpRequest();
    xhr.open('GET', url, true);
    xhr.onreadystatechange = function() {
      if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
        // 成功获取到新页面内容
        // 将新页面内容替换到当前页面的某个容器中
        var container = document.getElementById('page-container');
        container.innerHTML = xhr.responseText;
        // 使用pushState方法修改URL，并更新浏览器的历史记录
        history.pushState({url: url}, '', url);
      }
    };
    xhr.send();
  }
});
// 监听浏览器的前进后退事件
window.addEventListener('popstate', function(event) {
  // 根据历史记录中的URL发起Ajax请求，获取对应页面的内容
  var url = event.state.url;
  var xhr = new XMLHttpRequest();
  xhr.open('GET', url, true);
  xhr.onreadystatechange = function() {
    if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
      // 成功获取到页面内容
      // 将新页面内容替换到当前页面的某个容器中
      var container = document.getElementById('page-container');
      container.innerHTML = xhr.responseText;
    }
  };
  xhr.send();
});

上述代码中，我们使用pushState方法在点击链接时修改了浏览器的URL，并将新页面内容替换到指定的容器中。同时，我们还监听了浏览器的前进后退事件，在用户点击浏览器的前进或后退按钮时重新发起Ajax请求，获取相应页面的内容并进行更新。

需要注意的是，由于使用了pushState方法修改了URL，所以在服务器端需要进行相应的配置，以便能正确处理这些URL，并返回对应的页面内容。