Pjax實現網頁區域性重新整理
阿新 • • 發佈：2019-01-29
現在很多網站( facebook, twitter)都支援這樣的一種瀏覽方式， 當你點選一個站內的連結的時候， 不是做頁面跳轉， 而是隻是站內頁面重新整理。 這樣的使用者體驗， 比起整個頁面都閃一下來說， 好很多。 其中有一個很重要的組成部分， 這些網站的ajax重新整理是支援瀏覽器歷史的， 重新整理頁面的同時， 瀏覽器位址列位上面的地址也是會更改， 用瀏覽器的回退功能也能夠回退到上一個頁面。 那麼如果我們想要實現這樣的功能， 我們如何做呢？ pjax提供了一個指令碼支援這樣的功能。 pjax專案地址在 https://github.com/defunkt/jquery-pjax 。 實際的效果見： http://pjax.heroku.com/ 沒有勾選pjax的時候， 點選連結是跳轉的。 勾選了之後， 連結都是變成了ajax重新整理。
下面是一個簡單的Pjax例子，其中內容大致相同，除了跳轉部分
第一頁：
<?php
$a=apache_request_headers();
if(empty($a["X-PJAX"])){
}else{
echo "<h1>啦啦啦啦啦啦啦我是1 iam from php</h1>Go to <a id='aaa' href='index2.php'>去2</a>";
exit();
}
?> 第二頁：
<?php
$a=apache_request_headers();
if(empty($a["X-PJAX"])){
}else{
echo "<h1>啦啦啦啦啦啦啦我是2 iam from php</h1>Go to <a id='aaa' href='index1.php'>去1</a>";
exit();
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang='zh-CN' xml:lang='zh-CN' xmlns='http://www.w3.org/1999/xhtml'>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
</head>
<body>
<h1>啦啦啦啦啦啦啦</h1>
<div class="container" id="pjax-container">
<h1>啦啦啦啦啦啦啦我是2</h1>
Go to <a id="aaa" href="index1.php">去1</a>
</div>
<h1>啦啦啦啦啦啦啦</h1>
<div id="loading" style="display:none;position:fixed;top: 0;left: 0;bottom: 0;right: 0;padding-top: 190px;background: rgba(255,255,255,0.8);z-index: 9999;text-align: center;color: #767676;">
<p><img alt="" height="64" src="https://assets-cdn.github.com/images/spinners/octocat-spinner-128.gif" width="64"></p>
<p>Loading…</p>
</div>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script src="pjax.js"></script>
<script>
$(document).pjax('#aaa', '#pjax-container');
$(document).on("pjax:send", "#pjax-container", function() {
$('#loading').show();
});
$(document).on("pjax:complete", "#pjax-container", function(t) {
$('#loading').hide();
});
$(document).on("pjax:timeout", "#pjax-container", function() {
return !1
});
$(function(){
var mydate = new Date();
var t=mydate.toLocaleString();
$("h1").append("<i>"+t+"</i>");
});
</script>
</body>
</html>效果如下：
