jQuery的Pjax插件，Pjax即pushState + Ajax，是实现无刷新ajax加载并解决浏览器前进和后退问题的一个开源实现。优于ajax无刷新的是，pjax在实现无刷新更改页面时，同时更改了url。
1、我们只需在前端页面中引入jquery和pjax插件。如下代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf8">
<title>pjax测试</title>
<script type="text/javascript" src="jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="jquery.pjax.js"></script>
<style type="text/css">
#main{border:1px solid red;width: 1000px;height: 500px;margin: 0px auto}
.click{margin: 0px auto;text-align: middle;width: 1000px;margin-top: 20px;}
</style>
</head>
<body>
<div id="main"></div>
<div class="click">
<button class="red">红色模板</button>
<button class="green">绿色模板</button>
</div>
<script type="text/javascript">
$('button').bind('click',function(){
var color=$(this).attr('class');
$.pjax({
url: 'change.php?color='+color,
container: '#main'
})
});
</script>
</body>
</html>2、后端用php实现
<?php
$color=$_GET['color'];
if($color){
$path=$color.'.html';
include($path);
}
而red.html和green.html是这样的，无非是一段不同背景的html。
<div id="color" style="background-color:red;width:100%;height:100%;"></div>
这样我们就实现了，点击按钮无刷新地更改id="main"的div内容，并且，url是随着请求的地址一起变的。
总结：
1、pjax不能在后端直接输出字符串，必须是html包裹的内容，否则就是页面直接刷新了。
2、如果想在后端实现复杂的判断等功能，$_SERVER['HTTP_X_PJAX']，可以提供判断是否为pjax请求。