以前我们点击a链接的时候总是会刷新整个页面并跳转到新页面，中间可以很明显的看到短暂的白屏。pjax就很好的解决了这问题。
pjax的原理很简单，就是发送一个ajax请求，获取html代码，再把相关代码应用到指定容器中，就完成了pjax。pjax除了解决跳转白屏以外，还能替代iframe，让前端不得不使用iframe的场景大大减少。
一个最简单的pjax例子，只需要jQuery，不使用任何插件：
html:
<a class="leftPaneItem" onclick="writeMail()">写邮件</a> <div id="control"></div>
js:
function sentMail() { $.ajax({ url:"./writeMail.html", success:function (data) { $("#control").html(data) } }) }
这里对writeMail.html有些特殊要求，需要在普通html页面的基础上去掉html、meta、body、title等标签，仅保留body内的部分。
如果有引用样式或者脚本可以照常引用，只是路径是相对于发送请求的页面，而不是被请求的页面。
有封装好的插件吗？答案是有的。
插件地址：https://github.com/defunkt/jquery-pjax
使用pjax插件的话，上面的js就可以改成：
function sentMail() { $.pjax({ url:"./writeMail/writeMail.html", //请求的页面地址 container:"#control", //使用什么容器装载html push:false, //是否模拟a链接跳转造成的url改变 }) }
如果想快速将页面内所有a标签替换成pjax的跳转方式可以写成这样：
$(document).pjax(‘a‘, ‘#container‘)
其中a是触发元素，#container是装载pjax返回内容的容器。
如果被请求的页面已经包含html、body之类的标签，请求来之后又不想要这些标签，可以这样写：
function sentMail() { $.pjax({ url:"./writeMail/writeMail.html", //请求的页面地址 container:"#control", //使用什么容器装载html push:false, //是否模拟a链接跳转造成的url改变 fragment:"body" //css选择器，被选中dom的内容会被抽取出来 }) }
有一点需要注意：如果使用pjax插件并且在配置里不设置push选项为false，则要求项目内所有经过pjax处理的链接必须采用绝对路径，否则跳转后再次跳转到相对路径则会导致404。
