pjax 和 ajax 的區別

pjax 是一個 jQuery 插件，它經過 ajax 和 pushState 技術提供了極速的（無刷新 ajax 加載）瀏覽體驗，而且保持了真實的地址、網頁標題，瀏覽器的後退（前進）按鈕也能夠正常使用。
pjax 的工做原理是經過 ajax 從服務器端獲取 HTML，在頁面中用獲取到的 HTML 替換指定容器元素中的內容。而後使用 pushState 技術更新瀏覽器地址欄中的當前地址。如下兩點緣由決定了 pjax 會有更快的瀏覽體驗：

• 不存在頁面資源（js/css）的重複加載和應用；
• 若是服務器端配置了 pjax，它能夠只渲染頁面局部內容，從而避免服務器渲染完整佈局的額外開銷。

從官網的這段描述中可看出 pjax 的核心其實仍是 ajax，因此若是是 ajax 去作這種局部 html 刷新的話須要寫更多的代碼，而 pjax 已經作的很好了。

pjax 的使用方法：使用 pjax 通常須要後臺配合，好比 java 後端能夠寫個過濾器過濾當前請求，若是包含 X-PJAX 請求頭 (說明是 pjax 請求) 那麼只須要返回局部 html 代碼，剩下的交給前端 pjax 插件渲染就好，若是不包含則返回完整 html 代碼(包含頭尾的 html 代碼，不包含 X-PJAX 說明是普通請求)

使用 pjax 的好處：因爲搜索引擎的蜘蛛不會執行 javascript，因此若是你的頁面是 ajax 方式加載將不會被引擎收錄，好比：

<nav id="tab"> <a href="javascript:void(0);">簡介</a> <a href="javascript:void(0);">動態</a> <a href="javascript:void(0);">禮包</a> <a href="javascript:void(0);">開服</a> <a href="javascript:void(0);">攻略</a> </nav> <div id="con"></div> <script> $("#tab a").click(function(){ //發起ajax請求 $.ajax({ url:"./introduction.html",//注意：這裏實際狀況應該是根據點擊的不一樣a標籤加載不一樣頁面 success: function(html){ //將請求回來的內容添加到下面的內容div $("#con").append(html); } }); }); </script> 

除了主頁會被收錄，簡介、動態、禮包…這幾個頁面將不會被收錄，由於引擎蜘蛛爬取主頁時會順着 a 標籤的 href 爬取另外一個頁面，而不會執行 javascript。
若是使用 pjax，就能夠解決這種問題（注意：這裏爲了使代碼直觀提供的是 ajax 的解決代碼，並未使用 pjax，解決思路同樣，使用 pjax 可使代碼更簡化），頁面能夠這樣修改：

<nav id="tab"> <a href="./introduction.html">簡介</a> <a href="./dynamic.html">動態</a> <a href="./gift.html">禮包</a> <a href="./service.html">開服</a> <a href="./strategy.html">攻略</a> </nav> <div id="con"></div> <script> $("#tab a").click(function(){ //發起ajax請求 $.ajax({ url: "./introduction.html",//注意：這裏實際狀況應該是根據點擊的不一樣a標籤加載不一樣頁面 data: {key: 'ajax'}//注意：這是必須的參數標識 success: function(html){ //將請求回來的內容添加到下面的內容div $("#con").html(html); } }); return false; // 阻止 A 連接跳轉 }); </script> 

後臺代碼能夠這樣處理，php 爲例：

$isAjax = $_GET["key"]; $con = include 'con.php'; if($isAjax == "ajax"){ echo $con; }else{ $head = include 'head.php'; $foot = include 'head.php'; echo $head + $con + $foot; } 

若是請求中的參數 key 的值是「ajax」 則只輸出部份內容，不然則輸出包含頭部底部等完整內容。

參考：pjax 中文文檔、ajax 如何作到 SEO 友好

轉載自：http://meia.fun/article/1540982577311