使用jQuery.PJAX来实现网站无刷新切换

最近晚上抽空将HelloJava.com修改成了PJAX,这个从首页大家点进来就可以看出来了。说到PJAX,可能很多人还以为我敲错了,不应该是AJAX么,其实PJAX是AJAX的一种应用,名字来自于ajaxa+pushState...

最近晚上抽空将HelloJava.com修改成了PJAX,这个从首页大家点进来就可以看出来了。

说到PJAX,可能很多人还以为我敲错了,不应该是AJAX么,其实PJAX是AJAX的一种应用,名字来自于ajaxa+pushState。

下面是一些PJAX的用法。

pjax 是一个jQuery插件,它使用 ajax 和 pushState 来实现快速的浏览体验,包括真正的固定链接,页面标题和工作返回按钮。

    ajax缺点是破坏了浏览器的前进后退,因为ajax的请求不会留在历史记录中。pjax就不一样了,pjax被解释成ajax+pushState的封装,因为它把ajax的请求写入历史记录,并反映在地址栏,这样用户就能愉快地使用前进后退了。pjax有好几个实现方法,这里使用最常用的jQuery库,使用jquery.pjax.js。演示代码的服务器端使用PHP脚本语言。

  Pjax用在那儿?就说百度云盘吧,这个大家肯定都用过。百度云盘PC端,在点击打开某个文件夹后会打开这个文件夹下的文件,其实显示文件的这个div就用到了pjax技术。地址栏变换,内容更换,但是却是一个ajax请求。等到后退的时候,不必重新请求上一层文件夹的内容,因为是存在在历史记录中的。而且,开发者还可以选择时候使用cache和storage缓存。

示例一、

<!DOCTYPE html>
<html>
	<head>
		<title>
			pjax
		</title>
		<meta charset="utf-8">
	</head>
	<body>
		<h1>
			My Site
		</h1>
		<div>
			Go to
			<a href="res1.php">
				第一页
			</a>
			.
			<a href="res2.php">
				第二页
			</a>
		</div>
		<div id="container">
		</div>
	</body>
	<script src="../jquery-2.1.4.min.js">
	</script>
	<script src="../jquery.pjax.js">
	</script>
	<script type="text/javascript">
		$(document).pjax('a', '#container')
	</script>

</html>

      

res1.jsp     

<div style='background:red;'>第一页</div>;

res2.jsp

           

<div style='background:red;'>第二页</div>

解释:$(document).pjax('a', '#Container')其中 a 是触发元素,#container 是装载 pjax 返回内容的容器,下面也是这样。

示例二、

<!DOCTYPE html>
<html>
	<head>
		<title>
			pjax
		</title>
		<meta charset="utf-8">
	</head>
	<body>
		<h1>
			My Site
		</h1>
		<div>
			<input type="button" id="clickMe" value="GO">
		</div>
		<div id="container">
		</div>
	</body>
	<script src="../jquery-2.1.4.min.js">
	</script>
	<script src="../jquery.pjax.js">
	</script>
	<script type="text/javascript">
		$(function() {
			$('#clickMe').click(function() {
				$.pjax({
					url: './res3.php',
					container: '#container'
				});
			});
		});
	</script>

</html>

服务器端代码:

res3.jsp

<div style='background:red;'>第三页</div>

三综合应用

           

window.history.pushState(state, title, url);
// https://developer.mozilla.org/zh-CN/docs/Web/API/History/pushState
// @状态对象:  记录历史记录点的额外对象,可以为空.
// @页面标题:  目前所有浏览器都不支持.
// @可选的URL: 浏览器不会检查URL是否存在,只改变URL.URL必须同域,不能跨域.

PJAX其实就是HTML5 window.history.pushState(state, title, url)这个新的API加上传统的AJAX技术,一般用来实现无刷新的页面加载.pushState的作用主要是:改变URL和添加返回历史.这样AJAX无刷新加载页面后,用户还可以正常进行后退和前进,JS的window.history.back()和window.history.forward()也能正常工作.下面就是一个用pushState + jQuery AJAX实现的无刷新的页面加载,不支持的浏览器则自动退化成打开原始的链接打开形式.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Index</title>
<script src="jquery.js"></script>
</head>
<body>
<div id="main">
    <a href="data.php">data.php</a>
    <script>
    $(document).ready(function() {
        $('#main').on('click','a',function(e) {
            if(window.history.pushState) {
                e.preventDefault(); //不跟随原链接跳转
                url = $(this).attr('href');
                $.ajax({
                    async: true,
                    type: 'GET',
                    url: 'data.php',
                    data: 'pjax=1',
                    success: function(data) {
                        window.history.pushState(null, null, url); //改变URL和添加返回历史
                        document.title = data.title; //设置标题
                        $('#main').html(data.main); //设置内容
                    }
                });
            } else {
                return; //低版本IE8等不支持HTML5 pushState,直接返回进行链接跳转
            }
        });
    });
    </script>
</div>
</body>
</html>

data.php:

 <?php if(isset($_GET['pjax'])) { //PJAX请求返回JSON
	$arr['title'] = 'Data';
	$arr['main'] = '<h1>Data Content</h1>'; //下面这两句是把PHP数组转成JSON对象返回
	header('Content-Type: application/json; charset=utf-8');
	echo json_encode($arr);
}
else { //常规请求返回HTML
?>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>
			Data
		</title>
		<script src="jquery.js">
		</script>
	</head>
	<body>
		<div id="main">
			<h1>
				Data Content
			</h1>
		</div>
	</body>

</html>
<?php } ?>

注意,JS统计代码应该放到main块里面才能正常统计页面访问数.

小结:Pjax实际就是从服务器端返回一段代码片段,而不用刷新页面,并且同时对 url 地址进行修改,这样可以节省资源加载,提升页面加载速度。


  • 发表于 2017-11-16 09:55
  • 阅读 ( 803 )
  • 分类:前端

条评论

请先 登录 后评论
不写代码的码农
三叔

422 篇文章

作家榜 »

  1. 小编 文章
返回顶部
部分文章转自于网络,若有侵权请联系我们删除