大家好，我是一个关注互联网创业的，自媒体站长，今天我要为大家分享的是pjax。

pjax是什么呢？

pjax是 pushstate + ajax， 当你点击一个站内的链接的时候， 不是做页面跳转， 而是只是站内，部分页面刷新。 这样的用户体验， 比起整个页面都闪一下来说， 好很多。 其中有一个很重要的组成部分， 这些网站的ajax刷新是支持浏览器历史的， 刷新页面的同时， 浏览器地址栏位上面的地址也是会更改， 用浏览器的回退功能也能够回退到上一个页面。

ajax直白的理解就是请求一个链接所指向的页面的其中一部分来替换当前页面的一部分，典型的博客页面，有页面头部、主体部分、侧栏部分、页面底部四个主要部分。 

ajax请求的过程是如何的呢？比如我现在打开的是页面A，页面A中有一个a标签，正常情况下点击a标签的链接会打开一个页面B，那么整个页面A就会被替换成页面B。然而，页面A和页面B有些结构是完全一样的，比如头部，底部，甚至是侧栏，其实要替换的仅仅是主体部分而已，ajax就提供了这样一个功能，它控制你在点击a标签的链接时，只抓取页面B的主体部分来替换页面A的主体部分，而头部、底部、侧栏不用替换（也就不用刷新）。

PushState

以上是最直白的理解，而pushstate则是干嘛的？HTML5里引用了新的API，history.pushState和history.replaceState，就是通过这个接口做到无刷新改变页面URL的。因为用ajax替换局部页面时，浏览器的地址是不会改变的，你替换为页面B的主体，地址栏的url还是页面A的，而且点击浏览器的后退或前进按钮地址栏url也是不会改变的，pushstate的作用则用来改变地址栏url的状态。

那么PJAX就是以上两者的结合。

pjax

开始我们必须对 被请求的页面进行请求前的处理，这个处理非常重要，如果把被请求的页面想象成一张图片，那么这个处理就相当于对图片进行剪裁，没有处理之前，被请求的页面B是完整的，请求过来就首先要预读取一边页面B，而其实我们不必要将整个页面都读取，我们只需要读取主体部分，所以我们可以把头部、侧栏和底部都先剪掉，只剩下主体部分，然后再请求过来替换页面A中的主体部分

哪么pjax有什么好处呢

1，用户体验提升。

页面跳转的时候人眼需要对整个页面作重新识别， 刷新部分页面的时候， 只需要重新识别其中一块区域。采用了pjax技术后， 不由觉得访问其他只有页面跳转的网站难受了许多。 同时，由于刷新部分页面的时候提供了一个loading的提示， 以及在刷新的时候旧页面还是显示在浏览器中， 用户能够容忍更长的页面加载时间。

2，极大地减少带宽消耗和服务器消耗。

由于只是刷新部分页面， 大部分的请求（css/js）都不会重新获取， 网站带有用户登录信息的外框部分都不需要重新生成了。 虽然我没有具体统计这部分的消耗， 我估计至少有40%以上的请求， 30%以上的服务器消耗被节省了。

3，不用重复加载固定内容的侧栏、顶部、底部、背景图、各种JS、CSS、加快载入速度。

今天韩明展，就为大家分享到这里了，下期再见。

欢迎分享、转载请保留出处和链接！如有侵权，请告知本站！

本文地址：http://www.ku1688.com/blog/24.html