pjax技术简述
来源:互联网 发布:php 策略模式 编辑:程序博客网 时间:2024/05/24 15:36
pjax是一个jQuery插件,结合ajax和pushState,能够快速的实现页面刷新和url修改。页面a链接和表单提交都能触发pjax请求,服务器返回请求的html片段,局部替换页面内容同时把url推送到历史记录中,有效降低了负载。
PJAX的基本思路是,用户点击一个链接,通过ajax更新页面变化的部分,然后使用HTML5的pushState修改浏览器的URL地址,这样有效地避免了整个页面的重新加载。
一、实现基础
1.在HTML4,Histroy对象有下面属性方法:
length:历史堆栈中的记录数。
back():返回上一页。
forward():前进到下一页。
go([delta]):delta是个数字,如果不写或为0,则刷新本页;如果为正数,则前进到相应数目的页面;若为负数,则后退到相应数目的页面。
2.在HTML5中,新增两个方法:
pushState(data, title [, url]):往历史堆栈的顶部添加一条记录。data为一个对象或null,它会在触发window的popstate事件(window.onpopstate)时,作为参数的state属性传递过去;title为页面的标题,但当前所有浏览器都忽略这个参数;url为页面的URL,不写则为当前页。
replaceState(data, title [, url]):更改当前页面的历史记录。参数同上。这种更改并不会去访问该URL。
二、ajax与pjax区别:
- pjax = pushState+AJAX
- ajax无法修改url,不利于seo
- PJAX可以在局部更新页面内容的同时也改变浏览器URL
- 一般ajax获取的是数据,由前台解析渲染,pjax获取的是html片段
三、pjax请求发送
在request headers中有以下项:
X-PJAX:true
X-PJAX-Container:#list-container //非必须
四、使用方法
<?php use yii\widgets\Pjax;?><?php Pjax::begin(); ?> Content that needs to be updated<?php Pjax::end(); ?>
可以配置pjax小部件,指定哪些链接使用pjax方式提交以及是否将新的url推送到历史记录中去,或者替换当前url等。
尤其适用于多选项卡切换的页面,也可用于GridView,ActiveForm等控件上,如下:
<?php Pjax::begin(); ?><?= GridView::widget([ 'dataProvider' => $dataProvider, 'filterModel' => $searchModel, 'columns' => [ ['class' => 'yii\grid\SerialColumn'], 'id', 'branch:ntext', ... ],]); ?><?php Pjax::end(); ?>
五、注意
1.如果begin和end之间有些链接不使用pjax,那么需要给链接设定属性data-pjax=”0”,例如:
<a data-pjax = "0" href=''></a>
2.如果不改变浏览器url,需要如下设置:
<?php Pjax::begin(['enablePushState' => false]); ?> Content that needs to be updated<?php Pjax::end(); ?>
引用资料:
http://blog.neattutorials.com/yii2-pjax-tutorial
http://www.yiiframework.com/doc-2.0/yii-widgets-pjax.html
- pjax技术简述
- Pjax
- pjax
- 语音识别技术简述
- Windows管道技术简述
- Windows管道技术简述
- Windows管道技术简述
- Windows管道技术简述
- 磁盘阵列RAID技术简述
- vpn 技术简述
- Windows管道技术简述
- ajax技术简述
- 伪静态技术简述
- 语音识别技术简述
- Windows管道技术简述
- Windows管道技术简述
- Windows管道技术简述
- 简述面向对象技术
- Java基础5——方法
- 23. Merge k Sorted Lists
- JS字符串函数String.replace()[转]
- 说话的智慧
- 使用openOrCreateDatabase()创建一个数据库
- pjax技术简述
- 微信小程序例子——实现button点击事件改变数据值
- JSP
- cocos2d-x-2.1.4如何创建新工程
- Java 集合中的三大新秀Map Set List的区别
- web网站的几个并发量级
- Android网络请求框架Volley学习
- json2学习笔记
- KMP字符串模式匹配算法实现