pjax=pushState+ajax,相信用過github的同窗都知道,github部分頁面採用了pjax這個項目來實現ajax無刷新加載的同時改變頁面url。一塊兒來學習一下這個插件吧。jquery
咱們都知道ajax給瀏覽器帶來了異步加載的能力,在數據校驗、局部刷新等方面提高了用戶體驗,但同時存在以下問題:git
1. 能夠無刷新改變頁面內容,但沒法改變頁面URL
2. hash的方式不能很好的處理瀏覽器的前進、後退等問題github
爲了解決傳統ajax帶來的問題,HTML5裏增強了history API,加入了pushState、replaceState接口和popstate事件。這裏就不詳細介紹了,沒有這方面知識的同窗建議先看一下相關的資料。web
pjax插件封裝了pushState和ajax操做,爲咱們提供了一個開發這這類web應用的簡單方法,具體步驟以下:ajax
定義須要局部更新的容器後端
<div id="container"></div>
初始化pjax,監聽URLapi
$(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