Pjax.js防刷新技術

　　自我感受良好，因此拿出如今本身用的 Pjax.js 分享給你們

固然 這個版本是 通過本人修改後的版本，跟其它 拿過來就用的 不同 並且區別還不小

大多的 Pjax 都是 跟後臺無關的，而這個版本是跟後臺有密切聯繫的

下面就是說下 代碼 以及使用方法，包括後臺 內容輸出格式

先說說方法吧

1. 引入 jQuery + Pjax.js (本站提供的代碼)
2. 下面就關鍵 運行代碼 所接受的參數詳解
   
   • selector: 綁定 Pjax 的連接 默認："a[href]"
   • container: 替換內容的容器的 jQuery 選擇字符串 (非必須，必定很驚訝，這裏其實就是傳遞給後臺，須要什麼內容，具體的替換是 安後臺返回的替換) 默認： 「#content」
   • timeout: ajax 獲取內容超時時間 單位：毫秒 默認：9000
   • cache: 本地緩存時間有效期：單位: 秒 默認： false （不緩存）
   • titleSuffix: 標題後綴 能夠廢除的參數 暫時保留
   • filter: 是對 selector 的補充，也就是 對於不想 Pjax 的連接 返回 true,將用默認方式打開連接
   • callback: Pjax 處理完畢的回調函數， 頁面需從新 運行的代碼 （如幻燈； 或者其餘 需再次運行的 JS 代碼）
3. 後臺的返回數據解析 返回的是 JSON 數據，在後臺 PHP 處理以前確定是 Array (數組) 這裏爲了方便就以數組介紹 最後只需 用 json_encode($arr); 輸出
   下面一個一個的介紹 用途：
   • code: 返回碼 必須 正常 爲 200，出現錯誤的時候任意
   • msg: 返回消息提示 當 code 不等於 200 的時候輸出消息，能夠用於 ajax 評論失敗時候 的提示
   • title: 當前頁面標題，用於前臺輸出
   • html: 這裏是輸出的 數組 鍵名就是 前臺的 內同替換容器 內容就是 容器內須要替換的 HTML，前臺更新內容就根據此處內容爲準
   • scriptStr: 須要運行的 JS 代碼 字符串形式： 其中可用的 {url}, {title}, {pjax} 在前臺運行的時候 分別替換爲 網址 標題 與 pjax 狀態 (能夠是 state cache ajax)
   •  
   • 後臺判斷當前請求是否爲 Pjax 能夠經過頭文件判斷 $_SERVER['HTTP_X_PJAX']， 而 $_SERVER['HTTP_X_PJAX_CONTAINER'] 這是存儲前臺 JS 設置的 container （無關緊要）

要用瞭解的東西是真是很多
但好在是 本身寫的比較熟悉了

接着就是代碼部分了 JS 示例：

$.pjax({
  selector: 'a[href^="'+ BLOG_URL +'"]:not("[ja_link],[no-pjax]")',
  container: "#main,.top",    /* 替換 HTML 的選擇器 */
  cache: false,               /* 緩存時間 單位: 秒 默認: false (不緩存) */
  top: 0,                  /* 滾動條偏移 默認爲 0 */
  filter: function(u, e) {    /* 複雜的篩選器 返回 true 不須要 Pjax */
    if (/admin\/|rss\.php/i.test(u)) return true;
  },
  callback: pjaxCallback
});

$(document)
  // 提交方式 爲 GET 的表單 用 Pjax 處理
  .on('submit', 'form[method=get]', function(){
    var $t = $(this);
    $.pjax.pjaxGet($t.attr("action") +'?'+ $t.serialize());
    return false;
  })
  
  // #commentform 表單 EMLOG 默認 評論表單  (EMLOG 評論需修改 評論失敗提示用 msg 返回)
  .on('submit', '#commentform', function(){
    var $t = $(this), pid = $t.find('input[name=pid]').val();
    
    // 獲取 評論後須要滾動到的位置  若是爲 直接評論文章 就獲取 評論列表 #comments 高度
    if(pid == 0)
      var top = $('#comments').offset().top
    else
      // 若是 爲回覆其它評論 就獲取 被回覆評論 高度
      var top = $("#comment-" + pid).offset().top
    $.pjax.pjaxGet($t.attr("action"), $t.serialize(), {
      url: document.location.href,
      title: document.title,
      top: top - 20
    });
    return false;
  })

接着就是 PHP 後臺對於 Pjax 請求輸出的栗子：

die(json_encode(array(
  'code'      => 200,
  'msg'       => false,
  'html'      => array(
    '.top'      => 'class=top 輸出內容 本人博客 此處是 幻燈，若是不是首頁  不須要輸出幻燈的話，輸出 空內容便可',
    '#main'     => '這裏是 id=main 的 HTML 內容'
  ),
  'title'     => 'CSS 樣式練習 - 簡愛', // 頁面標題
   
  // 須要你運行的 JS 代碼 這裏是 Piwik 的 Ajax 統計 與自定義變量 用於統計 Pjax 事件
  'scriptStr' => '
    _paq.push(["setCustomVariable", 1, "pjax", "{pjax}", "page"]);
    _paq.push(["setCustomUrl", "{url}"]);
    _paq.push(["trackPageView", "{title}"]);'
)));