转载自: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. 当我们访问不了虚拟机上ip上的web页面,是因为在window上要添加映射

    在主机上添加映射步骤 1.打开C盘 注意:用nopedata++打开 保存即可!

  2. CentOS7安装Oracle 11gR2 图文详解

    注:Oracle11gR2 X64安装 一.环境准备 安装包: 1.VMware-workstation-full-11.1.0-2496824.exe 2.CentOS-7-x86_64-DVD-1 ...

  3. nginx proxy_cache缓存详解

    目录 1. 关于缓冲区指令 1.1 proxy_buffer_size 1.2 proxy_buffering 1.3 proxy_buffers 1.4 proxy_busy_buffers_siz ...

  4. thrift服务端到客户端开发简单示例

    (1)首先我们在服务器端写个helloworld.thrift文件,如下所示: service HelloWorld{ string ping(1: string name), string getp ...

  5. 接口测试工具postman(二)创建新项目

    1.此次添加一个request,可以点击左上角的New的下拉选择Request,或者点击New弹出选项框点击Request 2.弹出新增request页面 3.添加请求的参数等 4.也可以直接添加新请 ...

  6. python学习总结------邮件与短信

    邮件发送 - 简介: - 邮件服务器.用户名.密码 - 相关协议: - SMTP:简单邮件传输协议 - POP3:邮局通讯协议 - IMAP:交互式邮件存取协议 - SMTP协议默认端口是25 - 用 ...

  7. Python网络编程(线程通信、GIL、服务器模型)

    什么是进程.进程的概念? 进程的概念主要有两点: 第一,进程是一个实体.每一个进程都有它自己的地址空间, 一般情况下,包括文本区域(text region).数据区域(data region)和堆栈( ...

  8. NO11——01背包

    # include <stdio.h> # include <stdlib.h> # include <string.h> # define max(x,y) x& ...

  9. java面笔准备

    这套面试题主要目的是帮助那些还没有java软件开发实际工作经验,而正在努力寻找java软件开发工作的朋友在笔试时更好地赢得笔试和面试.由于这套面试题涉及的范围很泛,很广,很杂,大家不可能一天两天就看完 ...

  10. lintcode-76-最长上升子序列

    76-最长上升子序列 给定一个整数序列,找到最长上升子序列(LIS),返回LIS的长度. 说明 最长上升子序列的定义: 最长上升子序列问题是在一个无序的给定序列中找到一个尽可能长的由低到高排列的子序列 ...