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不会变动，如没有此参数，每次点击时浏览视窗会自动跳转到网页顶部