View demo      Download

在html5之前我们使用ajax技术实现无刷新页面载入，其优点就不在过多的阐述。

现在讲讲ajax刷新的缺点：

1. 无法使用浏览器的前进、后退来切换网页内容；
2. ajax刷新页面内容改变后无法改变浏览器地址栏中的url；
3. 对搜索引擎很有友好；

html5中新增了两个接口，history.pushState和history.replaceState，通过这两个接口可以实现页面无刷新载入，并且能够改变浏览器地址栏中的url，能够很好的避免传统ajax无法改变浏览器url及前进后退等的缺点。

HTML5中的History API

1. history.pushState(data, title [, url])：往历史记录堆栈顶部添加一条记录；data会在onpopstate事件触发时作为参数传递过去；title为页面标题，当前所有浏览器都会忽略此参数；url为页面地址，可选，缺省为当前页地址。
2. history.replaceState(data, title [, url]) ：更改当前的历史记录，参数同上。
3. history.state：用于存储以上方法的data数据，不同浏览器的读写权限不一样。

浏览器兼容性

API	Chrome	Firefox(Geko)	Internet Explorer	Opera	Safari
pushState, replaceState	5	4.0(2.0)	--	11.50	5.0
history.state	--	4.0(2.0)	--	11.50	--

 因为不是所有的浏览器都支持此新特性，所以我们有必要在使用前判断是否支持此api，判断方法如下：

function check_history_api(){
	return (window.history && history.pushState);
}

如何使用

var state = {
    title: title,
    url: options.url,
    otherkey: othervalue
};
window.history.pushState(state, document.title, url);

state对象除了要title和url之外，你也可以添加其他的数据，比如：还想将一些发送ajax的配置给保存起来。

replaceState和pushState是相似的，这里就不多介绍了。

如何响应浏览器的前进、后退操作

window对象上提供了onpopstate事件，上面传递的state对象会成为event的子对象，这样就可以拿到存储的title和URL了。

window.addEventListener('popstate', function(e){
  if (history.state){
    var state = e.state;
    //do something(state.url, state.title);
  }
}, false);

这样就可以结合ajax和pushState完美的进行无刷新浏览了。