Pjax 实现全站无页面跳转刷新

• 作者: Mr.Xiong
• 日期: 2018年6月14日
• 分类: Web前端
• Tags: Ajax, BootCDN, JQuery, Pjax
• 阅读量: 2,852

一、什么是 Pjax ？

Pjax 是一个 JQuery 的插件。现在很多网站( facebook 、 twitter)都支持这样的一种浏览方式， 当你点击一个站内的链接的时候， 不是做页面跳转， 而是只是站内页面刷新。 这样的用户体验， 比起整个页面都闪一下来说， 好很多。 其中有一个很重要的组成部分， 这些网站的 Ajax  刷新是支持浏览器历史的， 刷新页面的同时， 浏览器地址栏位上面的地址也是会更改， 用浏览器的回退功能也能够回退到上一个页面。 那么如果我们想要实现这样的功能， 我们如何做呢？ 我发现 Pjax 提供了一个脚本支持这样的功能。Pjax 的优点：用户体验提升；极大地减少带宽消耗和服务器消耗。缺点：IE6等历史浏览器的支持；复杂的服务器端支持。综合起来， 由于用户体验和资源利用率的提升， 坏处是可以完全得到弥补的。 强烈推荐大家使用。

二、Pjax 与 Ajax 的区别

Ajax
Ajax 技术应该大家都知道是用来后台与服务器进行少量数据交互，也就不用刷新页面就能看到数据内容，但是 Ajax 有几大问题：
1、搜索引擎不识别 js 代码，也就是无法知道 Ajax 交互之后内容；
2、如 js 做页面的内容的显示，浏览器地址不会切换；
3、因为浏览器地址不能切换，也不支持后退。

Pjax
Pjax = pushState + Ajax
主要的功能是解决 Ajax 上面的几个问题，只是刷新部分页面，切换地址，游览器能记录历史地址，不用重新加载公共的 js 、css 等公共资源，提升用户的体验。

三、部署代码

因 Pjax 依赖 依赖 JQuery1.8 或更高版本 ，因此在 html 文件当中应先引入 JQ >1.8 版本，可在 BootCDN 当中进行搜索 JQuery 。接着可以通过 npm 进行安装 Pjax。npm install jquery-pjax 并引入 jquery.pjax.js 文件。

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="./node_modules/jquery-pjax/jquery.pjax.js"></script>

四、Demo

点我试试?

Finally，谢谢大家的阅读！祝每天开心~
版权声明：本文为博主半原创文章，未经博主允许不得转载。

赞赏

微信赞赏支付宝赞赏