DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> 使用pjax實現無刷新更改頁面url
使用pjax實現無刷新更改頁面url
編輯:關於JavaScript     

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

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

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

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

定義需要局部更新的容器

<div id="container"></div>
初始化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

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved