（一）HTML5 - pushState 无刷新更新地址

浏览数：47 / 时间：2015年06月09日

可以解决什么问题：

可以实现网页的ajax加载，同时又能完成URL的改变而没有网页跳转刷新的迹象，就像是改变了网页的hash（＃）一样。

优于hash：

避免了改变hash的问题，避免了用户不理解URL的形式感到疑惑，同时还有onpopstate提供监听，良好响应后退前进。而且它不需要这个URL真实存在。

HTML5 的 pushState+Ajax：

pushState() 的基本参数是：

1 var state = ( {
2 url: ~href, title: ~title, ~additionalKEY: ~additionalVALUE
3 } );
4 window.history.pushState(state, ~title, ~href);
5 window.history.replaceState( state, ~title, ~href);    // 替换

pushState、replaceState 的区别

pushState()可以创建历史，可以配合popstate事件，而replaceState()则是替换掉当前的URL，不会产生历史。

注：

只能用同域的URL替换，例如你不能用http://baidu.com去替换http://google.com。

state对象不存储不可序列化的对象如DOM。

pushState 配合 popstate 监听

1 window.addEventListener(‘popstate‘, function(evt){
2     var state = evt.state;
3     var tilte = state.tilte ;
4     var url = state.url
5     document.title=title;
6     doSomething(url);  // 自定义函数
7 }, false);