标签：
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: previousState 12 }) 13 container.trigger(beforeReplaceEvent, [contents, options]) 14 container.html(contents) 15 16 container.trigger(‘pjax:end‘, [null, options]) 17 } else { 18 pjax(options) 19 }
标签：
原文地址：http://www.cnblogs.com/zolz/p/4882510.html
