java pjax_GitHub - szyjava/pjax: ajax + history.pushState = pjax
介绍
pjax是对ajax + pushState的封装,让你可以很方便的使用pushState技术。
同时支持了缓存和本地存储,下次访问的时候直接读取本地数据,无需在次访问。
并且展现方式支持动画技术,可以使用系统自带的动画方式,也可以自定义动画展现方式。
如何使用
jquery版
将jquery.pjax.js部署到你的页面中,将需要使用pjax的a链接进行绑定(不能绑定外域的url),如:
$.pjax({
selector: 'a',
container: '#container', //内容替换的容器
show: 'fade', //展现的动画,支持默认和fade, 可以自定义动画方式,这里为自定义的function即可。
cache: true, //是否使用缓存
storage: true, //是否使用本地存储
titleSuffix: '', //标题后缀
filter: function(){},
callback: function(){}
})
qwrap版
qwrap版需要在页面引入qwrap和对应的ajax组件。
QW.pjax(
selector: 'a',
container: '#container',
cache: true,
storage: true,
titleSuffix: '',
filter: function(){},
callback: function(){}
})
kissy版
kissy版需要在页面引入kissy。
KISSY.pjax(
selector: 'a',
container: '#container',
cache: true,
storage: true,
titleSuffix: '',
filter: function(){},
callback: function(){}
})
由于kissy核心没有引用sizzle, 只支持一些简单的selector, 所以selector参数的值最好只为a, 对于一些不使用pjax的链接,可以通过filter函数参数进行过滤,具体的使用方法见下面的参数说明。
参数及含义
=== options.selector
给哪些selector绑定pjax事件,一般的为:"a", 如果要去掉一些外连的URL, 这里的selector可以为: "a[href^='http://www.welefen.com']"
,表示域名是www.welefen.com下才有pjax事件(也就是站内)。
=== options.container
内容变换容器,是指哪个容器里的内容发生的变换,如: '#content',
=== options.cache
缓存pjax的内容,对于更新不频繁的页面来说,缓存pjax内容可以减少HTTP请求数
options.cache的值是缓存时间,单位为秒,默认为: 24*3600(一天)
=== options.storage
是否使用本地存储进行内容的缓存,使用本地存储缓存的话即使关闭浏览器后,下次访问如果缓存时间有效的话会直接读取缓存的内容,避免重新请求了。
=== options.titleSuffix
标题后缀。
对于pjax显示标题,首先会从返回内容里查找,如果没有的话,会取当前a标签的title值,并可以指定统一的后缀
=== options.filter
过滤函数,虽然options.selector可以写个比较复杂的选择器,但有时候还要过滤一些URL,如:后台的URL。
这时候就可以使用options.filter函数进行过滤了。如:
{
filter: function(href){
//对于wordpress后台的URL和wp-content里的URL不使用pjax
if(href.indexOf('/wp-admin') || href.indexOf('/wp-content')){
return true;
}
}
}
对于要过滤掉的URL, 需要返回值为true。
=== options.callback
回调函数,这个函数不同于pjax.start和pjax.end(这2个事件下面描述)事件。
该函数会在每个阶段都会执行,即使pjax发生error的时候,并且会传递一个参数标明当前的状态,如:
{
callback: function(status){
var type = status.type;
switch(type){
case 'success': ;break; //正常
case 'cache':;break; //读取缓存
case 'error': ;break; //发生异常
case 'hash': ;break; //只是hash变化
}
}
}
事件(events)
一般情况下使用ajax来获取数据的时候,我们都希望有个loading的效果,pjax本身不提供这个功能,但提供了2个相关的事件。
如果需要这样的功能,可以在事件里实现这种功能。
pjax.start 在pjax ajax发送request之前调用
pjax.end 在phax ajax结束时调用
这样你可以在pjax.start事件里显示loading效果,在pjax.end事件里隐藏loading了。如:
$('#container').bind('pjax.start', function(){
$('#loading').show();
})
$('#container').bind('pjax.end', function(){
$('#loading').hide();
})
浏览器支持
提供了history.pushState接口的浏览器才支持这个功能
如果浏览器不支持这个功能而调用pjax方法的话,实际上什么都没做,还是使用默认的链接响应机制
后端需要做的
类似于ajax, 异步请求的时候后端不能将公用的内容也返回。
所以需要一个判断是否pjax请求的接口。如:php可以借鉴下面的实现
function is_pjax(){
return array_key_exists('HTTP_X_PJAX', $_SERVER) && $_SERVER['HTTP_X_PJAX'];
}
其他
对其增加了缓存、本地存储和动画等功能,并且将一些参数进行了优化。
java pjax_GitHub - szyjava/pjax: ajax + history.pushState = pjax相关推荐
- ajax与HTML5 history pushState/replaceState实例
一.本文就是个实例展示 三点: 我就TM想找个例子,知道如何个使用,使用语法什么的滚粗 跟搜索引擎搞基 自己备忘 精力总是有限的,昨天一冲动,在上海浦东外环之外订了个90米的房子,要借钱筹首付.贷款和 ...
- 使用ajax和history.pushState无刷新改变页面URL
HTML5里引用了新的API,history.pushState和history.replaceState,就是通过这个接口做到无刷新改变页面URL的. 与传统的AJAX的区别 传统的ajax有如下的 ...
- Javascript history pushState onpopstate方法做AJAX SEO
参考MDN: https://developer.mozilla.org/zh-CN/docs/DOM/Manipulating_the_browser_history https://develop ...
- ajax怎么找回地址栏,使用ajax和window.history.pushState无刷新改变页面内容和地址栏URL...
HTML5里引用了新的API,就是history.pushState和history.replaceState,就是通过这个接口做到无刷新改变页面URL的. 与传统的AJAX的区别 传统的ajax有如 ...
- 使用ajax和window.history.pushState无刷新改变页面内容和地址栏URL
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" ...
- php pjax案例,基于jquery.pjax实现Pjax效果详解
pjax是对ajax + pushState的封装,ajax大家应该都明白,就是使用xmlhttprequest对象与服务端进行交换数据,pushState是一个可以操作history的api.说白了 ...
- pjax php demo,jQuery pjax 应用简单示例
pjax 是一个jQuery插件,它使用 ajax 和 pushState 来实现快速的浏览体验,包括真正的固定链接,页面标题和工作返回按钮. ajax缺点是破坏了浏览器的前进后退,因为ajax的请求 ...
- 通过history.pushState无刷新改变url
背景 在浏览器中改变地址栏url,将会触发页面资源的重新加载,这使得我们可以在不同的页面间进行跳转,得以浏览不同的内容.但随着单页应用的增多,越来越多的网站采用ajax来加载资源.因为异步加载的特性, ...
- history.pushState() 给网站添加和修改浏览历史记录
假设一个使用场景: 后台管理系统项目,左右固定布局.左侧是通用布局,右侧页面是通过ajax切换的 当我们切换菜单后,想返回上一页,通常点击浏览器自带的回退.会发现回退的不是上一页,而是最开始打开这个项 ...
最新文章
- 应用PlanAhead进行I/O规划
- IBM拓展云数据分析服务 用户来“做主”
- 框架:Hibernate和Mybatis的区别
- Linux下Tomcat的启动、关闭
- nginx 源码学习笔记(十八)—— ngx_add_inherited_sockets 继承的sockets
- ubuntu系统和ROS系统的版本对应关系
- HDU.5909.Tree Cutting(树形DP FWT/点分治)
- JavaScript对数组的处理(一)
- Linux shell 脚本中”21″的含义解释
- 51nod-1422:沙拉酱前缀
- Nginx系列(4):Web服务器分析(理论上)
- 统计自然语言处理(第二版)学习笔记:第一章
- 计算机组策略无法编辑,win7系统无法打开本地组策略编辑器的解决方法
- 请求服务器获取微信openid,Golang通过小程序获取微信openid的方法示例
- 论window10如何获得最高权限
- csgo控制台所有代码飞天_CSGO控制台指令汇总
- 苹果手机换品胜电池后还能保持峰值状态吗?
- 思科警告:旗下某些产品可能存在无法修补的WannaCrypt漏洞
- css+div实现导航栏
- GITHUB下载慢解决办法-插件解决
热门文章
- 魅蓝x android,魅蓝X怎么样?魅蓝X好用吗?
- 奢侈品电商的高效沟通之道
- Alpine、Busybox、Distroless 三分天下,谁才是容器基础镜像的真正王者?
- linux sh 运行命令,linux shell运行命令详解
- spring中@Qualifier注解的使用
- 2014年2月份第4周51Aspx源码发布详情
- 前端实现图片悬浮_css-transition和transform实现图片悬浮移动动画
- Android 实现 IOS相机滑动控件
- SVN 安装参考步骤
- C/C++语言 String转long long 和int转string