转载自: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. mysql用命令创建用户创建数据库设置权限

     1.create database bbs; //创建数据库 2.create user bbs IDENTIFIED by 'bbs';  //创建用户bbs和登录密码bbs 3.grant AL ...

  2. 初步学习pg_control文件之十二

    接前问,初步学习pg_control文件之十一,再来看下面这个 XLogRecPtr minRecoveryPoint; 看其注释: * minRecoveryPoint is updated to ...

  3. .NET基础知识之八——深拷贝,浅拷贝

    目录 1.概念 2.使用赋值符号"=" 3.浅复制 4.深复制 5.问题一:如果类里面嵌套有多个类,然后嵌套类里面又嵌套类,那么像上面实现深拷贝的方法还能用吗? 6.问题二:实现深 ...

  4. jq 一个强悍的json格式化查看工具

    本文来自网易云社区 作者:娄超 在web 2.0时代json这种直观.灵活.高效数据格式基本已经成为一种标准格式,从各种web api,到配置文件,甚至现在连mysql都开始支持json作为数据类型. ...

  5. jmeter使用beanshell构造参数化

    1.先在本地写一个java类,用来随机生成一个数字,如: package com.jmeter.test; public class BeanShellTest { public int getRan ...

  6. log报错: Caused by: java.sql.SQLException: An attempt by a client to checkout a Connection has timed out.

    报错: 解决方式: 1.登录数据库查看错误原因 结果发现账号无法正常登录出现账号被锁定的错误. 2.如何账号解锁? 用sys系统管理员账号登录数据库 SQL> alter user 用户名 ac ...

  7. 【题解搬运】PAT_L1-009 N个数求和

    从我原来的博客上搬运.原先blog作废. (伪)水题+1,旨在继续摸清这个blog(囧 题目 就是求N个数字的和.麻烦的是,这些数字是以有理数"分子/分母"的形式给出的,你输出的和 ...

  8. Qt 汽车仪表再次编写,Widget,仪表显示,绘制界面

    感谢某网友提供UI让我练练手,上目前的效果 还在晚上,代码等后面在贴出来,就是出来显摆一下

  9. selenium自动化登录qq网页

    一个简单的登录网页上qq的脚本,通过此脚本了解到有些位置是无法通过xpath来定位的反倒是By定位更方便 #encoding=utf-8 from selenium import webdriver ...

  10. 九度OJ--Q1168

    import java.util.Scanner; public class q1168 { public static void main(String[] args) { Scanner scan ...