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