pjax is the encapsulation of ajax + pushState, which can easily use pushState technology
When clicking a link in a site, it is not a page jump, but just a page refresh in the site. When the page is refreshed, the address on the browser address field will also be changed, and the browser's fallback function can also be used to roll back to previous page.
benefit:
1. User experience improvement
2. Reduce bandwidth consumption and server consumption
....
Official documentation:
https://github.com/defunkt/jquery-pjax
Demo (you need to run it in the server to see the effect)
To prevent the browser from directly accessing the link of a[href], return false in the method called by onclick; if you want to see the effect when going forward or backward, you need to reload the link and add a request to the popstate event
pjax1.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.select{color:red;}
</style>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('.pjax').bind('click',function(){
$('.select').removeClass('select');
$(this).addClass('select');
$.ajax({
type:'GET',
url:this.href,
success:function(data){
$('#container').html(data);
}
});
window.history.pushState({url:this.href},null,this.href);
return false;
});
window.addEventListener("popstate", function() {
$.ajax({
type:'GET',
url:location.href,
success:function(data){
$('#container').html(data);
}
});
});
})
</script>
</head>
<body>
<a href="pjax2.html" class="pjax">页面2</a>
<a href="pjax3.html" class="pjax">页面3</a>
<div id="container">页面1</div>
</body>
</html>
pjax2.html
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
page 2
</body>
</html>
pjax3.html
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
page 3
</body>
</html>