html5解决ajax破坏浏览器机制

pjax是一种基于ajax+history.pushState的新技术,该技术可以无刷新改变页面的内容,并且可以改变页面的URL。pjax是ajax+pushState的封装,同时支持本地存储、动画等多种功能。

众所周知,Ajax可以实现页面的无刷新操作,但是,也会造成另外的问题,无法前进与后退!曾几何时,Gmail似乎借助iframe搞定,如今,HTML5让事情变得如同过家家般简单。

history.pushState(obj, title, url) ;

表示往页面history末尾新增一个历史项,此时history.length会+1。当执行Ajax操作的时候,用history.pushState(obj, title, url)往浏览器history中塞入一个地址(这是无刷新的);于是,返回的时候,通过URL或其他传参,我们就可以还原到Ajax之前的模样。

history.replaceState(obj, title, url) ;

表示替换当前历史项为新的历史项,此时history.length保持不变。

window.addEventListener("popstate", function() {
  doSomething();                             
});

浏览器的前进与后退,会触发window.onpopstate事件,通过绑定popstate事件,就可以根据当前URL地址中的查询内容让对应的菜单执行Ajax载入,实现Ajax的前进与后退效果。

参考demo

原文地址:https://www.cnblogs.com/camille666/p/js_historyobj_fn_to_solve_ajax_problem.html