在耳闻这个pjax名词时,没百度之前,我以为它是个服务于播放器类的一项技术(之所以这样认为:是吧p理解成player了),而在通过了解百度之后,起初,对这项技术是带有点迷惑不解的认知,对于它的介绍,似乎很简单,就是对ajax与pushState(html5的新特性,操作浏览历史的。)的封装,它实现的效果,通俗来讲,就是实现页面跳转无刷新,与ajax一样,只请求我当前想要更新的区域,只不过pjax更新区域的同时更新了url,当然就是pushState发挥的作用了!
初识了这个技术后,也没有直接去自己写demo练练,就在脑子里寄存了一段时间,现在又进入了暑假的实训阶段,不曾想到“实训的项目”,让我多出了时间,正好抽出一点闲时间,直接把这个pjax技术应用到我的博客系统中去。
去如何使用它,pjax介绍里也提到特别简单,因为有别人封装好pjax,引用过来后,只需自己简单的配置下json项就ok了!
$.pjax({ selector: 'a',//对超链接进行pjax操作,支持选择器过滤 container: '#container', //内容替换的容器 show: 'fade', //展现的动画,支持默认和fade, 可以自定义动画方式,这里为自定义的function即可。 cache: true, //是否使用缓存 storage: true, //是否使用本地存储 titleSuffix: '', //标题后缀 filter: function(){},//过滤url callback: function(){}//回调函数 })
这样配置完成后,网站就可以支持pjax技术了,但是并不能达到想要的效果(仍然返回整个html网页),虽然pjax请求过去,请求标头打了个【X-PJAX】标记,但服务器端此时并不知情,
需要自己去request请求标头判断一下,再响应相应的数据。这样差不多大致能达到效果。
由于自己不想破环原页面(视图),就新建了个页面,这样就在后台判断跳转不同的页面就行了!
if (Request.Headers["X-PJAX"] == null) { return View(list); } else { return View("IndexPjax",list); }
不过仔细观察,还是有很多问题的,比如,要更新替换的#containe(区域。盒子div),里面有些需要页面加载完成才执行的js/jquey等代码方法,应用这个技术后,是执行不了的,很简单,
这时候思想需要转变一下,此页面在你第一次请求完成就已经加载完成,后来的pjax请求的更新,并不是刷新页面,所以就不存在再次页面加载完成的事件了。不过pjax有提供解决这个问题的
两个相关事件:
pjax.start 在pjax ajax发送request之前调用 ,
pjax.end 在phax ajax结束时调用
$('#container').bind('pjax.start', function(){ //执行的代码 }) $('#container').bind('pjax.end', function(){ //执行的代码 })
现在很多网站前端架构,都是实行统一布局,公用布局部分一般都放在母版页里,上面两个事件肯定是要写到母版页里,所以那里面顶多封装写公用执行的代码,
对于子页面要单独执行的,不可能每个都写在里面去!回过神来,依然还是要想其他办法解决pjax请求,页面加载代码的问题!!!最简单的办法,就是去掉页面加载事件,
直接把要执行的代码写在外面,不过这些js代码不能随便写,要写在html代码下面,这样问题就几乎解决的差不多了!
自己在使用中还遇到一个小问题,就是json配置项里有个过滤的filter项,里面的方法并没有得到执行,不知道是引用的插件本身问题,还是自己项目的问题,不过后来我把过滤那段代码直接pjax插件里面去了,这样得以解决了问题!
本文地址:http://www.lingbohome.com/Article/Post/22
版权声明:若无注明,本文皆为“凌波小屋”原创,转载请保留文章出处。
发表吐槽