這段時間一直在做vtiger的二次開發(fā)
在做新模塊的時候發(fā)現(xiàn)vtiger很多頁面是用pjax技術(shù)實(shí)現(xiàn)的
雖然說我也可以用ajax，為了和它本身統(tǒng)一
于是我只好用它的這種方式來做
Pjax=pushState + Ajax
Pjax和Ajax的最大的區(qū)別是
當(dāng)頁面有數(shù)據(jù)交互時，能夠改變地址欄的地址
用戶可以用前進(jìn)和后退來查看 交互前后的內(nèi)容
還有一點(diǎn)就是，pjax返回的是 帶html標(biāo)簽的字符串
所以請求后臺后，返回的是
<div>內(nèi)容</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來觸發(fā)，url是請求地址，container是顯示內(nèi)容的 DOM選擇器
$.pjax({
url: 'res3.php',
container: '#container'
});
options默認(rèn)參數(shù)說明
參數(shù)名 默認(rèn)值 說明
timeout 650 ajax 超時時間（單位ms），超時后會執(zhí)行默認(rèn)的頁面跳轉(zhuǎn)，所以超時時間不應(yīng)過短，不過一般不需要設(shè)置
push true 使用window.history.pushState改變地址欄url（會添加新的歷史記錄）
replace false 使用window.history.replaceState改變地址欄url（不會添加歷史記錄）
maxCacheLength 20 緩存的歷史頁面?zhèn)€數(shù)（pjax加載新頁面前會把原頁面的內(nèi)容緩存起來，緩存加載后其中的腳本會再次執(zhí)行）
version 是一個函數(shù)，返回當(dāng)前頁面的pjax-version，即頁面中<meta http-equiv="x-pjax-version">標(biāo)簽內(nèi)容。使用response.setHeader("X-PJAX-Version", "")設(shè)置與當(dāng)前頁面不同的版本號，可強(qiáng)制頁面跳轉(zhuǎn)而不是局部刷新。
scrollTo 0 頁面加載后垂直滾動距離（與原頁面保持一致可使過度效果更平滑）
type "GET" ajax的參數(shù)，http請求方式
dataType "html" ajax的參數(shù)，響應(yīng)內(nèi)容的Content-Type
container 用于查找容器的CSS選擇器，[container]參數(shù)沒有指定時使用
url link.href 要跳轉(zhuǎn)的連接，默認(rèn)a標(biāo)簽的href屬性
target link pjax事件參數(shù)e的relatedTarget屬性，默認(rèn)為點(diǎn)擊的a標(biāo)簽
fragment 使用響應(yīng)內(nèi)容的指定部分（css選擇器）填充頁面，服務(wù)端不進(jìn)行處理導(dǎo)致全頁面請求的時候需要使用該參數(shù)，簡單的說就是對請求到的頁面做截取
這些值直接加在url后面即可
下面再說一下Pjax的事件
事件名 支持取消 參數(shù) 說明
pjax:click ? options 點(diǎn)擊按鈕時觸發(fā)?？烧{(diào)用e.preventDefault();取消pjax
pjax:beforeSend ? xhr, options ajax執(zhí)行beforeSend函數(shù)時觸發(fā)，可在回調(diào)函數(shù)中設(shè)置額外的請求頭參數(shù)?？烧{(diào)用e.preventDefault();取消pjax
pjax:start xhr, options pjax開始（與服務(wù)器連接建立后觸發(fā)）
pjax:send xhr, options pjax:start之后觸發(fā)
pjax:clicked options ajax請求開始后觸發(fā)
pjax:beforeReplace contents, options ajax請求成功，內(nèi)容替換渲染前觸發(fā)
pjax:success data, status, xhr, options 內(nèi)容替換成功后觸發(fā)
pjax:timeout ? xhr, options ajax請求超時后觸發(fā)?？烧{(diào)用e.preventDefault();繼續(xù)等待ajax請求結(jié)束
pjax:error ? xhr, textStatus, error, options ajax請求失敗后觸發(fā)。默認(rèn)失敗后會跳轉(zhuǎn)url，如要阻止跳轉(zhuǎn)可調(diào)用 e.preventDefault();
pjax:complete xhr, textStatus, options ajax請求結(jié)束后觸發(fā)，不管成功還是失敗
pjax:end xhr, options pjax所有事件結(jié)束后觸發(fā)
用法上面也寫出了
$(document).on('pjax:start', console.log(1)).on('pjax:end',console.log(2));
用document.on來綁定方法就行了
