jQuery pjax 應(yīng)用簡(jiǎn)單示例
ajax缺點(diǎn)是破壞了瀏覽器的前進(jìn)后退，因?yàn)閍jax的請(qǐng)求不會(huì)留在歷史記錄中。pjax就不一樣了，pjax被解釋成ajax+pushState的封裝，因?yàn)樗補(bǔ)jax的請(qǐng)求寫入歷史記錄，并反映在地址欄，這樣用戶就能愉快地使用前進(jìn)后退了。pjax有好幾個(gè)實(shí)現(xiàn)方法，這里使用最常用的Jquery庫(kù)，使用jquery.pjax.js。演示代碼的服務(wù)器端使用PHP腳本語(yǔ)言。
Pjax用在那兒？就說百度云盤吧，這個(gè)大家肯定都用過。百度云盤PC端，在點(diǎn)擊打開某個(gè)文件夾后會(huì)打開這個(gè)文件夾下的文件，其實(shí)顯示文件的這個(gè)div就用到了pjax技術(shù)。地址欄變換，內(nèi)容更換，但是卻是一個(gè)ajax請(qǐng)求。等到后退的時(shí)候，不必重新請(qǐng)求上一層文件夾的內(nèi)容，因?yàn)槭谴嬖谠跉v史記錄中的。而且，開發(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é)了一些大家常見的jQuery pjax 應(yīng)用示例，喜歡的同學(xué)可以參考借鑒一下。
相關(guān)文章
學(xué)習(xí)jquery之一...2007-04-04
這篇文章主要介紹了jQuery的css()方法用法,以實(shí)例形式較為詳細(xì)的分析了css()方法的幾種常見用法,具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2014-12-12
頁(yè)面上可以動(dòng)態(tài)添加數(shù)據(jù),比如table,點(diǎn)擊按鈕可以動(dòng)態(tài)添加行，下面與大家分享下jQuery如何獲取動(dòng)態(tài)生成的元素2014-06-06
jquery 導(dǎo)航條的效果，主要是針對(duì)css的控制。2010-05-05
jQuery通過ajax快速批量提交表單數(shù)據(jù)
這篇文章主要為大家詳細(xì)介紹了jQuery通過ajax快速批量提交表單數(shù)據(jù)的相關(guān)資料,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-10-10
jQuery獲取DOM節(jié)點(diǎn)實(shí)例分析(2種方式)
這篇文章主要介紹了jQuery獲取DOM節(jié)點(diǎn)的方法,提供了兩種jQuery獲取DOM節(jié)點(diǎn)的技巧,需要的朋友可以參考下2015-12-12
使用jQuery.form.js/springmvc框架實(shí)現(xiàn)文件上傳功能
這篇文章主要介紹了使用jQuery.form.js/springmvc框架實(shí)現(xiàn)文件上傳功能，非常具有參考借鑒價(jià)值，感興趣的朋友一起學(xué)習(xí)吧2016-05-05
這篇文章主要介紹了jQuery EasyUI開發(fā)技巧總結(jié)的相關(guān)資料,希望通過本文大家能夠掌握EasyUI的開發(fā)技巧，需要的朋友可以參考下2017-09-09
jquery提示 "object expected"的解決方法
在測(cè)試代碼的時(shí)候，提示object expected，下面的解決方法，可以參考下。2009-12-12
jQuery 1.9.1源碼分析系列（十）事件系統(tǒng)之主動(dòng)觸發(fā)事件和模擬冒泡處理
這篇文章主要介紹了jQuery 1.9.1源碼分析系列（十）事件系統(tǒng)之主動(dòng)觸發(fā)事件和模擬冒泡處理的相關(guān)資料,需要的朋友可以參考下2015-11-11