pajax是使用ajax+pushState打造无刷新改变URL的方式。虽然这种方式是将ajax、history.pushState、history.replaceStatte、window.onpopstate等几个技术点结合,但在具体使用中还是要考虑到很多情况的,如:
1、改变内容的时候也要改变title
2、不支持的浏览器如何处理
3、事件如何绑定,是否使用了delegate模式
4、ajax异常处理
5、ajax前后的自定义事件等
介于有上面等多的疑问,将ajax和pushState封装下,供后面使用还是非常有帮助的。本文就是对pjax(ajax+pushState)的一个介绍
介绍
pjax是对ajax + pushState的封装,让你可以很方便的使用pushState技术。
同时支持了缓存和本地存储,下次访问的时候直接读取本地数据,无需在次访问。
并且展现方式支持动画技术,可以使用系统自带的动画方式,也可以自定义动画展现方式。
目前只提供了基于jquery的版本,后续将增加基于qwrap, tangram等版本。
如何使用
将jquery.pjax.js部署到你的页面中,将需要使用pjax的a链接进行绑定(不能绑定外域的url),如:
$('a').pjax({
container: '#container', //内容替换的容器
fx: 'fade', //展现的动画,支持默认和fade, 可以自定义动画方式。
cache: true, //是否使用缓存
storage: true, //是否使用本地存储
titleSuffix: '' //标题后缀
})
事件(events)
一般情况下使用ajax来获取数据的时候,我们都希望有个loading的效果,pjax本身不提供这个功能,但提供了2个相关的事件。 如果需要这样的功能,可以在事件里实现这种功能。
- start.pjax 在pjax ajax发送request之前调用
- end.pjax 在phax ajax结束时调用
这样你可以在start.pjax事件里显示loading效果,在end.pjax事件里隐藏loading了。如:
$('#container').bind('start.pjax', function(){
$('#loading').show();
})
$('#container').bind('end.pjax', function(){
$('#loading').hide();
})
浏览器支持
提供了history.pushState接口的浏览器才支持这个功能,$.support.pjax是用来判断浏览器是否支持的。
如果浏览器不支持这个功能而调用pjax方法的话,实际上什么都没做,还是使用默认的链接响应机制
后端需要做的
类似于ajax, 异步请求的时候后端不能将公用的内容也返回。
所以需要一个判断是否pjax请求的接口。如:php可以借鉴下面的实现
function gplus_is_pjax(){
return array_key_exists('HTTP_X_PJAX', $_SERVER) && $_SERVER['HTTP_X_PJAX'] === 'true';
}
下载源代码
pjax已经开源,代码放在https://github.com/welefen/pjax 上,欢迎大家访问和下载。
其他
实际上该类的封装借鉴于https://github.com/defunkt/jquery-pjax
对其增加了缓存、本地存储和动画等功能,并且将一些参数进行了优化。
分享到:
相关推荐
Query插件pjax,修改pjax再次请求的时候部分js没有加载,它通过ajax和pushState技术提供了极速的(无刷新ajax加载)
pjax是对ajax pushState的封装,让你可以很方便的使用pushState技术
pjax ( { selector : 'a' , container : '#content' } ) ; 服务器 /** * index * @return * @throws Exception */ public View index() throws Exception { JspView view; String user_agent = request . ...
Pjax是一个jQuery插件,它使用ajax和pushState通过真正的永久链接,页面标题和后退按钮提供快速浏览体验。 查看更多或访问 ##为什么要用Pjax? 只是使用ajax从远程加载容器? 是的,但不仅如此。 不再加载css和js...
睡衣pushState + ajax = pjax,一个轻量级的纯JavaScript pjax库,或仅用作ajax为什么所以您问自己,为什么还要另一个pjax库? 简而言之,恕我直言,大多数其他库都过于复杂,使用仅仅是一种方式,最重要的是,库与...
轻松在任何网站上启用快速AJAX导航(使用pushState()+ XHR) Pjax是一个独立JavaScript模块,使用 (XmlHttpRequest)和来提供快速的浏览体验。 它使您可以完全改变标准网站(服务器端生成的网站或静态网站)的...
Pjax = history.pushState + Ajax = history.pushState + Async JS + XML(xhr?) BOM对象history被增强了一波,主要是对历史栈的操作,以前只有 replace , go 之类的,都会跳转并刷新整个页面,现在有了 pushState ,...
Ajax-jquery-pjax.zip,pushState ajax=pjax,ajax代表异步javascript和xml。它是多种web技术的集合,包括html、css、json、xml和javascript。它用于创建动态网页,其中网页的小部分在不重新加载网页的情况下更改。
Laravel开发-laravel-pjax 用于PJAX的Laravel中间件。使用Ajax和PushState提供快速、无缝的浏览体验
Ajax-pjax.zip,轻松实现任何网站上的快速ajax导航(使用pushstate xhr),ajax代表异步javascript和xml。它是多种web技术的集合,包括html、css、json、xml和javascript。它用于创建动态网页,其中网页的小部分在不...
Ajax-fetch-pjax.zip,[beta]使用本机fetch api启用pjax(pushstate ajax)风格的导航,ajax代表异步javascript和xml。它是多种web技术的集合,包括html、css、json、xml和javascript。它用于创建动态网页,其中网页的...
pjax 是一个jQuery插件,它使用 ajax 和 pushState 来实现快速的浏览体验,包括真正的固定链接,页面标题和工作返回按钮。 ajax缺点是破坏了浏览器的前进后退,因为ajax的请求不会留在历史记录中。pjax就不一样了,...
pjax就不一样了,pjax被解释成ajax+pushState的封装,因为它把ajax的请求写入历史记录,并反映在地址栏,这样用户就能愉快地使用前进后退了。pjax有好几个实现方法,这里使用最常用的Jquery库,使用jquery.pjax.js。...
pjax .--. / \ ## a a ( '._) |'-- | _.\___/_ ___pjax___ ."\>... | | / | | jgs |___\_.\_ `-"--'---'pjax = pushState + ajax pjax 是一个 jQuery 插件,它使用 ajax 和 pushState 来提供具有真实永久链接、页面标题
PJAN是在Pjax基础上加入JSON支持的插件,原作者Welefen。 1.0版本详细文章: 作者:长岛冰泪 示例代码 jQuery(document).ready(function(w){ var $page_title=''; w.pjan({ selector: 'a',//选择器。可用jQuery...
基于java的博客系统 技术 Halo的新生离不开下面这些项目: :Spring的微服务框架 :模板引擎,使页面静态化 :阿里开发的连接池 :不需要写sql语句的持久层框架 :缓存框架 ... :pushState + ajax = pjax
barba.js 是一个小型(4kb 压缩和 gzipped)、灵活且无依赖的库,可帮助您在网站页面之间创建流畅和平滑的过渡。 它有助于减少页面之间的延迟,最大限度地减少浏览器 HTTP 请求并增强用户的 Web 体验。 使用 Barba...
铅} hy-push-state与和相似,但是提供了并且使您可以对其内部进行更多控制,以启用。 hy-push-state已被数百个站点用作 {:.external} Jekyll主题的一部分。 注意:当前版本仍是预发行版本。 公共API可能仍会以重要...
chrome浏览器为什么比一般的浏览器快呢?原因是chrome浏览器给全部页面都弄了预加载功能。 目前可能还是有少部分...所以这不单纯是Ajax,而是 pushState+Ajax ,即是PJAX,类似于整个页面的Ajax(和真实的Ajax有区别)
网上已经有了js的开源解决方案pushState。详见pjax 但是这个方案不适合我的项目(后台项目),尤其是主要的方法有点不够用。 我使用的是 jquery.history.js 可以参考这个 history.js 看下面的代码 <!DOCTYPE ...