使用pjax實作無刷新更改頁面url_javascript技巧

我們都知道ajax為瀏覽器帶來了非同步載入的能力，在資料校驗、局部刷新等方面提升了使用者體驗，但同時存在如下問題：

1. 可以無刷新改變頁面內容，但無法改變頁面URL
2. hash的方式不能很好的處理瀏覽器的前進、後退等問題

為了解決傳統ajax帶來的問題，HTML5裡加強了history API，加入了pushState、replaceState介面和popstate事件。這裡就不詳細介紹了，沒有這方面知識的同學建議先看相關的資料。

pjax外掛程式封裝了pushState和ajax操作,為我們提供了一個開發這這類web應用的簡單方法，具體步驟如下：

定義需要局部更新的容器

初始化pjax，監聽URL

複製程式碼 程式碼如下:

$(function(){
// pjax
$(document).pjax('a', '#container');
$.pjax.reload('#container');
})

後端處理pjax請求

後端的處理邏輯是，首先判斷是不是pjax請求，如果是的話，根據請求參數返回局部內容，否則返回layout佈局，然後由`$.pjax.reload('#container');`發起pjax請求。根據上述邏輯可以寫出如下程式碼：

複製程式碼 程式碼如下:

var pjaxFilter = function(req, res, next) {
if (req.get('X-PJAX')) {
next();
return;
}
//如果不是pjax請求的話直接回傳佈局範本
res.render('layout', { title: 'Pjax simple demo' });
};
router.get('/', pjaxFilter, function(req, res) {
res.render('index');
});
router.get('/poem/:id', pjaxFilter, function(req, res) {
var poemId = req.params.id;
res.render('poem/' poemId);
})

完整程式碼：pjax-demo

這只是pjax最基本的功能，pjax提供了豐富的api，請訪問：jquery-pjax