黄聪：pjax使用心得总结

初次结识pjax是在使用tower时钟发现的。当时使用时发现网站可以局部刷新，当然我们知道使用ajax也是可以实现局部刷新的。

然而我们知道，使用ajax进行局部刷新时网站的title是不会变化的，并且使用浏览器的后退按钮也不能使网站返回上个状态，这时候我们就需要使用pjax了。

关于pjax，推荐先阅读几个文章

http://my.oschina.net/sub/blog/123447?fromerr=s5Bgun3z

https://github.com/defunkt/jquery-pjax 为pjax的github项目地址

在github的项目地址里有关于pjax的详细说明和使用方法，这里不再赘述，本文主要是使用中的一些代码记录和使用心得，方便以后查阅快速上手使用。

看下下述小段代码：

<div class="body">
<?php $action_name = $Think.ACTION_NAME; ?>
<?php if ($action_name == 'news'): ?>
<include file="Brand:header_news" />
<?php elseif ($action_name == 'forum'): ?>
<include file="Brand:header_forum" />
<?php endif; ?>
<div class="cb"></div>
<div class="brand-news-nav pjax">
<ul class="clearfix">
<li <?php if($_GET['cat'] == '') echo 'class="selected"'; ?>><a class="first" href="{:U("Brand/$action_name")}">全部</a></li>
<volist name="cat_list" id="vo" key="i">
<li <?php if($_GET['cat'] == $vo['id']) echo 'class="selected"'; ?>><a href="{:U("Brand/$action_name",array('cat'=>$vo['id']))}">{$vo.name}</a></li>
</volist>
</ul>
</div>
<script type="text/javascript">
$(function(){
$(document).pjax('.pjax a', '#pjax-container',{
type:'post',
scrollTo:false,
});
$(document).on('pjax:click', function() {
enable_loading = false;
})
$(document).on('pjax:send', function(){
var str = "<p class='tc mt-10'>加载中...</p>";
$('#pjax-container').html(str);
})
//最后一个右侧加边框
$(".brand-news-nav ul li").last().children('a').addClass('last');
$(".brand-news-nav ul li").click(function(){
$(this).addClass('selected').siblings().removeClass('selected');
})
})
</script>
<div class="wrap clearfix">
<div class="brand-news-list fl" id="pjax-container">
<include file="Brand:article_pjax" />
</div>
<div class="brand-news-right fr pb-20">
<a href="{$adv3[0]['url']}"><img class="scrollLoading" data-url="{$adv3[0]['images']|showImagePath}" src="__PUBLIC__/index/images/loading270x160.gif" width="260" height="150"></a>
<p class="title mt-10">法律支持</p>
<ul class="bgc-fff">
<volist name="law_list" id="vo">
<a href="{:U('law',array('id'=>$vo['id']))}"><li>{$vo.name}</li></a>
</volist>
</ul>
<button class="btn btn-right mt-10 btn-consult">免费咨询</button>
<script type="text/javascript">
$(function(){
//最后一个需要添加一个last的样式
$(".brand-news-right li:last").addClass('last');
})
</script>
</div>
</div>
</div>

服务器端处理

if(is_pjax()){
$this->display('article_pjax');
}else{
$this->display('article');
}

//判断是否是pjax请求
function is_pjax(){
return array_key_exists('HTTP_X_PJAX', $_SERVER) && $_SERVER['HTTP_X_PJAX'];
}

其中的主要思想就是当 .pjax a 进行点击的时候，将#pjax-container的内容替换为请求后的内容。在后端处理时需要判断是否是pjax请求，如果是需要进行局部渲染，如果不是进行全部渲染。

因为pjax用到了html5技术，如果浏览器不支持html5那么网站会正常进行跳转式的加载，如果支持那么只是进行局部渲染（但是浏览器地址栏中的url会正常跟着a链接进行变动）。

注意上述的js代码中在配置pjax时有个参数scrollTo:false,加上此参数表示点击连接后网页的scrollBar不会变动，如没有此参数，每次点击时浏览视窗会自动跳转到网页顶部

Pjax

黄聪：pjax使用心得总结