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无刷新页面切换的基本步骤。你可以根据具体的需求进行相应的调整和扩展。