一、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';
结果就不上图,自己测试吧