转载自:http://lazynight.me/1897.html

折腾一下PJAX,利用HTML5的新API,实现历史记录的完美导入。

不知道你用没用过Github,里边的目录跳转就是用html5的pushstate做的,效果很酷。

还有一个关于web知识的宣传网站,http://www.20thingsilearned.com/en-US

你可以完美的前进后退,并且可以与好友分享特定页面,实现方法?不用我说了吧。

实现PJAX只需要以下几点:

  • pushState(state,
    title, url) 
    – Add one history state into browser history and update the URL in the browser window
  • replaceState(state,
    title, url)
     – operates exactly like history.pushState() except that replaceState() modifies the current history entry instead of creating a new one.
  • window.onpopstate –
    A popstate event is dispatched to the window every time the active history entry changes. 

    If the history entry being activated was created by a call to pushState or affected by a call to replaceState, the popstate event’s state property contains a copy of the history entry’s state object.

不想手写?拿来主义?

好吧,这里推荐给你一个现成的文件History.js,完美支持HTML4与HTML5,

在HTML5浏览器使用新API,HTML4浏览器继续锚点的干活…

https://github.com/balupton/History.js

试了一下,把wp主题给整了一个PJAX版本,效果不错,继续挖掘中。

想折腾的朋友,可以开始动手了。

PushState+Ajax 完美实现无刷新的更多相关文章

  1. nodejs利用ajax实现网页无刷新上传图片

    nodejs利用ajax实现网页无刷新上传图片 标签(空格分隔): nodejs 通常情况下上传图片是要通过提交form表单来实现的,但是这又不可避免的产生了网页转. 利用ajax技术和FormDat ...

  2. 本篇文章主要是对jquery+ajax+C#实现无刷新操作数据库数据的简单实例进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助

    我们知道同步执行和异步执行的区别,为了更好的提高用户的体验,我们都会采用异步方式去处理一些问题,毕竟单线程的同步可能回造成卡死等现象,很不友好,所以可以使用ajax来完成用户的体验,现在我们就来说说如 ...

  3. ajax完成list无刷新返回

    ajax完成list无刷新返回 ajax无刷新技术总结,以下是一段我写的ajax应用的js脚本.其中提交的data刚开始我采用的是$('#formId').serialize();但是出现乱码问题,为 ...

  4. HTML5新api即pushState和replaceState实现无刷新修改url

    1,首先我面临一个需求,页面回退时需要知道来之前的页面状态.很简单,回退时在url里赋参数即可.问题是在ipad上,回退按钮是安卓那边的,我控制不了.只好采用js无刷新修改url历史记录,来告诉服务器 ...

  5. HTTP与AJAX深入揭秘,不使用AJAX实现页面无刷新

    AJAX的原理是什么? 实际上就是发起HTTP请求,既然就是发起HTTP请求,那只要我们能够实现发起HTTP请求就可以在不使用AJAX的情况下实现相同的效果. 在前端有好多方式可以发起HTTP请求,比 ...

  6. jquery+ajax(用ajax.dll)实现无刷新分页

    利用ajax.dll那种方式的无刷新,在这就不说了,新朋友可以看下我的另一片文件http://www.cnblogs.com/dachuang/p/3654632.html 首先,这里用的是jquer ...

  7. Ajax+Asp.Net无刷新分页

    1.新建解决方案,并建立四个项目BLL,DAL,Model,PagerTest,如图所示: 2.Model代码 using System; using System.Collections.Gener ...

  8. ASP.NET Ajax简单的无刷新分页

    最近练习了一些AJAX无刷新分页,写得比较简单,性能不知道怎么样,求大神指点,如有更好的分页提供,欢迎交流! 发话不多说了,直接上代码! 首先从网上下了一个JS分页,感觉挺好用的 (function( ...

  9. jQuery+AJAX实现网页无刷新上传

    新年礼,提供简单.易套用的 jQuery AJAX上传示例及代码下载.后台对文件的上传及检查,以 C#/.NET Handler 处理 (可视需要改写成 Java 或 PHP). 有时做一个网站项目 ...

随机推荐

  1. GET TIME

    基本形式 GET TIME [FIELD tim]. オプション: ... FIELD tim 機能 FIELD オプションを使用しない場合. 日付および時刻のシステム項目 sy-datlo.sy-d ...

  2. python基础之try异常处理、socket套接字基础part1

    异常处理 错误 程序里的错误一般分为两种: 1.语法错误,这种错误,根本过不了python解释器的语法检测,必须在程序执行前就改正 2.逻辑错误,人为造成的错误,如数据类型错误.调用方法错误等,这些解 ...

  3. jpa Specification复杂查询

    public List<Receipts> test(List<String> costIds){ Specification<Receipts> specific ...

  4. Linux安装mysql以及安装时踩下的坑

    安装: 检测是否已经安装了mysql rpm -qa | grep mysql 如果已经安装了,将其卸载,如: rpm -e --nodeps  mysql-libs-5.1.71-1.el6.x86 ...

  5. 你真的了解React吗

    https://zhufengzhufeng.github.io/zhufengreact/index.html#t21.%E4%BB%80%E4%B9%88%E6%98%AFReact?

  6. nexys4-DDR开发板温度传感器ADT7420U

    1. 用这个板子做个什么功能来学习?板子上有个温度传感器,看下官方是否有例程,板子售价1780元,相当的贵,下面是I2C接口, 看下芯片的引脚图 2. 资料下载地址,得注册账号 https://ref ...

  7. JDBC剖析篇(1):java中的Class.forName()

    一.Class.forName() 在Java中我们一般用下面这样的语句来连接数据库(以MySQL为例) Class.forName("com.mysql.jdbc.Driver" ...

  8. (4)分布式下的爬虫Scrapy应该如何做-规则自动爬取及命令行下传参

    本次探讨的主题是规则爬取的实现及命令行下的自定义参数的传递,规则下的爬虫在我看来才是真正意义上的爬虫. 我们选从逻辑上来看,这种爬虫是如何工作的: 我们给定一个起点的url link ,进入页面之后提 ...

  9. 在测试时用到的一些mysql的小技巧(持续更新)

    经常使用的快捷键: 1.ctrl+q 打开查询窗口 2.ctrl+/ 注释sql语句 3.ctrl+shift +/ 解除注释 4.ctrl+r 运行查询窗口的sql语句 5.ctrl+shift+r ...

  10. CSP201509-1:数组分段

    引言:CSP(http://www.cspro.org/lead/application/ccf/login.jsp)是由中国计算机学会(CCF)发起的“计算机职业资格认证”考试,针对计算机软件开发. ...