ajax和pjax有什么区别

ajax和pjax有什么区别

一、总结

一句话总结：

pjax 的【核心其实还是 ajax】，所以如果是 ajax 去做这种局部 html 刷新的话需要写更多的代码，而 pjax 已经做的很好了。

pjax 是一个 【jQuery 插件】，它通过 【ajax 和 pushState 技术提供了极速的（无刷新 ajax 加载）浏览体验】，并且保持了真实的地址、网页标题，浏览器的后退（前进）按钮也可以正常使用。

ajax请求的页面可能【不会被搜索引擎收录】，而pjax没有这方面的问题

1、pjax 的工作原理？

pjax 的工作原理是【通过 ajax 从服务器端获取 HTML，在页面中用获取到的 HTML 替换指定容器元素中的内容】。

然后【使用 pushState 技术更新浏览器地址栏中的当前地址】。

2、pjax 为什么会有更快的浏览体验？

不存在页面资源（js/css）的重复加载和应用；

如果服务器端配置了 pjax，它可以只渲染页面局部内容，从而避免服务器渲染完整布局的额外开销。

3、pjax 实例？

a标签里面写了地址，点击的话触发ajax，但是阻止a标签的点击事件

<nav id="tab">
  <a href="./introduction.html">简介</a>
  <a href="./dynamic.html">动态</a>
  <a href="./gift.html">礼包</a>
  <a href="./service.html">开服</a>
  <a href="./strategy.html">攻略</a>
</nav>
<div id="con"></div>
<script>
    $("#tab a").click(function(){
        //发起ajax请求
        $.ajax({
           url: "./introduction.html",//注意：这里实际情况应该是根据点击的不同a标签加载不同页面
           data: {key: 'ajax'}//注意：这是必须的参数标识
           success: function(html){
              //将请求回来的内容添加到下面的内容div
              $("#con").html(html);
           }
        });
        return false; // 阻止 A 链接跳转
    });
</script>

二、ajax和pjax有什么区别

转自或参考：pjax 和 ajax 的区别
https://www.cnblogs.com/hihtml5/p/9897353.html

pjax 是一个 jQuery 插件，它通过 ajax 和 pushState 技术提供了极速的（无刷新 ajax 加载）浏览体验，并且保持了真实的地址、网页标题，浏览器的后退（前进）按钮也可以正常使用。
pjax 的工作原理是通过 ajax 从服务器端获取 HTML，在页面中用获取到的 HTML 替换指定容器元素中的内容。然后使用 pushState 技术更新浏览器地址栏中的当前地址。以下两点原因决定了 pjax 会有更快的浏览体验：

• 不存在页面资源（js/css）的重复加载和应用；
• 如果服务器端配置了 pjax，它可以只渲染页面局部内容，从而避免服务器渲染完整布局的额外开销。

从官网的这段描述中可看出 pjax 的核心其实还是 ajax，所以如果是 ajax 去做这种局部 html 刷新的话需要写更多的代码，而 pjax 已经做的很好了。

pjax 的使用方法：使用 pjax 一般需要后台配合，比如 java 后端可以写个过滤器过滤当前请求，如果包含 X-PJAX 请求头 (说明是 pjax 请求) 那么只需要返回局部 html 代码，剩下的交给前端 pjax 插件渲染就好，如果不包含则返回完整 html 代码(包含头尾的 html 代码，不包含 X-PJAX 说明是普通请求)

使用 pjax 的好处：由于搜索引擎的蜘蛛不会执行 javascript，所以如果你的页面是 ajax 方式加载将不会被引擎收录，比如：

<nav id="tab">
  <a href="javascript:void(0);">简介</a>
  <a href="javascript:void(0);">动态</a>
  <a href="javascript:void(0);">礼包</a>
  <a href="javascript:void(0);">开服</a>
  <a href="javascript:void(0);">攻略</a>
</nav>
<div id="con"></div>
<script>
	$("#tab a").click(function(){
		//发起ajax请求
		$.ajax({
		   url:"./introduction.html",//注意：这里实际情况应该是根据点击的不同a标签加载不同页面
		   success: function(html){
			   //将请求回来的内容添加到下面的内容div
			   $("#con").append(html);
		   }
		});
	});
</script>

除了主页会被收录，简介、动态、礼包…这几个页面将不会被收录，因为引擎蜘蛛爬取主页时会顺着 a 标签的 href 爬取另一个页面，而不会执行 javascript。
如果使用 pjax，就可以解决这种问题（注意：这里为了使代码直观提供的是 ajax 的解决代码，并未使用 pjax，解决思路一样，使用 pjax 可以使代码更简化），页面可以这样修改：

<nav id="tab">
  <a href="./introduction.html">简介</a>
  <a href="./dynamic.html">动态</a>
  <a href="./gift.html">礼包</a>
  <a href="./service.html">开服</a>
  <a href="./strategy.html">攻略</a>
</nav>
<div id="con"></div>
<script>
	$("#tab a").click(function(){
		//发起ajax请求
		$.ajax({
		   url: "./introduction.html",//注意：这里实际情况应该是根据点击的不同a标签加载不同页面
		   data: {key: 'ajax'}//注意：这是必须的参数标识
		   success: function(html){
			  //将请求回来的内容添加到下面的内容div
			  $("#con").html(html);
		   }
		});
		return false; // 阻止 A 链接跳转
	});
</script>

后台代码可以这样处理，php 为例：

$isAjax = $_GET["key"];
$con = include 'con.php';
if($isAjax == "ajax"){
	echo $con;
}else{
	$head = include 'head.php';
	$foot = include 'head.php';
	echo $head + $con + $foot;
}

如果请求中的参数 key 的值是“ajax” 则只输出部分内容，否则则输出包含头部底部等完整内容。

参考：pjax 中文文档、ajax 如何做到 SEO 友好

转载自：http://meia.fun/article/1540982577311