如何将Pjax整合进网站，实现全站无刷新加载？

本文来自：http://www.az1314.cn/art/17

pjax 是 HTML5 pushState 以及 Ajax 两项技术的简称，综合这两个技术可以实现在不刷新页面的情况下载入HTML网页，带给你超快速的浏览器体验，而且有固定链接、标题以及后退按钮都是有效的。

pjax工作原理

用大白话来说，就是ajax的升级版--可以动态记录历史记录的ajax技术。我们之前用ajax来做无刷新分页，一个最大的不足之处就是无法通过uri来标识这个资源以及历史记录倒退问题，通过利用html5 pushState的api，我们可以轻松达到发送ajax请求的同时，动态的记录状态，这就是pjax!

准备工作

pjax是嘛玩意我们懂了之后，就要开始用它了！但是我们要写一套复杂的js去pushState么？答案是不需要的，已经有人封装好了JqueryPjax插件，我们只需用人家写好的插件即可。

由于这款插件依赖于jquery,又依赖jq去操作pushState,所以必须下载1.7版本以上的JQ哦！

'text/javascript'  src= 'jquery-2.1.4.min.js' >
'text/javascript'  src= 'pjax.js' >

开始使用

模板中:

$(document).pjax( 'a' ,  '#pjax-container' );
$(document).on( "pjax:timeout" ,  function (event) {
    // 阻止超时导致链接跳转事件发生
    event.preventDefault();
});

本页面所有a链接默认用pjax请求数据，请求的数据放入id为pjax-container中。ps:如果前台模板有模板继承，直接写入父类即可。

后台程序、这里用php程序示范:

首先判断是pjax请求还是正常的请求，可以封装成一个方法(方法很多~我只做个示范):

protected  function  is_pjax(){
  $input  =  $_POST ;
  if (isset( $input [ '_pjax' ]) && ! empty ( $input [ '_pjax' ])){
      return  true; //是pjax请求
  } else {
      return  false; //不是pjax请求
  }
}

然后控制器根据是否pjax返回不同的数据:

if ( $this ->is_pjax()){
    return  view( 'index_pjax' ); //返回pjax的模板
}
return  view( 'index' ); //返回正常的模板

这里用laravel的方法展示了下，TP中是$this->display()这里不再赘述。

好了，此时大功告成！

解决问题

问题:原先容器绑定的事件被新容器替换掉了，新容器的div没有绑定事件，所以JQ等绑定的事件无效。如多说评论框无法正常使用。

解决:用pjax的加载完成后的回调函数再次绑定即可！

</code> </div> <div class="line number2 index1 alt1"> <code class="js plain">$(document).on(</code> <code class="js string">'pjax:complete'</code> <code class="js plain">, </code> <code class="js keyword">function</code> <code class="js plain">() {</code> </div> <div class="line number3 index2 alt2"> <code class="js spaces">    </code> <code class="js plain">pajx_loadDuodsuo();</code> <code class="js comments">//pjax加载完成之后调用重载多说函数</code> </div> <div class="line number4 index3 alt1"> <code class="js plain">});</code> </div> <div class="line number5 index4 alt2"> <code class="js keyword">function</code>  <code class="js plain">pajx_loadDuodsuo(){</code> </div> <div class="line number6 index5 alt1"> <code class="js spaces">    </code> <code class="js keyword">var</code>  <code class="js plain">dus=$(</code> <code class="js string">".ds-thread"</code> <code class="js plain">);</code> </div> <div class="line number7 index6 alt2"> <code class="js spaces">    </code> <code class="js keyword">if</code> <code class="js plain">($(dus).length==1){</code> </div> <div class="line number8 index7 alt1"> <code class="js spaces">        </code> <code class="js keyword">var</code>  <code class="js plain">el = document.createElement(</code> <code class="js string">'div'</code> <code class="js plain">);</code> </div> <div class="line number9 index8 alt2"> <code class="js spaces">        </code> <code class="js plain">el.setAttribute(</code> <code class="js string">'data-thread-key'</code> <code class="js plain">,$(dus).attr(</code> <code class="js string">"data-thread-key"</code> <code class="js plain">));</code> <code class="js comments">//必选参数</code> </div> <div class="line number10 index9 alt1"> <code class="js spaces">        </code> <code class="js plain">el.setAttribute(</code> <code class="js string">'data-url'</code> <code class="js plain">,$(dus).attr(</code> <code class="js string">"data-url"</code> <code class="js plain">));</code> </div> <div class="line number11 index10 alt2"> <code class="js spaces">        </code> <code class="js plain">DUOSHUO.EmbedThread(el);</code> </div> <div class="line number12 index11 alt1"> <code class="js spaces">        </code> <code class="js plain">$(dus).html(el);</code> </div> <div class="line number13 index12 alt2"> <code class="js spaces">    </code> <code class="js plain">}</code> </div> <div class="line number14 index13 alt1"> <code class="js plain">}</code> </div> <div class="line number15 index14 alt2"> <code class="js plain">

进一步优化

过渡动画效果:

pjax.js提供了两个api：

"loading" >
</code> </div> <div class="line number3 index2 alt2"> <code class="js plain">$(document).on(</code> <code class="js string">'pjax:send'</code> <code class="js plain">, </code> <code class="js keyword">function</code> <code class="js plain">() { </code> </div> <div class="line number4 index3 alt1"> <code class="js spaces">    </code> <code class="js plain">$(</code> <code class="js string">".loading"</code> <code class="js plain">).css(</code> <code class="js string">"display"</code> <code class="js plain">, </code> <code class="js string">"block"</code> <code class="js plain">);</code> <code class="js comments">//pjax链接点击后显示加载动画；</code> </div> <div class="line number5 index4 alt2"> <code class="js plain">});</code> </div> <div class="line number6 index5 alt1"> <code class="js plain">$(document).on(</code> <code class="js string">'pjax:complete'</code> <code class="js plain">, </code> <code class="js keyword">function</code> <code class="js plain">() { </code> </div> <div class="line number7 index6 alt2"> <code class="js spaces">    </code> <code class="js plain">$(</code> <code class="js string">".loading"</code> <code class="js plain">).css(</code> <code class="js string">"display"</code> <code class="js plain">, </code> <code class="js string">"none"</code> <code class="js plain">);</code> <code class="js comments">//pjax链接加载完成后隐藏加载动画；</code> </div> <div class="line number8 index7 alt1"> <code class="js plain">});</code> </div> <div class="line number9 index8 alt2"> <code class="js plain">

pjax与百度编辑器代码高亮

使用pjax后，百度编辑器的代码高亮是没效果的，在回调中使用SyntaxHighlighter.all()是没任何效果的，我们只需在回调函数里调用下SyntaxHighlighter.highlight()即可！

好了，关于pjax的教程就告一段落了~有不懂的可以私下问我~