一、pjax是什么
pjax是什么? 它是pushState和ajax的合称，相当于是ajax的plus版。
二、pjax是干什么的
说到pjax的作用，就不得不和ajax作比较的。
1. ajax的缺点
ajax缺点：对于每一次的ajax请求，浏览器都不会将其保存在历史记录中，因此当用户返回或前进时，将直接跳出该页面。
举个🌰：
打开浏览器，在地址栏中输入URL，回车：
然后点击按钮进行ajax请求：
可以发现请求前后的URL是保持不变的，如果这时点击浏览器的返回键，页面就会回到了最初的状态。
试想一下，如果我们构建一个web应用使用到ajax请求，那就可能意味着我们强行将用户浏览器的返回和前进按给钮扣掉了。
2. pjax的解决原理
pjax就是为了解决ajax上述问题、提高用户的体验而出现的，其使用的关键技术就是HTML5的pushState。
pushState又是什么呢？
pushState是HTML5中对history对象新增的方法，所以我们可以得知它是用来操作历史记录的方法，主要作用就是在不刷新网页的情况下改变URL。
使用语法：
pushState(state, title, url);
又一个🌰：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试</title>
<script src="https://media.alan123.xyz/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<button id="magic">变个魔术</button>
<script type="text/javascript">
$('#magic').click(function(event) {
history.pushState(null, null, Math.random() * 100);
});
</script>
</body>
</html>
点击“变个魔术”按钮，你会发现页面并没有刷新，但URL却已经改变了，这时你可以点击返回，URL会变成上一个URL，效果图如下：
pjax的使用
OK，了解了pushState，我们大致清楚了pjax的实现原理，接下来开始使用pjax，因为已经有人造好了轮子，所以我们可以直接使用，给个传送门。
使用方法：
$(document).pjax(element1, element2);
// element1为触发事件的元素，element2为装载返回内容的容器
最后一个栗子：
① test.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试</title>
<script src="http://media.alan123.xyz/jquery/3.3.1/jquery.min.js"></script>
<script src="http://media.alan123.xyz/jquery/pjax/jquery.pjax.js"></script>
</head>
<body>
<h3 id="content">这是标题！</h3>
<a href="test.php">ajax请求</a>
<script type="text/javascript">
$(document).pjax('a', '#content');
</script>
</body>
</html>
② test.php
<?php
echo 'Hello World';
结果就不上图，自己测试吧