要实现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，并返回对应的页面内容。
