星空网 > 软件开发 > Java

pjax

pjax是history.pustState与ajax的结合,用于实现当点击链接后,页面局部刷新,url改变,历史后退可以回退到之前页面。
pjax项目地址在 https://github.com/defunkt/jquery-pjax 
实际的效果见 http://pjax.heroku.com/
原理:
1.$(document).pjax('ul a', '#main')监听a标签事件,局部刷新id为mian的元素内容
2.当用户点击a链接后,缓存当前页面container内容,

var context = options.context = findContainerFor(options.container)

通过ajax请求,请求头信息添加

xhr.setRequestHeader('X-PJAX', 'true');

 

3.后台代码判断请求头是否包含“X-PJAX”,如果为true则返回局部页;如果为false,则返回newurl,通过 location.replace(newurl)实现跳转;
4.dom操作替换container内容,同时使用history.replaceState(object,title,url)替换当前url并产生历史;
object包含请求新页面的标题/url等信息

pjax.state = {   id: options.id || uniqueId(),   url: container.url,   title: container.title,   container: context.selector,   fragment: options.fragment,   timeout: options.timeout  }  if (options.push || options.replace) {   window.history.replaceState(pjax.state, container.title, container.url)  }

 

4.当点击后退触发onpopstate事件,执行container.html(contents)显示历史页面信息

 1 var cache = cacheMapping[state.id] || [] 2 var container = $(cache[0] || state.container), contents = cache[1] 3  4 if (contents) { 5     container.trigger('pjax:start', [null, options]) 6  7     pjax.state = state 8     if (state.title) document.title = state.title 9     var beforeReplaceEvent = $.Event('pjax:beforeReplace', {10      state: state,11      previousState: previousState12     })13     container.trigger(beforeReplaceEvent, [contents, options])14     container.html(contents)15 16     container.trigger('pjax:end', [null, options])17    } else {18     pjax(options)19    }

 





原标题:pjax

关键词:

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

从0到2000W的亚马逊创业笔记&运营方法(1):https://www.kjdsnews.com/a/569706.html
亚马逊主导美国体育用品市场,体育品类成香饽饽?:https://www.kjdsnews.com/a/569707.html
Shopee马来西亚本土店发货方式有哪些?:https://www.kjdsnews.com/a/569708.html
政策更新!退款不退货,亚马逊卖家如何止损?:https://www.kjdsnews.com/a/569709.html
亚马逊价格体系要整改?遭到官方正面狙击:https://www.kjdsnews.com/a/569710.html
多个品牌严抓商标侵权,这些词汇不能出现在listing!:https://www.kjdsnews.com/a/569711.html
别犹豫了,品牌种草营销就是现在!:https://www.kjdsnews.com/a/1836479.html
安能物流的2024:变革不能停:https://www.kjdsnews.com/a/1836480.html
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流