jquery-pjax
PJAX 介绍

简介

Pjax 是一个 jQuery 插件，其作用是使用 ajax 来加速页面加载时间，工作原理是只从服务器获取指定 HTML 片段，然后客户端使用获取到的内容更新局部页面。

Laravel Pjax 扩展包将 Pjax 集成到 Laravel 中，实现原理是提供一个中间件，返回 Pjax 期望的响应内容。

安装

通过 Composer 安装扩展包：

$ composer require spatie/laravel-pjax

接下来需要在 Kernel.php 中注册中间件，这里我们将其注册到web中间件组：

// app/Http/Kernel.php
protected $middlewareGroups = [
    'web' => [
        ...
        \Spatie\Pjax\Middleware\FilterIfPjax::class,
    ],
    ...
];

使用

该扩展包提供的中间件会处理服务端返回的内容并将其转化为 Pjax 插件期望服务端返回的内容。

这里我们以 php artisan make:auth 命令生成的默认视图文件为例演示其使用，首先我们修改路由文件 routes.php：

Route::group(['middleware' => 'web'], function () {
    Route::get('/', function () {
        return view('welcome');
    });
    Route::get('/home', 'HomeController@index');
    Route::auth();
});

然后我们还需要修改默认布局文件 layouts/app.blade.php，添加 Pjax 设置：

<div class="main-content" id="pjax-container">
    @yield('content')
</div>

<!-- JavaScripts -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
{{-- <script src="{{ elixir('js/app.js') }}"></script> --}}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.pjax/1.9.6/jquery.pjax.min.js"></script>
<script>
    $(document).pjax('a', '#pjax-container');
    $(document).on("pjax:timeout", function(event) {
        // 阻止超时导致链接跳转事件发生
        event.preventDefault()
    });
</script>
</body>
</html>

这样我们就可以在浏览器中访问进行测试了：

你会发现在切换登录/注册按钮时页面不会发生跳转而直接进行刷新。

注：该扩展包会设置一个X-AJAX请求头以区别 pjax 请求和普通的 XHR 请求。在这种情况下，如果请求是 pjax，我们会跳过页面布局部分 HTML，只渲染页面主体部分内容。

Laravel 缓存失效

我们使用 Laravel Elixir 来管理前端缓存失效，你可以使用这种方法来让 Pjax 的缓存失效 —— 只需要引入
elixir 方法作为 x-pjax-version meta 的 content 即可：

<meta http-equiv="x-pjax-version" content="{{ elixir('css/app.css') }}">

如果是多个文件的话这使用：

<meta http-equiv="x-pjax-version" content="{{ elixir('css/app.css') . elixir('css/app2.css') }}">

这样的话，如果前端缓存失效，那么 Pjax 的缓存随之自动失效。

pjax说明

    $.pjax({
        selector: 'a',
        container: '#container', //内容替换的容器
        show: 'fade',  //展现的动画，支持默认和fade, 可以自定义动画方式，这里为自定义的function即可。
        cache: true,  //是否使用缓存
        storage: true,  //是否使用本地存储
        titleSuffix: '', //标题后缀
        filter: function(){},
        callback: function(){}
    })

参数及含义

=== options.selector
给哪些selector绑定pjax事件，一般的为："a", 如果要去掉一些外连的URL， 这里的selector可以为: "a[href^='[http://www.welefen.com']](http://www.welefen.com%27]/)"
，表示域名是www.welefen.com下才有pjax事件（也就是站内）。
=== options.container
内容变换容器，是指哪个容器里的内容发生的变换，如： '#content',
=== options.cache
缓存pjax的内容，对于更新不频繁的页面来说，缓存pjax内容可以减少HTTP请求数
options.cache的值是缓存时间，单位为秒，默认为: 24*3600(一天)
=== options.storage
是否使用本地存储进行内容的缓存，使用本地存储缓存的话即使关闭浏览器后，下次访问如果缓存时间有效的话会直接读取缓存的内容，避免重新请求了。
=== options.titleSuffix
标题后缀。
对于pjax显示标题，首先会从返回内容里查找，如果没有的话，会取当前a标签的title值，并可以指定统一的后缀
=== options.filter
过滤函数，虽然options.selector可以写个比较复杂的选择器，但有时候还要过滤一些URL，如：后台的URL。
这时候就可以使用options.filter函数进行过滤了。如：
 {
        fitler: function(href){
            //对于wordpress后台的URL和wp-content里的URL不使用pjax
            if(href.indexOf('/wp-admin') || href.indexOf('/wp-content')){
                return true;
            }
        }
    }
对于要过滤掉的URL， 需要返回值为true。
=== options.callback

回调函数，这个函数不同于pjax.start和pjax.end（这2个事件下面描述）事件。

该函数会在每个阶段都会执行，即使pjax发生error的时候，并且会传递一个参数标明当前的状态，如：
    {
        callback: function(status){
            var type = status.type;
            switch(type){
                case 'success': ;break; //正常
                case 'cache':;break; //读取缓存 
                case 'error': ;break; //发生异常
                case 'hash': ;break; //只是hash变化
            }
        }
    }

事件(events)

一般情况下使用ajax来获取数据的时候，我们都希望有个loading的效果，pjax本身不提供这个功能，但提供了2个相关的事件。
如果需要这样的功能，可以在事件里实现这种功能。

• pjax.start 在pjax ajax发送request之前调用
• pjax.end 在phax ajax结束时调用
  这样你可以在pjax.start事件里显示loading效果，在pjax.end事件里隐藏loading了。如：

  $('#container').bind('pjax.start', function(){
        $('#loading').show();
    })
    $('#container').bind('pjax.end', function(){
        $('#loading').hide();
    })

浏览器支持

提供了history.pushState接口的浏览器才支持这个功能
如果浏览器不支持这个功能而调用pjax方法的话，实际上什么都没做，还是使用默认的链接响应机制
后端需要做的
类似于ajax, 异步请求的时候后端不能将公用的内容也返回。
所以需要一个判断是否pjax请求的接口。如：php可以借鉴下面的实现

function is_pjax(){ return array_key_exists('HTTP_X_PJAX', $_SERVER) && $_SERVER['HTTP_X_PJAX']; }

其他

实际上该类的封装借鉴于https://github.com/defunkt/jquery-pjax
对其增加了缓存、本地存储和动画等功能，并且将一些参数进行了优化。

pjax禁用

方案1

// pjax禁用
$.pjax.disable()

方案2

// laravel-admin中不用pjax, 修改 `public/vendor/laravel-admin/laravel-admin/laravel-admin.js` 这个文件
$(document).pjax('a:not(a[target="_blank"],a[no-pjax])', {
    container: '#pjax-container'
});
// 然后所有带有`no-pjax`属性的a链接都不会用pjax加载
<a href='xxx' no-pjax>链接</a>

方案3

在 vendor\encore\laravel-admin\src 的 Admin.php 中添加

    /*
    * Disable Pjax for current Request
    *
    * @return void
    */
    public function noPjax()
    {
        $request = \Request::instance();
        if ($request->headers->has("X-PJAX")) {
            $request->headers->set("X-PJAX", false);
        }
    }

// 在用到pjax的控制器的方法里面加上

Admin::noPjax();