公司网站数媒设计制作,推广文案撰写,app小程序网站开发,北京网站制作官网PJAX 介绍 红薯 发布于 2012/04/11 22:06阅读 61K收藏 116评论 11jQuery.Pjax kissy开发四年只会写业务代码#xff0c;分布式高并发都不会还做程序员#xff1f;- 介绍 pushState是一个可以操作history的api#xff0c;该api的介绍和使用请见这里#xff1a…PJAX 介绍 红薯 发布于 2012/04/11 22:06 阅读 61K 收藏 116 评论 11 jQuery.Pjax kissy 开发四年只会写业务代码分布式高并发都不会还做程序员- 介绍 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技术。 同时支持了缓存和本地存储下次访问的时候直接读取本地数据无需在次访问。 并且展现方式支持动画技术可以使用系统自带的动画方式也可以自定义动画展现方式。 如何使用 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组件。 qwrap见 https://github.com/jkisjk/qwrap 对应的ajax组件见 https://github.com/jkisjk/qwrap/tree/master/resource/js/wagang/ajax 或者你直接引用我打包好的 http://www.welefen.com/wp-content/themes/gplus/js/qwrap.js 由于我的空间速度不咋地建议你另存为。 QW.pjax(selector: a,container: #container,cache: true, storage: true, titleSuffix: , filter: function(){}, callback: function(){} }) kissy版 kissy版需要在页面引入kissy。 kissy见 http://docs.kissyui.com/ 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函数进行过滤了。如 {fitler: function(href){//对于wordpress后台的URL和wp-content里的URL不使用pjaxif(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]; } 其他 实际上该类的封装借鉴于https://github.com/defunkt/jquery-pjax 对其增加了缓存、本地存储和动画等功能并且将一些参数进行了优化。 转载于:https://www.cnblogs.com/feiwenstyle/p/10893396.html
