全站利用pjax无刷新展示

全站利用pjax无刷新展示

前言

终于抽出空写这篇文章了，还是在上班事件摸鱼写的

不得不说，pjax很好用，很强，很好理解，并且帮助开发者省去了很大部分的工作量

但是由于整站替换后，有些事件还是得自己写一下

简单的记录一下，自己实现全站pjax的一系列过程吧

简介

虽然传统的 ajax 方式可以异步无刷新改变页面内容，但无法改变页面 URL，因此有种方案是在内容发生改变后通过改变 URL 的 hash 的方式获得更好的可访问性（如 https://liyu365.github.io/BG-UI/tpl/#page/desktop.html），

但是 hash 的方式有时候不能很好的处理浏览器的前进、后退，而且常规代码要切换到这种方式还要做不少额外的处理。

而 pjax 的出现就是为了解决这些问题，简单的说就是对 ajax 的加强。

pjax 结合 pushState 和 ajax 技术， 不需要重新加载整个页面就能从服务器加载 Html 到你当前页面，这个 ajax 请求会有永久链接、title 并支持浏览器的回退/前进按钮。

pjax 项目地址在 https://github.com/defunkt/jquery-pjax 。实际效果你可以看看本站

优点

优化页面跳转体验

常规页面跳转需要重新加载画面上的内容，会有明显的闪烁，而且往往和跳转前的页面没有连贯性，用户体验不是很好。如果再遇上页面比较庞大、网速又不是很好的情况，用户体验就更加雪上加霜了。使用pjax后，由于只刷新部分页面，切换效果更加流畅，而且可以定制过度动画，在等待页面加载的时候体验就比较舒服了。

可以加全局播放器（主要是我要加）

看本站左下角

缺点

不支持一些低版本的浏览器(如IE系列)

pjax使用了pushState来改变地址栏的url，这是html5中history的新特性，在某些旧版浏览器中可能不支持。不过pjax会进行判断，功能不适用的时候会执行默认的页面跳转操作。

使服务端处理变得复杂

要做到普通请求返回完整页面，而pjax请求只返回部分页面，服务端就需要做一些特殊处理，当然这对于设计良好的后端框架来说，添加一些统一处理还是比较容易的，自然也没太大问题。另外，即使后台不做处理，设置pjax的fragment参数来达到同样的效果。

综合来看，pajx 的优点很强势，缺点也几乎可以忽略，

还是非常值得推荐的，尤其是类似博客这种大部分情况下只有主体内容变化的网站。

关键它使用简单、学习成本小，即时全站只有极个别页面能用得到，尝试下没什么损失。

pjax 的 github 主页介绍的已经很详细了，想了解更多可以看下源码。
pjax文档: http://bsify.admui.com/jquery-pjax/

用法

因为是基于jq实现的，那么首先需要先引入jq文件

然后在你喜欢的位置引入pjax.js

写好代码后，将容器main付给一个ID，比如在body内的一个div，如：

网站内容部分...

然后就可以测试是否实现了功能了

注意：会有些监听事件失效，或者体验不流畅的，自行优化一下

PS:pjax听说对SEO收录不太友好，这个自己尝试吧

新博客地址：https://jingzhe.xyz