jQuery pjax 應用簡單示例

時間 2019-11-16

原文原文鏈接

pjax 是一個jQuery插件，它使用 ajax 和 pushState 來實現快速的瀏覽體驗，包括真正的固定連接，頁面標題和工做返回按鈕。javascript

ajax缺點是破壞了瀏覽器的前進後退，由於ajax的請求不會留在歷史記錄中。pjax就不同了，pjax被解釋成ajax+pushState的封裝，由於它把ajax的請求寫入歷史記錄，並反映在地址欄，這樣用戶就能愉快地使用前進後退了。pjax有好幾個實現方法，這裏使用最經常使用的jQuery庫，使用jquery.pjax.js。演示代碼的服務器端使用PHP腳本語言。php

　　Pjax用在那兒？就說百度雲盤吧，這個你們確定都用過。百度雲盤PC端，在點擊打開某個文件夾後會打開這個文件夾下的文件，其實顯示文件的這個div就用到了pjax技術。地址欄變換，內容更換，可是倒是一個ajax請求。等到後退的時候，沒必要從新請求上一層文件夾的內容，由於是存在在歷史記錄中的。並且，開發者還能夠選擇時候使用cache和storage緩存。html

示例1、

<!DOCTYPE html>
<html>
<head>
  <title>pjax</title>
    <meta charset="utf-8">
</head>
<body>
  <h1>My Site</h1>
  <div>
    Go to <a href="res1.php">第一頁</a>.<a href="res2.php">第二頁</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>

res1.phpjava

<?php 
echo "<div style='background:red;'>第一頁</div>";

res2.phpjquery

<?php 
echo "<div style='background:red;'>第二頁</div>";

解釋：$(document).pjax('a', '#Container')其中 a 是觸發元素，#container 是裝載 pjax 返回內容的容器，下面也是這樣。git

示例2、

<!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>

服務器端代碼：github

res3.php:ajax

<?php 
echo "<div style='background:red;'>第三頁</div>";

三綜合應用

window.history.pushState(state, title, url);
// https://developer.mozilla.org/zh-CN/docs/Web/API/History/pushState
// @狀態對象:  記錄歷史記錄點的額外對象,能夠爲空.
// @頁面標題:  目前全部瀏覽器都不支持.
// @可選的URL: 瀏覽器不會檢查URL是否存在,只改變URL.URL必須同域,不能跨域.

PJAX其實就是HTML5 window.history.pushState(state, title, url)這個新的API加上傳統的AJAX技術,通常用來實現無刷新的頁面加載.pushState的做用主要是:改變URL和添加返回歷史.這樣AJAX無刷新加載頁面後,用戶還能夠正常進行後退和前進,JS的window.history.back()和window.history.forward()也能正常工做.下面就是一個用pushState + jQuery AJAX實現的無刷新的頁面加載,不支持的瀏覽器則自動退化成打開原始的連接打開形式.json

index.php:segmentfault

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Index</title>
<script src="jquery.js"></script>
</head>
<body>
<div id="main">
    <a href="data.php">data.php</a>
    <script>
    $(document).ready(function() {
        $('#main').on('click','a',function(e) {
            if(window.history.pushState) {
                e.preventDefault(); //不跟隨原連接跳轉
                url = $(this).attr('href');
                $.ajax({
                    async: true,
                    type: 'GET',
                    url: 'data.php',
                    data: 'pjax=1',
                    success: function(data) {
                        window.history.pushState(null, null, url); //改變URL和添加返回歷史
                        document.title = data.title; //設置標題
                        $('#main').html(data.main); //設置內容
                    }
                });
            } else {
                return; //低版本IE8等不支持HTML5 pushState,直接返回進行連接跳轉
            }
        });
    });
    </script>
</div>
</body>
</html>

data.php:

<?php
if(isset($_GET['pjax'])) {
    //PJAX請求返回JSON
    $arr['title'] = 'Data';
    $arr['main'] = '<h1>Data Content</h1>';
    //下面這兩句是把PHP數組轉成JSON對象返回
    header('Content-Type: application/json; charset=utf-8');
    echo json_encode($arr);
} else {
    //常規請求返回HTML
?>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Data</title>
<script src="jquery.js"></script>
</head>
<body>
<div id="main"><h1>Data Content</h1></div>
</body>
</html>
<?php } ?>

注意,JS統計代碼應該放到main塊裏面才能正常統計頁面訪問數.

小結：Pjax實際就是從服務器端返回一段代碼片斷，而不用刷新頁面，而且同時對 url 地址進行修改，這樣能夠節省資源加載，提高頁面加載速度。

相關文章：
在 Laravel 5.1 中使用 Pjax