前言
在通常的网站中,如果需要链接到其它的页面(不是数据),只能刷新整个网站 做一次链接的跳转.
<body>
<header>Header</header>
<main>Content</main>
<footer>Footer</footer>
</body>
其实 header
和 footer
已经不需要重新加载了 如果只去加载主要的数据页面 (Content) 会不会更快一点?
你想到的 Jquery 已经想到了,在 Jquery API 中,提供了这样一个方法
load(url, [data], [callback])
发起 ajax 请求去拿数据页面,获取到页面之后进行选定节点到标签渲染(修改),最终执行完毕 callback.
如果你使用了 load 方法完成了整站的编写,那我想告诉你的是 这是一个悲伤的事情,因为你的网站没有后退功能!!!
使用 load 方法确实能获取一部分页面进行渲染,增加用户的交互性,但是浏览器的地址永远不会改变!,这是因为你并没有跳转页面,你只是一直在发送 ajax 请求而已。终于切入主题了 今天给大家介绍的 PJAX
什么是PJAX?
PJAX 并不是什么新的技术 , 只是在HTML5推出之后 提供了一个 pushState 的方法 可以让你改变浏览器的 url 地址 和 title 而 PJAX 就是 对 Ajax + pushState 的封装 , 同时支持了缓存和本地存储 , 并且支持动画展现渲染的标签(支持自定义动画)
项目主页: https://pjax.herokuapp.com
PJAX 开源项目地址:https://github.com/defunkt/jquery-pjax
有哪些公司在使用?
Github,Facebook,Weibo,知乎 ……
如何使用?
使用方式非常简单 , 首先下载好jquery.pjax.js
导入到你项目
$.pjax({
selector : 'a[data-pjax]',
container : '#main-container', //内容替换的容器
show : 'fade', //展现的动画,支持默认和fade, 可以自定义动画方式,这里为自定义的function即可。
cache : false, //是否使用缓存
storage : false, //是否使用本地存储
titleSuffix : '-pjax', //标题后缀
filter : function() {} //过滤器
})
当点击标签带 data-pjax
的 a 标签时 , PJAX 会自动拦截默认 a 标签事件 , 并且会发起一个 Ajax 请求 (触发 pjax.start
) 去获
取数据页面 , 当获取到页面之后(触发 pjax.end
) 进行页面渲染.
而我们的服务端只需要判断在 request
请求头里面是否含有 X-PJAX
就知道返回什么页面了。
Java代码:
String pjax = request.getHeader("X-PJAX");
if(pjax != null && pjax.equals("true")){
//返回部分页面
}else{
//返回正常页面
}
强烈推荐 PJAX 配合 NProgress 使用 , 因为这样用户体验会更好。
container.on("pjax.start", function() {
NProgress.start();
})
container.on("pjax.end", function() {
NProgress.done();
})
总结
说了 PJAX 这么多好处 , 那有没有什么坏处呢 ? 答案是肯定的。
由于 PJAX 几乎所有的请求都是基于 Ajax 的 , 那么在获取到部分页面的时候 页面会带上处理当前页面数据的 js 代码 , 那么每一次点击都会让浏览器去执行这些代码。
由于浏览器一旦加载了 js 就不能释放 , 除非让当前页面刷新 , 如果需要加载的页面非常多 页面可能会出现卡顿 不过解决方法也非常简单: 刷新一下就好了。
你的网站页面打开速度不错,用的是哪个VPS?怎样的配置?
博客开了pjax,然后卡死了~带着机子一起卡
那么博主应该检查一下代码方面了。如果你访问本站不会卡死的话代表是没有问题的,因为本站就是开启了PJAX
:eek: 测试一下ua
是不是很酷 :cool:
:shock: 对!我也弄了 :mrgreen:
哈哈哈对,多说早就有啦。不过我用不习惯多说,就把这个功能扒到自带的评论系统了
:oops: :oops: :oops: :oops: :oops: :oops: 棒棒的
谢谢博主分享 :grin:
很好!!!!!!谢谢!!!!!!
谢谢!
朋友 交换链接吗
可以噢,留个QQ