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实例