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',
  container: '#container',
  cache: true,
  storage: true,
  titleSuffix: '',
  filter: function(){},
  callback: function(){}
})

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

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

仅供个人学习参考/导航指引使用，具体请以第三方网站说明为准，本站不提供任何专业建议。如果地址失效或描述有误，请联系站长反馈～感谢您的理解与支持！

链接: https://fly63.com/nav/2169