pjax簡單實例

時間 2019-11-08

標籤 pjax 簡單實例简体版

原文原文鏈接

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

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

DEMO1：html

客戶端：java

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

服務器端：jquery

res1.phpajax

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

res2.php瀏覽器

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

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

DEMO2：服務器

客戶端：post

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

服務器端代碼：

res3.php:

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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。