转载自: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. 【NOIP-2017PJ】图书管理员

    图书管理员 题目描述 图书馆中每本书都有一个图书编码,可以用于快速检索图书,这个图书编码是一个 正整数. 每位借书的读者手中有一个需求码,这个需求码也是一个正整数.如果一本书的图 书编码恰好以读者的需 ...

  2. 販売管理(SD)

    SD(販売管理)系のSAP DBテーブル. 随時更新していきます. [得意先マスタ]KNA1: 一般データ KNB1: 会計データ KNBK: 銀行データ KNVV: 販売データ KNVP: 取引先機 ...

  3. python--基本类型之字符串

    String(字符串): 定义和创建字符串: 定义:字符串是一个有序的字符的集合,用于存储和表示基本的文本信息.注意:字符串的单引号和双引号都无法取消特殊字符的含义,如果想让引号内 var1='Hel ...

  4. python2.7练习小例子(二十一)

        21):1.题目:两个乒乓球队进行比赛,各出三人.甲队为a,b,c三人,乙队为x,y,z三人.已抽签决定比赛名单.有人向队员打听比赛的名单.a说他不和x比,c说他不和x,z比,请编程序找出三队 ...

  5. MUI:字符串和json数据的相互转换

    JSON.parse()--字符串转换json.JSON.stringify()--json转换成字符串 如:收到Json对象:response,则: {"result":&quo ...

  6. oracle 数据被修改怎么修复?(闪回)

    数据被删除 或者 update 的时候忘记勾选where 限制条件,数据全部更新了?  怎么办? 要跑路了? NO !!! 看下面,迅速帮你闪回数据! demo sql: 1. SELECT * FR ...

  7. Smart Framework:轻量级 Java Web 框架

    Smart Framework:轻量级 Java Web 框架 收藏 黄勇   工作闲暇之余,我开发了一款轻量级 Java Web 框架 —— Smart Framework. 开发该框架是为了: 加 ...

  8. 对工具的反思 & deadlines与致歉

    人和动物最大的区别就是使用工具的水平. 有些人只凭着对工具的熟练掌握便成了牛人. 工具,到底应该以何种态度去看待? 在我小的时候,工具仅仅是指树枝.线.粉笔,可以让自己有更多游戏可玩:上学之后,便又有 ...

  9. 项目总结(一)->项目的七宗罪

    大半夜来这一份总结,心中夹杂着各种各样的心情,酸甜苦辣都有,今天为止,整个项目终于完结了,对于这样一个本可以正而八经吃吃薯片,看看毛片就可以完成项目,最后演变成一个一月之内连续加班105个小时的项目, ...

  10. web相关基础知识2

    2017-12-14 17:14:22 块元素 典型代表,Div,h1-h6,p,ul,li 特点: ★独占一行 ★可以设置宽高  ★ 嵌套(包含)下,子块元素宽度(没有定义情况下)和父块元素宽度默认 ...