• 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

     
    我的旨在学过的东西不再忘记(主要使用艾宾浩斯遗忘曲线算法及其它智能学习复习算法)的偏公益性质的完全免费的编程视频学习网站: fanrenyi.com;有各种前端、后端、算法、大数据、人工智能等课程。
    博主25岁,前端后端算法大数据人工智能都有兴趣。
    大家有啥都可以加博主联系方式(qq404006308,微信fan404006308)互相交流。工作、生活、心境,可以互相启迪。
    聊技术,交朋友,修心境,qq404006308,微信fan404006308
    26岁,真心找女朋友,非诚勿扰,微信fan404006308,qq404006308
    人工智能群:939687837

    作者相关推荐

  • 相关阅读:
    Eclipse添加Android library错误的原因
    The primitive Java types
    TFS怎么查找一个用户提交的所有代码
    easyui tabs
    错误 CS0012 类型“xxx”在未引用的程序集中定义。必须添加对程序集“xxxx xxxxx”的引用
    Sql Server 列转逗号隔开的字符串 和 逆转
    DataTable程序分页 不推荐。
    EF执行存储过程并且返回DataSet
    EF运用成ADO.NET操作返回DataSet或者DataTable
    Sql 查询 表名 视图名称等
  • 原文地址:https://www.cnblogs.com/Renyi-Fan/p/13977637.html
Copyright © 2020-2023  润新知