［经验总结］pushState＋ajax应用

在即将度过试用期的时候，借着今天学习的文章，整理一下前段时间作用户主页时用到的pjax。

近期我站的我的主页改版，将用户发布的各种做品放到一个页面上切换，附加筛选功能。
在作筛选及翻页的过程当中，咱们用到了pjax。即经过ajax获取数据，而后改变url连接，这样用户能够前进后退。就像这样→

上面的二级导航就是筛选用哒～

这个就是翻页。

翻页是由php直接渲染的，因此里面的连接也是php回传的。在筛选以后ajax回传数据里面，也带了翻页的数据，就能够直接添到里面。由于pushState和replaceState不能很好的兼容低版本IE，这里咱们用了jquery.history插件，在使用pushState或replaceState的时候触发 'statechange'事件。

由于ajax参数是做为a标签的连接形式写入翻页里，因此在翻页时须要将参数提取出来：

$('.pager').on('click', 'a', function(e) {
    e.preventDefault();
    var href = $(this).attr('href');
    if (!href) {
        return;
    };

    if ($(this).closest('.pager').hasClass('ajaxPage')) {
        changeState(href);
    } else {
        window.location.href = href;
    };
                
});

先阻止a标签的跳转，而后取出连接。这里有一处判断是不是ajax页，由于页面交互涉及到其余页面跳转过来的状况，因此ajaxPage做为判断［请忽略。。。

接下来就是使用pushState：

var changeState = function changeState(href) {
    var parmas;
    var href = href;
    //取出参数（使用插件）
    href = href.substring(href.indexOf('?'));
    parmas = $.query.parseNew(href).get();
    var subParmas = {
       /* state对象 */
    };
    var subHref;       
    /* 
    各类判断处理
    subHref为url要与后台约定
    */
    History.pushState(subParmas, $('title').text(), subHref);
};

而后等到pushState的时候会触发'statechange'，咱们再根据参数ajax取数据，最后呈现出来：

//当页面url更新时更新数据
History.Adapter ? History.Adapter.bind(window,'statechange',function(){
    var parmas = History.getState().data,
    $.when($.get(ajaxlink, parmas)).done(function(result) {
        /* 
        各类呈现处理 
        */         
    });
}) : '';

得益于pushState和replaceState的出现，以及jquery.history插件，这几行代码就能够有pjax效果。
嘛～～更多有关于pjax的应用，能够阅读学习浅析Web开发中前端路由实现的几种方式