使用pjax實現(xiàn)無刷新更改頁面url

更新時間：2015年02月05日 09:03:55 投稿：hebedich

pjax=pushState+ajax，相信用過github的同學都知道，github部分頁面采用了pjax這個項目來實現(xiàn)ajax無刷新加載的同時改變頁面url。一起來學習一下這個插件吧。

我們都知道ajax給瀏覽器帶來了異步加載的能力，在數(shù)據(jù)校驗、局部刷新等方面提升了用戶體驗，但同時存在如下問題：

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

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

pjax插件封裝了pushState和ajax操作,為我們提供了一個開發(fā)這這類web應用的簡單方法，具體步驟如下：

定義需要局部更新的容器

<div id="container"></div>
初始化pjax，監(jiān)聽URL

復制代碼代碼如下:

$(function(){

// pjax

$(document).pjax('a', '#container');

$.pjax.reload('#container');

})

后端處理pjax請求

后端的處理邏輯是，首先判斷是不是pjax請求，如果是的話，根據(jù)請求參數(shù)返回局部內(nèi)容，否則返回layout布局，然后由`$.pjax.reload('#container');`發(fā)起pjax請求。根據(jù)以上邏輯可以寫出如下代碼：

復制代碼代碼如下:

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

您可能感興趣的文章: