Pjax是啥?
Pjax = history.pushState + Ajax = history.pushState + Async JS + XML(xhr"color: #ff0000">PJAX效果通过url可以跟踪ajax的动态加载内容。这种技术尤其在two step view布局的视图中有很大的好处。无刷新加载页面,意味着响应速度和用户体验得到了极大的提升,在静态脚本和通用模块比较多的情况下,最大程度上节省了重用部分的开销。应用例子可以参考现在的google+、facebook和新版微博,同样是基于html5的pushState实现。google plus的表现最为明显,点击导航栏地址,箭头随目标移动,同时加载的页面淡入,效果很炫。
Dirty url 和 Clean url
在pjax出现之前,要实现页面的无刷新加载并通过url可以追踪,需要浏览器支持window.location.hash属性。通过判断url#锚后记录的地址来决定需要加载的内容,具体的构建方法是写一个hashchange的监视函数,当触发到hash改变时便判断加载内容。它的不足在于,对于低版本的浏览器例如ie6不支持hash,需要另外构建一个iframe来记录历史url实现前进和后退。最大的问题,便是#后生成的内容不会被搜索引擎索引到,google之前提供了解决方案,提倡使用#!把地址引导到一个"_blank" href="https://github.com/defunkt/jquery-pjax">https://github.com/defunkt/jquery-pjax
3. PHP项目代码(方便分享,本文使用yii框架演示,实际开发中大同小异)
一.前端实现
使用实在简单,而且jquery-pjax这个插件封装得很好,绝对可以按照你的喜好来定制(例如复制g plus的效果),下面是一个整合以上步骤的基本html示例代码:
<"nav"> <a href="<">article</a> </div> <div id="main">替换的内容</div> <script type="text/javascript"> $(document).ready(function(){ $("#main").pjax("a"); }); </script>最终的目的,就是点击a标签时,通过ajax返回的结果将id为main的div内的文字替换为相应的地址内容,url自动更新,同时页面不会重新载入。下面开始实现后端要处理的内容
二.PHP端的实现
php端需要处理的任务主要是两件:1.实现layout视图布局 2.判断pjax过来的请求
Yii框架中的实现:
在控制器中对action做如下处理(以Article的index为例):
public function actionIndex() { $this->layout = '//layouts/column1'; $dataProvider = new CActiveDataProvider('Article', array( 'criteria' => array('order' => 'create_time DESC') )); if (array_key_exists('HTTP_X_PJAX', $_SERVER) && $_SERVER['HTTP_X_PJAX']) { $this->renderPartial('index', array( 'dataProvider' => $dataProvider, )); } else { $this->render('index', array( 'dataProvider' => $dataProvider, )); } }效果演示图:
点击article链接或者文章链接后都会出现如下效果页面:
--------------------------------------
jquery-pjax使用中需要注意的事项:
1.返回的模版内容不能为纯文本,需要用html标签包裹
2.插件的使用方法,详情参考github的项目说明,更新后使用方法或有不同
3.对于不支持pushstate的低版本浏览器,pjax插件会自动判断并使用传统的页面加载模式
4.当一个页面的pjax请求时间超过设定时间时,会使用刷新来加载,需要调整插件内的相关参数
本文内容就全部叙述完了,希望对大家学习pjax(pushstate+ajax)有所帮助。
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
更新日志
- 凤飞飞《我们的主题曲》飞跃制作[正版原抓WAV+CUE]
- 刘嘉亮《亮情歌2》[WAV+CUE][1G]
- 红馆40·谭咏麟《歌者恋歌浓情30年演唱会》3CD[低速原抓WAV+CUE][1.8G]
- 刘纬武《睡眠宝宝竖琴童谣 吉卜力工作室 白噪音安抚》[320K/MP3][193.25MB]
- 【轻音乐】曼托凡尼乐团《精选辑》2CD.1998[FLAC+CUE整轨]
- 邝美云《心中有爱》1989年香港DMIJP版1MTO东芝首版[WAV+CUE]
- 群星《情叹-发烧女声DSD》天籁女声发烧碟[WAV+CUE]
- 刘纬武《睡眠宝宝竖琴童谣 吉卜力工作室 白噪音安抚》[FLAC/分轨][748.03MB]
- 理想混蛋《Origin Sessions》[320K/MP3][37.47MB]
- 公馆青少年《我其实一点都不酷》[320K/MP3][78.78MB]
- 群星《情叹-发烧男声DSD》最值得珍藏的完美男声[WAV+CUE]
- 群星《国韵飘香·贵妃醉酒HQCD黑胶王》2CD[WAV]
- 卫兰《DAUGHTER》【低速原抓WAV+CUE】
- 公馆青少年《我其实一点都不酷》[FLAC/分轨][398.22MB]
- ZWEI《迟暮的花 (Explicit)》[320K/MP3][57.16MB]