zoukankan      html  css  js  c++  java
  • 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

  • 相关阅读:
    【LOJ#6277】数列分块1
    【LOJ6284】数列分块8
    【洛谷P3275】糖果
    【洛谷P3810】陌上花开
    【洛谷P1052】过河 离散化+dp
    【洛谷P2042】维护数列
    【模板】文艺平衡树
    【洛谷P4145】花神游历各国
    【洛谷P4878】布局
    hdu 5748(LIS)
  • 原文地址:https://www.cnblogs.com/camille666/p/js_historyobj_fn_to_solve_ajax_problem.html
Copyright © 2011-2022 走看看