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}"]);‘
)));

Pjax.js防刷新技术

标签：

原文地址：http://www.cnblogs.com/bccn/p/4887295.html