［經驗總結］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開發中前端路由實現的幾種方式