PJAX初步探究

这段时间一直在做vtiger的二次开发
在做新模块的时候发现vtiger很多页面是用pjax技术实现的
虽然说我也可以用ajax，为了和它本身统一
于是我只好用它的这种方式来做

Pjax=pushState + Ajax
Pjax和Ajax的最大的区别是
当页面有数据交互时，能够改变地址栏的地址
用户可以用前进和后退来查看 交互前后的内容

还有一点就是，pjax返回的是 带html标签的字符串
所以请求后台后，返回的是

内容

.........

下面说一下Pjax的用法

  
My Site
  

    
  
  
    

先加载jquery和pjax
用$.pjax来触发，url是请求地址，container是显示内容的 DOM选择器

$.pjax({
            url: 'res3.php',
            container: '#container'
        });

options默认参数说明
参数名 默认值 说明
timeout 650 ajax 超时时间（单位ms），超时后会执行默认的页面跳转，所以超时时间不应过短，不过一般不需要设置
push true 使用window.history.pushState改变地址栏url（会添加新的历史记录）
replace false 使用window.history.replaceState改变地址栏url（不会添加历史记录）
maxCacheLength 20 缓存的历史页面个数（pjax加载新页面前会把原页面的内容缓存起来，缓存加载后其中的脚本会再次执行）
version 是一个函数，返回当前页面的pjax-version，即页面中标签内容。使用response.setHeader("X-PJAX-Version", "")设置与当前页面不同的版本号，可强制页面跳转而不是局部刷新。
scrollTo 0 页面加载后垂直滚动距离（与原页面保持一致可使过度效果更平滑）
type "GET" ajax的参数，http请求方式
dataType "html" ajax的参数，响应内容的Content-Type
container 用于查找容器的CSS选择器，[container]参数没有指定时使用
url link.href 要跳转的连接，默认a标签的href属性
target link pjax事件参数e的relatedTarget属性，默认为点击的a标签
fragment 使用响应内容的指定部分（css选择器）填充页面，服务端不进行处理导致全页面请求的时候需要使用该参数，简单的说就是对请求到的页面做截取

这些值直接加在url后面即可
下面再说一下Pjax的事件

事件名 支持取消 参数 说明
pjax:click ✔ options 点击按钮时触发。可调用e.preventDefault();取消pjax
pjax:beforeSend ✔ xhr, options ajax执行beforeSend函数时触发，可在回调函数中设置额外的请求头参数。可调用e.preventDefault();取消pjax
pjax:start xhr, options pjax开始（与服务器连接建立后触发）
pjax:send xhr, options pjax:start之后触发
pjax:clicked options ajax请求开始后触发
pjax:beforeReplace contents, options ajax请求成功，内容替换渲染前触发
pjax:success data, status, xhr, options 内容替换成功后触发
pjax:timeout ✔ xhr, options ajax请求超时后触发。可调用e.preventDefault();继续等待ajax请求结束
pjax:error ✔ xhr, textStatus, error, options ajax请求失败后触发。默认失败后会跳转url，如要阻止跳转可调用 e.preventDefault();
pjax:complete xhr, textStatus, options ajax请求结束后触发，不管成功还是失败
pjax:end xhr, options pjax所有事件结束后触发

用法上面也写出了
$(document).on('pjax:start', console.log(1)).on('pjax:end',console.log(2));
用document.on来绑定方法就行了