看到pjax是不是联想到了ajax,其实它们中间还真是有联系的,当然我不是说他们的名字,pjax = pushState + ajax。
当我们的界面只有部分内容需要改变,我们不会希望它跳转并重新加载不需要改变的部分,这时候我们可以用到pjax。
github上有一个版本pjax form github(可能我比较蠢吧,咋整都没弄成功)还有一个版本是YUI的,这个文档比较详细,上手也很快,唯一的就是。。做这个的团队说他们将不会勤奋的维护了。YUI pjax下载地址
也可以直接在项目里导入<script src="http://yui.yahooapis.com/3.18.1/build/yui/yui-min.js"></script>
然后一个简单的示例:
<h1>Links</h1>
<ol>
<li><a href="page1.html" class="yui3-pjax">Page One</a></li>
<li><a href="page2.html" class="yui3-pjax">Page Two</a></li>
<li><a href="page3.html" class="yui3-pjax">Page Three</a></li>
</ol>
<div id="content"></div>
<script src="http://yui.yahooapis.com/3.18.1/build/yui/yui-min.js"></script>
<script>
YUI().use('pjax', function (Y) {
new Y.Pjax({container: '#content'});
});
</script>
在script函数里,需要改变的部分只有#content而已,这个就是异步加载过来的界面放置的容器。而被class="yui3-pjax"
装饰的a标签则是会那么异步处理的a标签。
原理大概是这样:
被class="yui3-pjax"
装饰的a标签,pjax在你点击这个a标签的时候它将会拦截起来,然后用异步的方法去访问,成功后将结果展示在你指定的容器里。
就这样