前言——为什么使用无刷新加载网页

为什么要使用无刷新加载页面,一个字——,对于网站来说“快”的好处也不必多说了。而使用无刷新加载网页那么ajax是必不可少的。但是只单独使用ajax的话,对于浏览器在前进和后退时,网站的内容的变化就不是我们想要的。那这里就要介绍HTML5里新的API:history.pushState和history.replaceState。pushState是将指定的URL添加到浏览器历史里,replaceState是将指定的URL替换当前的URL。所以我们可以通过pushState和replaceState接口操作浏览器历史,并且改变当前页面的URL。详细用法不多说了,让我们回到主题。

pjax的介绍

前言说到使用ajax和history.pushState、history.replaceState可以实现无刷新加载页面和改变网页URL。
看起来会非常的麻烦,但是使用pjax就可以做到以上操作。
pjax是对ajax和pushState的封装,这样就可以很方便的使用了。
使用这个pjax和众多js库、插件一样,下载并且将jquery.pjax.js部署到你的页面中,根据文档使用就ok了。(注意:不能绑定外域的url)

$('a').pjax({

  container: '#container', //内容替换的容器

  fx: 'fade',  //展现的动画,支持默认和fade, 可以自定义动画方式。

  cache: true,  //是否使用缓存

  storage: true,  //是否使用本地存储

  titleSuffix: '' //标题后缀

pjax还提供了两个事件start.pjax和end.pjax。
start.pjax:在pjax ajax发送request之前调用
end.pjax:在phax ajax结束时调用
所以利用这两个事件可以添加一些加载动画。

$('#container').bind('start.pjax', function(){

    $('#loading').show();

})

$('#container').bind('end.pjax', function(){

    $('#loading').hide();

后端的操作

我的是使用php,所以使用以下代码,主要作用是判断是否pjax请求:

 protected function is_pjax()
    {
    return array_key_exists('HTTP_X_PJAX', $_SERVER) && $_SERVER['HTTP_X_PJAX'] === 'true';
    }

使用场景:

  if ($this->is_pjax()) {
            return $this->fetch();//pjax请求需要做的
        } else
            return $this->fetch();

总结

本篇文章主要是介绍pjax和pjax的基础应用,所以对pjax的使用介绍不详细,需要详细了解的可以去pjax项目里仔细观看。
pjax项目下载:https://github.com/defunkt/jquery-pjax

最后

如果你喜欢这篇文章,请给我点赞或者留言吧。