Ajax通过history api实现历史记录

Ajax可以实现页面的无刷新操作，这种方式比普通的页面载入好看多了。现在网站上不来点Ajax效果，都有点拿不出手。不过使用Ajax之后，无法前进与后退。有方法是用iframe解决，不过HTML5让事情变得简单了，History API提供了历史管理功能。

History API

History其实是个全局变量，即window.history。看到这，大家都知道是什么了，在js中经常用到window.history.back()来返回上一页，它在HTML4时代就已经存在，这次要说的重点是HTML5中新增的两个方法：

• pushState(data, title [, url])：往历史堆栈的顶部添加一条记录。data为一个对象或null，它会在触发window的popstate事件（window.onpopstate）时，作为参数的state属性传递过去；title为页面的标题，但当前所有浏览器都忽略这个参数；url为页面的URL，不写则为当前页。
• replaceState(data, title [, url])：更改当前页面的历史记录。参数同上。这种更改并不会去访问该URL。

目前只有Safari 5.0+、IE 10、Chrome 8.0+、Firefox 4.0+和Oprea 11.5+支持。如果想兼容老浏览器的话，可以试试History.js，而且它还修正了一些bug。

如何操作

在执行Ajax操作的时候，使用pushState往浏览器history中塞入一个地址，于是返回的时候，我们就可以还原到Ajax之前的模样。

相关

Demo：HTML5 history API与ajax分页实例

扩展阅读：

1. 如何让搜索引擎抓取AJAX内容？
2. ajax与HTML5 history pushState/replaceState实例

版权声明：本文为原创文章，版权归 neo 所有。

本文链接：https://idayer.com/ajax-history-api/

本作品采用知识共享署名-非商业性使用 4.0 国际许可协议进行许可。