【技术分享】简单实现网站pjax无刷新加载

pjax是什么？

简单点描述, 就是利用 ajax 技术去服务器获取文档, 在不刷新浏览器页面的情况下, 更新当前页面, 并且能保证页面的 js 和 css 等文件不会被重复加载, 然后利用浏览器提供的 pushState 功能, 对 URL 进行更新, 并能保证用户通过点击 back 按钮回溯到历史页面.

为什么要用pjax？

pjax可以带来更好的体验 加载新的页面无需重新去加载cssjs 让网站速度更快 ，因为不需要整个页面刷新,很大程度上提高了页面的加载速度.

怎么使用pjax？

这个使用的方法是非常简单的

首先调用jQuery 跟 pjax 包装代码

别的也不整了 直接上代码

在网站的 head 双标签内加入以下资源引入代码：

<script type="text/javascript" src="https://cdn.gqink.cn/jQuery/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.gqink.cn/jQuery/jquery.pjax.min.js"></script>

下一步，就是在 </body> 标签前，添加下面代码

也就是网站的footer底部

<script type="text/javascript">
    //这里的#id代码局部刷新的内容
    $(document).pjax('a[target!=_blank]', '#id', {fragment: '#html',timeout: 8000});
        $(document).on('pjax:send', function() {
        //$('#loading').show(); // 将#loading的内容显示 加载动画
    });
    $(document).on('pjax:complete', function() {
        //$('#loading').hide(); // 将#loading的内容隐藏 加载动画
        //页面刷新后有些函数没有调用在这里可以写上你的函数让他重新加载
    });
</script>

加载动画这里就不整了 自己研究研究 加个表情写个动画就行