jQuery局部刷新插件Pjax

凨影 1247

Pjax是对Ajax + pushState的封装,可以实现网页的ajax加载,改变网页URL却不会刷新网页整体本身,避免重新加载网页中大部分的控件和插件。

pushState的功能具体来说就是修改url而页面无跳转,并且该url会被存放在历史记录中。

window.history.pushState(state, title, url);

pjax执行流程:

1. 触发事件后执行相关语句或者函数,包装成为ajax向服务器请求数据;

options = $.extend(true, {},
$.ajaxSettings, pjax.defaults, options) pjax.options = optionsvar xhr = pjax.xhr = $.ajax(options)

2. 给请求附加X-PJAX标识,服务器只会返回Container中的内容:

xhr.setRequestHeader('X-PJAX', 'true')
xhr.setRequestHeader('X-PJAX-Container', context.selector)

3. 更新Container的内容;

function pjaxReload(container, options) {
    var defaults = {
        url: window.location.href,
        push: false,
        replace: true,
        scrollTo: false
    }
    return pjax($.extend(defaults, optionsFor(container, options)))
}

4. pushState 方法把当前的页面的地址、标题等信息放入浏览器历史记录中

if (xhr.readyState > 0) {
    if (options.push && !options.replace) { // Cache current container element before replacing it
        cachePush(pjax.state.id, cloneContents(context)) window.history.pushState(null, "", options.requestUrl)
    }
    fire('pjax:start', [xhr, options]) fire('pjax:send', [xhr, options])
}
return pjax.xhr
}

5. 利用replaceState更新浏览器地址;

function locationReplace(url) {
    window.history.replaceState(null, "", pjax.state.url) window.location.replace(url)
}

GitHub传送门:

jQuery-pjax/blob/master/jQuery.pjax.js" target="_blank" title="https://github.com/defunkt/jQuery-pjax/blob/master/jQuery.pjax.js" _href="https://github.com/defunkt/jQuery-pjax/blob/master/jQuery.pjax.js">https://github.com/defunkt/jQuery-pjax/blob/master/jQuery.pjax.js

TAGS

联系QQ:77798085 赞助请点这里
管理员回复
    全部回复 (10)
    • Licong2019-3-22
      2
      完全看不懂!能详细点吗
      香港
      这个人很有个性,连签名都没有!
    • 3
      难得一见的好贴。。。。。。
      亚太地区
      这个人很有个性,连签名都没有!
    • liwenxuan2020-3-11
      4
      与人为善, 好运常伴!
      亚太地区
      这个人很有个性,连签名都没有!
    • 玉堂书书2020-4-8
      5
      面对如此强贴,论遇到多大阻力,只要我一息上尚存,就绝不会让它沉沦下去,这一点请楼主放心。
      亚太地区
      这个人很有个性,连签名都没有!
    • hsgsgsqqcom2020-5-1
      6
      难得一见的好贴。。。。。。
      亚太地区
      这个人很有个性,连签名都没有!
    • lohipoo2020-6-7
      7
      谢谢楼主,楼主辛苦!
      亚太地区
      这个人很有个性,连签名都没有!
    • asdf2020-6-7
      8
      楼主很辛苦,若是不回帖,心里过意不去,可是我打字实在不行,只好快速回复了,楼主不要见怪!
      亚太地区
      这个人很有个性,连签名都没有!
    • lczxl2020-6-11
      9
      楼主,我只是来混个熟的!老板,侬亿雷凑闹嫩了。
      亚太地区
      这个人很有个性,连签名都没有!
    • maer03012020-6-14
      10
      小手一抖, 金币到手!
      亚太地区
      这个人很有个性,连签名都没有!
    • 郭表帅2020-6-15
      11
      我要拿出这帖子奉献给世人赏阅,我要把这个帖子一直往上顶,往上顶!顶到所有人都看到为止!
      亚太地区
      这个人很有个性,连签名都没有!