这段时间一直在做vtiger的二次开发
在做新模块的时候发现vtiger很多页面是用pjax技术实现的
虽然说我也可以用ajax，为了和它本身统一
于是我只好用它的这种方式来做
Pjax=pushState + Ajax
Pjax和Ajax的最大的区别是
当页面有数据交互时，能够改变地址栏的地址
用户可以用前进和后退来查看 交互前后的内容
还有一点就是，pjax返回的是 带html标签的字符串
所以请求后台后，返回的是
<div>内容</div>.........
下面说一下Pjax的用法
<body>
<h1>My Site</h1>
<div>
<input type="button" id="clickMe" value="GO">
</div>
<div id="container"></div>
</body>
<script src="jquery.js"></script>
<script src="pjax.js"></script>
<script type="text/javascript">
$(function(){
$('#clickMe').click(function(){
$.pjax({
url: 'res3.php',
container: '#container'
});
});
});
$(document).on('pjax:start', console.log(1)).on('pjax:end',console.log(2));
</script>
先加载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，即页面中<meta http-equiv="x-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来绑定方法就行了
网友评论