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

  • 相关阅读:
    CCNET的部分配置使用说明
    用Visual C++实现PDF文件的显示
    开发流程中的可用性
    TCP/IP学习笔记(一)
    使用 Microsoft 实时通信 API 增强多客户端通信
    TCP/IP学习笔记(二)IP网际协议
    DDE热链接
    软件设计中的可用性
    封包技术
    使用MFC开发ActiveX控件
  • 原文地址:https://www.cnblogs.com/camille666/p/js_historyobj_fn_to_solve_ajax_problem.html
Copyright © 2011-2022 走看看