pushState实现Ajax无刷新页面切换

`pushState`是HTML5 History API中的一个方法，它可以向浏览器的历史记录栈中添加一个新的状态，并且改变当前页面

的URL。利用`pushState`可以实现Ajax无刷新页面切换。

首先，你需要在页面中捕获用户点击事件，并禁止默许的跳转行动。然后使用`pushState`方法来改变URL和页面内容，而

不会重新加载全部页面。下面是一个基本的示例代码：

```javascript

// 获得所有链接元素

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