异步加载界面pjax 刷新界面里的部分内容

看到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标签的时候它将会拦截起来，然后用异步的方法去访问，成功后将结果展示在你指定的容器里。
就这样