PushState+Ajax 完美实现无刷新
转载自:http://lazynight.me/1897.html
折腾一下PJAX,利用HTML5的新API,实现历史记录的完美导入。
不知道你用没用过Github,里边的目录跳转就是用html5的pushstate做的,效果很酷。
还有一个关于web知识的宣传网站,http://www.20thingsilearned.com/en-US
你可以完美的前进后退,并且可以与好友分享特定页面,实现方法?不用我说了吧。
实现PJAX只需要以下几点:
pushState(state,– Add one history state into browser history and update the URL in the browser window
title, url)replaceState(state,– operates exactly like history.pushState() except that replaceState() modifies the current history entry instead of creating a new one.
title, url)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 完美实现无刷新的更多相关文章
- nodejs利用ajax实现网页无刷新上传图片
nodejs利用ajax实现网页无刷新上传图片 标签(空格分隔): nodejs 通常情况下上传图片是要通过提交form表单来实现的,但是这又不可避免的产生了网页转. 利用ajax技术和FormDat ...
- 本篇文章主要是对jquery+ajax+C#实现无刷新操作数据库数据的简单实例进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助
我们知道同步执行和异步执行的区别,为了更好的提高用户的体验,我们都会采用异步方式去处理一些问题,毕竟单线程的同步可能回造成卡死等现象,很不友好,所以可以使用ajax来完成用户的体验,现在我们就来说说如 ...
- ajax完成list无刷新返回
ajax完成list无刷新返回 ajax无刷新技术总结,以下是一段我写的ajax应用的js脚本.其中提交的data刚开始我采用的是$('#formId').serialize();但是出现乱码问题,为 ...
- HTML5新api即pushState和replaceState实现无刷新修改url
1,首先我面临一个需求,页面回退时需要知道来之前的页面状态.很简单,回退时在url里赋参数即可.问题是在ipad上,回退按钮是安卓那边的,我控制不了.只好采用js无刷新修改url历史记录,来告诉服务器 ...
- HTTP与AJAX深入揭秘,不使用AJAX实现页面无刷新
AJAX的原理是什么? 实际上就是发起HTTP请求,既然就是发起HTTP请求,那只要我们能够实现发起HTTP请求就可以在不使用AJAX的情况下实现相同的效果. 在前端有好多方式可以发起HTTP请求,比 ...
- jquery+ajax(用ajax.dll)实现无刷新分页
利用ajax.dll那种方式的无刷新,在这就不说了,新朋友可以看下我的另一片文件http://www.cnblogs.com/dachuang/p/3654632.html 首先,这里用的是jquer ...
- Ajax+Asp.Net无刷新分页
1.新建解决方案,并建立四个项目BLL,DAL,Model,PagerTest,如图所示: 2.Model代码 using System; using System.Collections.Gener ...
- ASP.NET Ajax简单的无刷新分页
最近练习了一些AJAX无刷新分页,写得比较简单,性能不知道怎么样,求大神指点,如有更好的分页提供,欢迎交流! 发话不多说了,直接上代码! 首先从网上下了一个JS分页,感觉挺好用的 (function( ...
- jQuery+AJAX实现网页无刷新上传
新年礼,提供简单.易套用的 jQuery AJAX上传示例及代码下载.后台对文件的上传及检查,以 C#/.NET Handler 处理 (可视需要改写成 Java 或 PHP). 有时做一个网站项目 ...
随机推荐
- vuejs中的计算属性和监视
计算属性 1.在computed属性对象中定义计算属性的方法,在页面上使用{{方法名}}来显示计算结果 2.通过getter/setter实现对属性数据的显示和监视 3.计算属性存在缓存,多次读取只执 ...
- LeetCode:7. Reverse Integer(Easy)
题目要求:将给出的整数进行逆序输出 注意:整数的最大范围-2147483648-2147483647,当翻转后的数超出范围后返回0 思路:对给出的整数除以10,取余和取整:然后对取整部分继续取余和取整 ...
- Delphi实例之橡皮筋画图的实现
Delphi实例之橡皮筋画图的实现 在<Delphi7基础教程>这本书的练习中提到过一个橡皮筋画图的例子,书上的源码是错误的!不知道是打印的错误还是本身源码就有问题,我将它改了过来. 在F ...
- IDA动态调试SO文件
1. 所需工具 IDA Pro 6.6. 安卓SDK工具 2. 模拟器设置 将ida所在目录的dbgsrv文件夹内的android_server文件push到模拟器中. 设置777属性 启动调试服务器 ...
- React开发时候注意点
JSX 使用jsx的使用,用一个{}包裹起来,例如 const method = {<div> 123 </div>} 使用()小括号,防止分号自动插入 const eleme ...
- 孤荷凌寒自学python第七十四天开始写Python的第一个爬虫4
孤荷凌寒自学python第七十四天开始写Python的第一个爬虫4 (完整学习过程屏幕记录视频地址在文末) 今天在上一天的基础上继续完成对我的第一个代码程序的书写. 直接上代码.详细过程见文末屏幕录像 ...
- 链上链下交互 以太坊Dapp接口开发
主要是指的是用NodeJs调用 提供接口供前端使用 用户查询和转账 以太坊Dapp项目 众筹项目 功能需求 路人 查看所有众筹项目, 2 @ OK 根据众筹项目的address获取该众筹的详情 (参与 ...
- python完成简单购物功能
# # -*- coding: utf8 -*- # # Author:wxq # # date:2017/11/13 # # python 3.6 # 创建一个商品列表: product_lis = ...
- Spring 学习笔记(八)—— 注解使用整合
@Autowired —— 自动装配 需先在配置文件中,配置一个org.springframework.beans.factory.annotation. AutowiredAnnotationBe ...
- 【iOS开发】多线程下NSOperation、NSBlockOperation、NSInvocationOperation、NSOperationQueue的使用
http://blog.csdn.net/crycheng/article/details/21799611 本篇文章主要介绍下多线程下NSOperation.NSBlockOperation.NSI ...