pjax技术初识与基本运用~
首页 > 后端开发   作者: 凌波  2016-7-19 22:57:56  热度:5688°  字号:   评论:
时间:2016-7-19 22:57:56   热度:5688°  评论:  

在耳闻这个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插件里面去了,这样得以解决了问题!



 您阅读这篇文章共花了: 
捐赠支持:如果觉得这篇文章对您有帮助,请“扫一扫”鼓励作者!
二维码加载中...
本文作者: 凌波      文章标题: pjax技术初识与基本运用~
本文地址:http://www.lingbohome.com/Article/Post/22
版权声明:若无注明,本文皆为“凌波小屋”原创,转载请保留文章出处。

发表吐槽

返回顶部    首页    大事记   动态    捐赠支持    后花园   
版权所有:Copyright ©2016 凌波小屋 All rights All rights reserved    站长: 凌波       程序:.Net Mvc   鄂ICP备 15003636号-1