pjax学习

2019年12月01日 阅读数:15
这篇文章主要向大家介绍pjax学习,主要内容包括基础应用、实用技巧、原理机制等方面,希望对大家有所帮助。

PJAX 介绍

红薯 发布于 2012/04/11 22:06
 
阅读 61K+
 
收藏  116
 

介绍

pushState是一个能够操做history的api,该api的介绍和使用请见这里:http://www.welefen.com/use-ajax-and-pushstate.htmljavascript

目前已经有http://github.com/http://plus.google.comhttp://www.welefen.com 等网站已经使用。php

pjax是对ajax + pushState的封装,让你能够很方便的使用pushState技术。css

同时支持了缓存和本地存储,下次访问的时候直接读取本地数据,无需在次访问。html

而且展示方式支持动画技术,能够使用系统自带的动画方式,也能够自定义动画展示方式。java

如何使用

jquery版

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

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

 

qwrap版

qwrap版须要在页面引入qwrap和对应的ajax组件。git

qwrap见: https://github.com/jkisjk/qwrap程序员

对应的ajax组件见: https://github.com/jkisjk/qwrap/tree/master/resource/js/wagang/ajaxgithub

或者你直接引用我打包好的: http://www.welefen.com/wp-content/themes/gplus/js/qwrap.js 因为个人空间速度不咋地,建议你另存为。ajax

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

 

kissy版

kissy版须要在页面引入kissy。

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

        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

对其增长了缓存、本地存储和动画等功能,而且将一些参数进行了优化。