通过pjax实现无刷新翻页(兼容新版jquery)


Posted in Javascript onJanuary 31, 2014

pushState是一个可以操作history的api,该api的介绍和使用请见这里:http://www.welefen.com/use-ajax-and-pushstate.html

目前已经有http://github.com/, http://plus.google.com, http://www.welefen.com 等网站已经使用。

pjax是对ajax + pushState的封装,让你可以很方便的使用pushState技术。

同时支持了缓存和本地存储,下次访问的时候直接读取本地数据,无需在次访问。

并且展现方式支持动画技术,可以使用系统自带的动画方式,也可以自定义动画展现方式。

关于pjax这里就不多介绍了,简单易用,轻松地实现部分刷新,告别链接带来的闪烁。
之前看过pjax并实现了demo,还写了篇笔记,不过jquery 1.9把live()方法删掉了,新版pjax也随之换了用on()方法实现,最近项目有用到,所以了解了新的使用方法,这里也做一个新的笔记。

环境:
jquery 1.10.2 下载
jquery.pjax.js 下载

使用方法:
监控所有class为pjaxlink的链接,采用pjax更新链接页面中id为ToInsert的容器内容到本页面中id为Content的容器中。若获取内容时间超过5秒,则直接跳转:

$(document).pjax('a.pjaxlink', '#Content', {fragment:'#ToInsert', timeout:5000});

使用实例:
原始页面是通过跳转的翻页,我在不改变页面内容的前提下,使用pjax监控翻页链接,仅更新列表(保证列表容器是分页容器的父节点)的内容。

if ($.support.pjax) {
    //遍历所有分页容器
    $('.pagercontainer').each(function(){
        //取得列表容器
        $listcontainer=$(this).parent();
        //取得列表容器的ID
        var listcontainerid=$listcontainer.attr('id');
        //用pjax监控所有分页链接并定义pjax来实现更新
        $(document).pjax('#'+listcontainerid+' .pagercontainer a', '#'+listcontainerid, {fragment:'#'+listcontainerid, timeout:5000});
    });
    $(document).on('pjax:send', function() {
        //在pjax发送请求时,显示loading动画层
        $('#loading').show();
    });
    $(document).on('pjax:complete', function() {
        //在pjax处理完成后,隐藏loading动画层
        //由于速度太快会导到loading层闪烁,影响体验,所以在此加上500毫秒延迟
        setTimeout(function(){$('#loading').hide()},500);
    });
}
Javascript 相关文章推荐
Add a Picture to a Microsoft Word Document
Jun 15 Javascript
javascript 面向对象思想 附源码
Jul 07 Javascript
js 对联广告、漂浮广告封装类(IE,FF,Opera,Safari,Chrome
Nov 26 Javascript
jQuery函数的等价原生函数代码示例
May 27 Javascript
jQuery中dequeue()方法用法实例
Dec 29 Javascript
JavaScript中 this 指向问题深度解析
Feb 21 Javascript
从零开始学习Node.js系列教程四:多页面实现数学运算的client端和server端示例
Apr 13 Javascript
JavaScript数组排序reverse()和sort()方法详解
Dec 24 Javascript
利用vscode调试编译后的js代码详解
May 14 Javascript
利用原生JS实现data方法示例代码
May 28 Javascript
node.js域名解析实现方法详解
Nov 05 Javascript
用webAPI实现图片放大镜效果
Nov 23 Javascript
jquery 页面滚动到底部自动加载插件集合
Jan 31 #Javascript
基于JQuery实现滚动到页面底端时自动加载更多信息
Jan 31 #Javascript
让input框实现类似百度的搜索提示(基于jquery事件监听)
Jan 31 #Javascript
js实现俄罗斯方块小游戏分享
Jan 31 #Javascript
获取select元素被选中的文本内容的js代码
Jan 29 #Javascript
使用POST方式弹出窗口的两种方法示例介绍
Jan 29 #Javascript
qq悬浮代码(兼容各个浏览器)
Jan 29 #Javascript
You might like
PHP中动态显示签名和ip原理
2007/03/28 PHP
php将textarea数据提交到mysql出现很多空格的解决方法
2014/12/19 PHP
PHP解压ZIP文件到指定文件夹的方法
2016/11/17 PHP
Javascript基础教程之JavaScript语法
2015/01/18 Javascript
js的toUpperCase方法用法实例
2015/01/27 Javascript
js实现的黑背景灰色二级导航菜单效果代码
2015/08/24 Javascript
JavaScript计划任务后台运行的方法
2015/12/18 Javascript
Vue.js学习笔记之 helloworld
2016/08/14 Javascript
BootStrap栅格系统、表单样式与按钮样式源码解析
2017/01/20 Javascript
源码分析Vue.js的监听实现教程
2017/04/23 Javascript
Easyui和zTree两种方式分别实现树形下拉框
2017/08/04 Javascript
简述JS控制台的使用
2018/07/15 Javascript
React-router4路由监听的实现
2018/08/07 Javascript
vue新建项目并配置标准路由过程解析
2019/12/09 Javascript
pygame学习笔记(4):声音控制
2015/04/15 Python
Python中对象迭代与反迭代的技巧总结
2016/09/17 Python
详解Python自建logging模块
2018/01/29 Python
django之跨表查询及添加记录的示例代码
2018/10/16 Python
selenium+python自动化测试环境搭建步骤
2019/06/03 Python
python简单区块链模拟详解
2019/07/03 Python
python用match()函数爬数据方法详解
2019/07/23 Python
用python爬取历史天气数据的方法示例
2019/12/30 Python
45个非常奇妙的CSS3 特性应用示例
2012/01/01 HTML / CSS
中海讯通笔试题
2015/09/15 面试题
安全生产实施方案
2014/02/23 职场文书
舞蹈专业大学生职业规划范文
2014/03/12 职场文书
专项法律服务方案
2014/06/11 职场文书
办公室班子四风问题对照检查材料
2014/10/04 职场文书
教师思想作风整顿个人剖析材料
2014/10/10 职场文书
情人节活动总结范文
2015/02/05 职场文书
爱牙日宣传活动总结
2015/02/05 职场文书
病人慰问信范文
2015/02/15 职场文书
2015年教师党员自我评价材料
2015/03/04 职场文书
2015年行政工作总结范文
2015/04/09 职场文书
html5移动端禁止长按图片保存的实现
2021/04/20 HTML / CSS
MySQL之MyISAM存储引擎的非聚簇索引详解
2022/03/03 MySQL