pjax

pjax 介绍

pushState是一个可以操作history的api， 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(){}

})

注意：若设置 storage 为 true，为避免多次请求页面后导致本地 localStorage 容量不足而触发异常，请在页面加载完成后加载以下 JavaScript 代码清除已过期的记录。

if (!!window.localStorage) {

for (var key in localStorage) {

try {

if ((key.split("_") || [""])[0] === "pjax") {

var item = localStorage.getItem(key);

if (item) {

item = jsON.parse(item);

if ((parseInt(item.time) + 600 * 1000) <= new Date * 1) {

localStorage.removeItem(key)

}

}

}

} catch (e) { }

}

}

qwrap版

qwrap版需要在页面引入qwrap和对应的ajax组件。QW.pjax(selector: 'a',container: '#container',cache: true,storage: true,titleSuffix: '',filter: function(){},callback: function(){}})

kissy版

kissy版需要在页面引入kissy。

KISSY.pjax(

selector: 'a',

cache: true,

storage: true,

titleSuffix: '',

filter: function(){},

callback: function(){}

})

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

备注：[WARNING] 该项目已经停止维护

GitHub:https://github.com/welefen/pjax

网站描述:对ajax + pushState的封装，让你可以很方便的使用pushState技术

pjax

官方网站：