pjax技术简述

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区别：

1. pjax = pushState+AJAX
2. ajax无法修改url，不利于seo
3. PJAX可以在局部更新页面内容的同时也改变浏览器URL
4. 一般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