ajax缺點(diǎn)是破壞了瀏覽器的前進(jìn)后退，因?yàn)閍jax的請(qǐng)求不會(huì)留在歷史記錄中。pjax就不一樣了，pjax被解釋成ajax+pushState的封裝，因?yàn)樗補(bǔ)jax的請(qǐng)求寫(xiě)入歷史記錄，并反映在地址欄，這樣用戶就能愉快地使用前進(jìn)后退了。pjax有好幾個(gè)實(shí)現(xiàn)方法，這里使用最常用的Jquery庫(kù)，使用jquery.pjax.js。演示代碼的服務(wù)器端使用PHP腳本語(yǔ)言。
Pjax用在那兒？就說(shuō)百度云盤(pán)吧，這個(gè)大家肯定都用過(guò)。百度云盤(pán)PC端，在點(diǎn)擊打開(kāi)某個(gè)文件夾后會(huì)打開(kāi)這個(gè)文件夾下的文件，其實(shí)顯示文件的這個(gè)div就用到了pjax技術(shù)。地址欄變換，內(nèi)容更換，但是卻是一個(gè)ajax請(qǐng)求。等到后退的時(shí)候，不必重新請(qǐng)求上一層文件夾的內(nèi)容，因?yàn)槭谴嬖谠跉v史記錄中的。而且，開(kāi)發(fā)者還可以選擇時(shí)候使用cache和storage緩存。
DEMO1：
客戶端：
<!DOCTYPE html>
<html>
<head>
<title>pjax</title>
<meta charset="utf-8">
</head>
<body>
<h1>My Site</h1>
<div>
Go to <a href="res1.php">第一頁(yè)</a>.<a href="res2.php">第二頁(yè)</a>
</div>
<div id="container"></div>
</body>
<script src="../jquery-2.1.4.min.js"></script>
<script src="../jquery.pjax.js"></script>
<script type="text/javascript">
$(document).pjax('a', '#container')
</script>
</html>
服務(wù)器端：
res1.php
<?php echo "<div style='background:red;'>第一頁(yè)</div>";
res2.php
<?php echo "<div style='background:red;'>第二頁(yè)</div>";
解釋：$(document).pjax('a', '#container')其中a是觸發(fā)元素，#container是裝載pjax返回內(nèi)容的容器，下面也是這樣。
DEMO2：
<!DOCTYPE html>
<html>
<head>
<title>pjax</title>
<meta charset="utf-8">
</head>
<body>
<h1>My Site</h1>
<div>
Go to <a href="res1.php">第一頁(yè)</a>.<a href="res2.php">第二頁(yè)</a>
</div>
<div id="container"></div>
</body>
<script src="../jquery-2.1.4.min.js"></script>
<script src="../jquery.pjax.js"></script>
<script type="text/javascript">
$(document).pjax('a', '#container')
</script>
</html>
客戶端：
<!DOCTYPE html>
<html>
<head>
<title>pjax</title>
<meta charset="utf-8">
</head>
<body>
<h1>My Site</h1>
<div>
<input type="button" id="clickMe" value="GO">
</div>
<div id="container"></div>
</body>
<script src="../jquery-2.1.4.min.js"></script>
<script src="../jquery.pjax.js"></script>
<script type="text/javascript">
$(function(){
$('#clickMe').click(function(){
$.pjax({
url: './res3.php',
container: '#container'
});
});
});
</script>
</html>
服務(wù)器端代碼：
res3.php:
<?php echo "<div style='background:red;'>第三頁(yè)</div>";
源碼：jQuery pjax
總結(jié)：
此篇文章總結(jié)了一些大家常見(jiàn)的jQuery pjax 應(yīng)用示例，喜歡的同學(xué)可以參考借鑒一下。
聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com
Copyright ? 2019-2025 www.alabama37th.com 版權(quán)所有
違法及侵權(quán)請(qǐng)聯(lián)系：TEL:177 7030 7066 E-MAIL:11247931@qq.com 本站由北京市萬(wàn)商天勤律師事務(wù)所王興未律師提供法律服務(wù)
