使用pjax实现类似github无刷新更改页面url
发布在前端记事本2015年2月4日view:10753YiksiAssow开源项目BrettBat
在文章任何区域双击击即可给文章添加【评注】!浮到评注点上可以查看详情。

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

评论
发表评论
20天前

web学习交流请与我联系

WRITTEN BY
文若tony
上帝给了我一双写诗的手,我却用他来写代码。
TA的新浪微博
PUBLISHED IN
前端记事本

前端学习感悟

我的收藏