使用pjax实现相似github无刷新更改页面url

pjax=pushState+ajax，相信用过github的同窗都知道，github部分页面采用了pjax这个项目来实现ajax无刷新加载的同时改变页面url。一块儿来学习一下这个插件吧。

咱们都知道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