惊蛰
在线0
文章10
标签18
分类5
全站利用pjax无刷新展示

全站利用pjax无刷新展示

全站利用pjax无刷新展示

1.jpg

前言

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

不得不说,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/2020/08/21/%E5%85%A8%E7%AB%99%E5%88%A9%E7%94%A8pjax%E6%97%A0%E5%88%B7%E6%96%B0%E5%B1%95%E7%A4%BA/
版权声明:本文采用 CC BY-NC-SA 3.0 CN 协议进行许可