pushState实现Ajax无刷新页面切换

pushState是HTML5 History API中的一个方法，它可以向浏览器的历史记录栈中添加一个新的状态，并且改变当前页面的URL。利用pushState可以实现Ajax无刷新页面切换。

首先，你需要在页面中捕获用户点击事件，并阻止默认的跳转行为。然后使用pushState方法来改变URL和页面内容，而不会重新加载整个页面。下面是一个基本的示例代码：

// 获取所有链接元素
var links = document.getElementsByTagName('a');
// 绑定点击事件
for (var i = 0; i < links.length; i++) {
  links[i].addEventListener('click', function(e) {
    e.preventDefault(); // 阻止默认行为
    var url = this.getAttribute('href'); // 获取目标链接的URL
    var title = this.textContent; // 获取目标链接的标题
    // 更新URL和页面内容
    history.pushState(null, title, url);
    loadContent(url);
  });
}
// 加载页面内容的函数
function loadContent(url) {
  // 使用Ajax请求获取页面内容
  var xhr = new XMLHttpRequest();
  xhr.open('GET', url, true);
  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
      // 将获取到的内容插入到页面中
      document.getElementById('content').innerHTML = xhr.responseText;
    }
  };
  xhr.send();
}
// 监听浏览器的前进/后退按钮事件
window.addEventListener('popstate', function() {
  var url = location.pathname; // 获取当前URL
  loadContent(url); // 加载对应的页面内容
});

上面的代码中，我们首先获取所有链接元素，然后为每个链接绑定点击事件。当用户点击链接时，会阻止默认的跳转行为，并使用pushState方法改变URL和页面内容。同时，我们还监听了浏览器的前进/后退按钮事件，当用户点击这些按钮时，会重新加载对应的页面内容。

注意，由于pushState方法只是改变了URL和页面内容，并不会发送实际的请求，所以你还需要使用Ajax来获取目标页面的内容，并将其插入到页面中。

以上就是利用pushState方法实现Ajax无刷新页面切换的基本步骤。你可以根据具体的需求进行相应的调整和扩展。