精华内容
参与话题
问答
  • PJAX 介绍

    千次阅读 2015-06-01 11:02:42
    介绍pushState是一个可以操作history的api,该api的介绍和使用请见这里:http://www.welefen.com/use-ajax-and-pushstate.html 目前已经有http://github.com/, http://plus.google.com, ...pjax是对ajax + pushState

    介绍

    pushState是一个可以操作history的api,该api的介绍和使用请见这里:http://www.welefen.com/use-ajax-and-pushstate.html
    目前已经有http://github.com/, http://plus.google.com, http://www.welefen.com 等网站已经使用。
    pjax是对ajax + pushState的封装,让你可以很方便的使用pushState技术。
    同时支持了缓存和本地存储,下次访问的时候直接读取本地数据,无需在次访问。
    并且展现方式支持动画技术,可以使用系统自带的动画方式,也可以自定义动画展现方式。

    如何使用

    jquery版

    将jquery.pjax.js部署到你的页面中,将需要使用pjax的a链接进行绑定(不能绑定外域的url),如:

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

    qwrap版
    qwrap版需要在页面引入qwrap和对应的ajax组件。
    qwrap见: https://github.com/jkisjk/qwrap
    对应的ajax组件见: https://github.com/jkisjk/qwrap/tree/master/resource/js/wagang/ajax
    或者你直接引用我打包好的: http://www.welefen.com/wp-content/themes/gplus/js/qwrap.js 由于我的空间速度不咋地,建议你另存为。

    QW.pjax(     
    selector: 'a',     
    container: '#container',     
    cache: true,     
    storage: true,     
    titleSuffix: '',     
    filter: function(){},     
    callback: function(){} 
    }) 

    kissy版

    kissy版需要在页面引入kissy。

    kissy见: http://docs.kissyui.c

    KISSY.pjax(
             selector: 'a', 
             container: '#container',         
             cache: true,         
             storage: true,         
             titleSuffix: '',         
             filter: function(){},         
             callback: function(){} 
             })

    kissy核心没有引用sizzle, 只支持一些简单的selector, 所以selector参数的值最好只为a, 对于一些不使用pjax的链接,可以通过filter函数参数进行过滤,具体的使用方法见下面的参数说明。

    参数及含义

    options.selector
    给哪些selector绑定pjax事件,一般的为:”a”, 如果要去掉一些外连的URL, 这里的selector可以为: “a[href^=’http://www.welefen.com‘]”
    ,表示域名是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 = pushState + ajax pjax is a jQuery plugin that uses ajax and pushState to deliver a fast browsing experience with real permalinks, page titles, and a working back button. pjax works by fetching ...
  • Pjax

    2020-11-24 16:21:56
    <div><p>pjax all!</p><p>该提问来源于开源项目:volantis-x/hexo-theme-volantis</p></div>
  • pjax

    千次阅读 2015-11-11 17:45:32
    https://github.com/defunkt/jquery-pjax http://leyteris.iteye.com/blog/1107597 http://my.oschina.net/sub/blog/123447 http://my.oschina.net/ekc/blog/81263 http://www.zhihu.com/question/20289


    简单点描述, 就是利用 ajax 技术去服务器获取文档, 在不刷新浏览器页面的情况下, 更新当前页面, 并且能保证页面的 js 和 css 等 assets 文件不会被重复加载, 然后利用浏览器提供的 pushState 功能, 对 URL 进行更新, 并能保证用户通过点击 back 按钮回溯到历史页面.

    注意: 并不是所有浏览器都支持 pushState, 关于浏览器的兼容请见这里, 当浏览器不兼容的时候, 会自动使用原始的浏览方式进行访问.

    由于只是刷新部分页面, 大部分的请求(css/js)都不会重新获取, 网站带有用户登录信息的外框部分都不需要重新生成了。 虽然我没有具体统计这部分的消耗, 我估计至少有40%以上的请求, 30%以上的服务器消耗被节省了。



    https://github.com/defunkt/jquery-pjax

    http://leyteris.iteye.com/blog/1107597

    http://my.oschina.net/sub/blog/123447

    http://my.oschina.net/ekc/blog/81263

    http://www.zhihu.com/question/20289254


    使用很简单,参考官方文档即可

    定义一个<div id="pjax-container"></div>容器,加上$(document).pjax('a', '#pjax-container',{timeout:5000});即可实现pjax功能,

    有时被加载的页面的JS会与当前页面冲突,造成失败,要慢慢调试。

    $.ajax 的 dataType : "html": 返回纯文本 HTML 信息;包含的script标签会在插入dom时执行。



    展开全文
  • Pjax支持

    2020-11-30 05:19:05
    script[pjax], #pjax script').forEach(element => { var code = element.text || element.textContent || element.innerHTML || ''; var parent = element.parentNode; parent....
  • TP3.1.3+Pjax Demo 实现无刷新改变URL的方式 Pjax相关原理及用法可以从下面的网站查看。 welefen版本:https://github.com/welefen/pjax defunkt版本:https://github.com/defunkt/jquery-pjax [Demo用的是这个] ...
    TP3.1.3+Pjax Demo 实现无刷新改变URL的方式
    Pjax相关原理及用法可以从下面的网站查看。
    welefen版本:https://github.com/welefen/pjax
    defunkt版本:https://github.com/defunkt/jquery-pjax [Demo用的是这个]

    支持Pjax功能的浏览器(HTML5):http://caniuse.com/#search=pushstate

    TP+Pjax Demo实现方法:


    ./Lib/Common.Action.class.php 【临时开启模板layout(true);的用法见:http://www.thinkphp.cn/info/183.html第三种方式】

        <?php
        class CommonAction extends Action {
            protected function render($data) {
                $this->assign('data', $data); //控制器传参到模板
                if (array_key_exists('HTTP_X_PJAX', $_SERVER) && $_SERVER['HTTP_X_PJAX']) {
                    $this->display(); //浏览器支持Pjax功能,直接渲染输出页面
                } else {
                    layout(true); //开启模板
                    $this->display(); //浏览器不支持Pjax功能或F5刷新页面,使用默认的链接响应机制(加载模板)
                }
            }
        }

    ./Lib/IndexAction.class.php (继承于CommonAction)

        <?php
        class IndexAction extends CommonAction {
            public function index()  {
                $data['name'] = 'ThinkPHP+Pjax Demo';
                $this->render($data);
            }
            public function about()  {
                $data['name'] = '测试传参。';
                $this->render($data);
            }
        }

    ./TPL/layout.html (模板中Pjax布署)

    <script type="text/javascript">
            $(document).ready(function(){
                $('#loading').hide(); //隐藏loading
            });
            $(document).pjax('a', '#pjax-container'); //内容替换的容器
            $(document).on('pjax:send', function() {
                $('#loading').show(); //显示loading
            });
            $(document).on('pjax:complete', function() {
                $('#loading').fadeOut(1000); //隐藏loading效果
            });
    </script>

    下载demo:

    http://www.thinkphp.cn/code/download/id/466.html

    另外补充一下bootstrap这个东西不错。


    展开全文
  • pjax_rails, Rails的PJAX集成 用于 Rails 3.2 的 PJAX 通过资产管道将 wanstrath PJAX的Chris 集成到 Rails 3.2 中。要激活,请将它的添加到 app/assets/javascripts/application.j
  • Pjax和jQuery

    2016-07-20 03:43:26
    <pre><code>$(document).on('ready pjax:beforeSend', function(event, options) { options['data'] = $('.fields-on-fly .form-control').serialize(); return $.pjax.click(event,'',options); }); </code></...
  • PJAX无法正常工作

    2012-04-27 17:16:57
    $('a[data-pjax]').pjax() </script> </head><body> <?php $header = "this is first part <br/> <a href='pjax2.php' data-pjax='main'>GO</a>"; $date = date("Y-m-d H:i:...
  • 添加 pjax 开关

    2020-11-27 10:27:56
    <ul><li>去掉了第一次进入网站时的加载动画</li><li>app.js 和 search.js 的 pjax 开关是使用 try 处理的(懒</li></ul>该提问来源于开源项目:volantis-x/hexo-theme-volantis</p></div>
  • Laravel和PJAX

    2015-10-02 18:31:37
    <p>I can't for the life of me get Pjax to work with Laravel. I've tried everything but the blade templating is screwing it up. When I don't use the blade templating I can get it to work. <p>What ...
  • pjax理解

    2019-07-07 18:01:40
    注: http://www.itkee.cn/topic-info-75.html https://fly.layui.com/jie/10956/ http://bsify.admui.com/jquery-pjax/?id=pjax-pushstate-ajax
    展开全文
  • pjax分页

    千次阅读 2014-05-08 13:05:00
    ajax的分页有一个小问题,就是点击浏览器的后退按钮不会起到作用,
  • pjax笔记

    千次阅读 2017-08-02 10:12:17
    首先 如果每个页面对应一个js ,使用引入,点击加载相应页面的时候加载对应js,需要把写在pjax container div内部,不然不会加载。@extends('home.announcement') @section('information') 。。。。。是html文档 ...
  • laravel pjax

    2019-03-04 22:12:59
    composerrequirespatie/laravel-pjax 第二步: 接下来需要在Kernel.php中注册中间件,这里我们将其注册到web中间件组: //app/Http/Kernel.php protected $middlewareGroups = [ 'web' =&gt; [ ......
  • pjax学习

    2019-05-20 11:56:00
    PJAX 介绍 红薯发布于 2012/04/11 22:06 阅读 61K+ 收藏116 评论11 jQuery.Pjaxkissy 开发四年只会写业务代码,分布式高并发都不会还做程序员?->>> 介绍 pushState是一个可以操作...
  • Pjax调用

    2015-11-02 17:11:00
    $.pjax({container:'#content_center',url:href,data:data}); $(document).on('pjax:send', function() {//pjax链接点击后显示加载动画; //显示动画 }); $(document).on('pjax:complete', function() {//...
  • PJAX技术

    2014-07-15 09:37:00
    为什么80%的码农都做不了架构师?>>> ...
  • PJAX实现

    2015-05-26 13:50:00
    在HTML4中,我们已经可以使用window.history对象来控制历史记录的跳转,可以使用的方法包括: 方法描述 back() 加载 history 列表中的前一个 URL。 forward() 加载 history 列表中的下一个 URL。 ...
  • pjax 笔记

    2017-09-30 01:07:00
    PJAX的基本思路是,用户点击一个链接,通过ajax更新页面变化的部分,然后使用HTML5的pushState修改浏览器的URL地址,这样有效地避免了整个页面的重新加载。如果浏览器不支持history的两个新API或者JS被禁用了,那这...

空空如也

1 2 3 4 5 ... 20
收藏数 775
精华内容 310
关键字:

pjax