pjax库，将页面所有的跳转替换为ajax请求，把网站

coffce-pjax

coffce-pjax可以将页面所有的跳转替换为AJAX请求，把网站改造成单页面应用。
note: 由于浏览器限制，pjax需要在服务器环境下使用，即不要使用file://xxx.html运行。

###有何用处：

可以在页面切换间平滑过渡，增加Loading动画。 可以在各个页面间传递数据，不依赖URL。 可以选择性的保留状态，如音乐网站，切换页面时不会停止播放歌曲。 所有的标签都可以用来跳转，不仅仅是a标签。 避免了公共JS的反复执行，如无需在各个页面打开时都判断是否登录过等等。 减少了请求体积，节省流量，加快页面响应速度。 平滑降级到低版本浏览器上，对SEO也不会有影响。

###兼容性：

Chrome, Firefox, Safari, Android Browser, IE8+等。 在IE8和IE9上使用URL Hash，即地址栏的#号。 在更低版本的浏览器和搜索引擎蜘蛛上，保持默认跳转，不受影响。 如何使用

####安装： npm install coffce-pjax

引入

// 使用全局变量 var pjax = window.CoffcePJAX

// 使用commonJS或AMD var pjax = require("coffce-pjax");

####简单配置：

pjax.init({ // 替换新页面内容的容器 container: "body", // 是否在低版本浏览器上使用Hash hash: true });

####完整配置:

pjax.init({ // 选择器，支持querySelector选择器 selector: "a", // 要替换内容的容器，可为选择器字符串或DOM对象 container: "body", // 是否在前进后退时开启本地缓存功能 cache : true, // 是否对低版本浏览器启用hash方案，不启用此项的低版本浏览器则会按照普通模式跳转 hash: false, // 是否允许跳转到当前相同URL，相当于刷新 same: true, // 调试模式，console.log调试信息 debug: false, // 各个执行阶段的过滤函数，返回false则停止pjax执行 filter: { // 选择器过滤，如果querySelector无法满足需求，可以在此函数里二次过滤 selector: function(a) {}, // 接收到ajax请求返回的内容时触发 content: function(title, html) {} }, // 各个阶段的自定义函数，将代替默认函数 custom: { // 自定义更换页面函数，可以在此实现动画效果等 append: function(html, container) {} }, // 要监听的事件，相当于pjax.on(...)，事件列表看下面 events: {} }); 接口

/** * 初始化 * @param {Object} options 配置，详情见上面↑ */ pjax.init(config);

// 注销插件，一般来说你不需要使用这个方法 pjax.destroy();

/** * 使用pjax跳转到指定页面 * @param {String} url * @param {Object} data 要传到新页面的参数，可以为null或undefined * @param {Function} callback 请求成功时的回调，可以为null或undefined */ pjax.turn(url, data, callback);

/** * 监听事件，事件类型见下面↓ * @param {String} type 事件类型 * @param {Function} listener 回调 * @param {String} url 只监听某个url，可以是相对和绝对路径 */ pjax.on(type, listener); pjax.on(type, url, listener);

/** * 解除监听 * @param {String} type 事件类型 * @param {String} url 只监听某个url，可以是相对和绝对路径 */ pjax.off(type); pjax.off(type, url);

/** * 触发事件 * @param {String} type 事件类型 * @param {Object} args 参数 */ pjax.trigger(type, args); 事件

####监听事件

// 通过接口监听 pjax.on(type, url, function); pjax.on(type, function);

// 通过配置监听 pjax.init({ // .... events: { type: function(){} } });

####事件类型 init
在每个页面加载完成后触发，有一个object参数：{ title, html }

end
在每个页面离开前触发

ajaxBegin
在请求开始时触发。有一个object参数： { url, fnb, data, xhr }, url表示新页面的url，fnb表示是否由浏览器前进后退触发，data表示传到新页面的数据，xhr是请求的XMLHttpRequest()实例

ajaxSuccess
在请求成功后触发。参数与begin一样。

ajaxError
在请求失败后触发。参数与begin一样。

特性 优先使用标签上的data-coffce-pjax-href，其次使用href 标签上若有data-coffce-pjax属性，将作为data属性传递到新页面

// 将跳转到b.html，并传递字符串data <a href="a.html" data-coffce-pjax-href="b.html" data-coffce-pjax="data"></a> 服务端配合 对于PJAX请求，服务端并不需要返回完整的HTML，只返回变动的Content部分即可。对于普通请求(一般由浏览器地址栏直接打开)，则需要返回完整的HTML。 coffce-pjax在发送请求时，会带上请求头COFFCE-PJAX：true，你可以依此来判断当前请求是PJAX请求还是普通请求。 由于没有返回完整的HTML，服务端应该将document.title放在请求头COFFCE-PJAX-TITLE里。 注意：

作者很懒，没有认真测试过，接口也可能随时变动，使用需自己小心。

License

MIT