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

pjax 和 ajax 的区别的更多相关文章

  1. JSON、JSONP、Ajax的区别

    什么是JSON JSON是一种基于文本的数据交换方式,或者叫做数据描述格式. JSON的优点: 1.基于纯文本,跨平台传递极其简单: 2.Javascript原生支持,后台语言几乎全部支持: 3.轻量 ...

  2. 关于JQuery中$.get()和$.post()和$.ajax()的区别和使用

    首先,这三个方法都是Ajax方法中一种与服务器交换数据的请求类型. 一.$.get() $.get() 方法使用 HTTP GET 请求从服务器加载数据. 使用格式: $.get(url,[data] ...

  3. jsonp和ajax的区别

    一.Ajax工作原理 相当于在用户和服务器之间加了—个中间层(AJAX引擎),使用户操作与服务器响应异步化.对于用户请求ajax引擎会做一些数据验证和数据处理,不是所有请求都提交给服务器,当需要从服务 ...

  4. 实时聊天-websocket与ajax的区别于联系

     Ajax是什么? Ajax,即异步JavaScript和XML,是一种创建交互式网页应用的网页开发技术.通过在后台与服务器进行少量数据交换,Ajax可以使网页实现异步更新,这意味着可以在不重新加载整 ...

  5. axios与ajax的区别及优缺点

    区别:axios是通过Promise实现对ajax技术的一种封装,就像jquery对ajax的封装一样,简单来说就是ajax技术实现了局部数据的刷新,axios实现了对ajax的封装,axios有的a ...

  6. websocket与ajax的区别浅析

    1.本质不同  Ajax,即异步JavaScript和XML,是一种创建交互式网页应用的网页开发技术:  WebSocket是HTML5一种新的协议,实现了浏览器与服务器全双工通信.其本质是先通过HT ...

  7. axios ajax fetch 区别

    请求方式千千万,axios是一种对ajax的封装,fetch是一种浏览器原生实现的请求方式,跟ajax对等

  8. vue-resource获取不了数据,和ajax的区别,及vue-resource用法

    前几天用vue-resource调用接口,用post方式给后端,发现后端php接受不到数据,这好奇怪,最后发现提交给后端的时候 需要加一个参数 就是:emulateJSON : true 这句话的意思 ...

  9. 原生js ajax与jquery ajax的区别

    原生js ajax的调用: ajax({ type : "get", url : "02_ajax_get.txt", data : { "userN ...

随机推荐

  1. javascript闭包使用 分类: JavaScript 2015-05-01 11:34 652人阅读 评论(3) 收藏

    之前看到一段代码,很是不能理解,然后就查找资料并且找网络上得大牛请教,最后弄懂了这段代码,然后就拿出来总结一下. 1.挖坑 先来看一段代码: var arrTest = []; for (var i ...

  2. 数据库报错com.mysql.jdbc.MysqlDataTruncation: Data truncation: Data too long for column 'ua' at row 1

    记一次报错记录,成长路上的点滴 明明使用浏览器或者微信开发工具调试接口没有问题,但是在真机测试时候就出问题了.(((¬_¬)) 500服务器内部错误,要死的节奏啊 登陆tomcat服务器 使用命令ta ...

  3. C语言求数组的第二大数

    nt second(int value[],int n) { ]; ]; ; ;i < n;i++) { if(value[i] > first) { second = first; fi ...

  4. yum命令速查

    1 yum的基本原理 CentOS可在yum服务器上下载官方网站给出的rpm给出的表头列表数据,该数据除了记载每个rpm软件的相依性之外,也说明了rpm所放置的容器(repository)所在.通过分 ...

  5. Java并发编程-核心问题(1)

    一.常见问题 从小的方面讲, 并发编程最常见的问题就是可见性.原子性和有序性问题. 从大的方面讲, 并发编程最常见的问题就是安全性问题.活跃性问题和性能问题. 下面主要从微观上分析问题. 二.可见性问 ...

  6. orcle查询记录的每天的第一条

    select * from (      select elec,time,Row_Number() OVER (partition by trunc(TIME) order by time) ran ...

  7. .Net4.5新特性:正则表达式超时介绍

    “Regex” 在数据验证方面最受欢迎.考虑到您可能对“Regex”完全陌生的.请参考我介绍Regex如何运作的视频. But because of the typical parsing logic ...

  8. Java虚拟机_运行时数据区

    Java虚拟机在执行Java程序的过程中会把它所管理的内存划分为若干个不同的数据区域. 这些区域都有各自的用途.各自的创建和销毁的时间,有的区域随着虚拟机进程的启动而存在,有些区域则是依赖用户线程启动 ...

  9. ReadWriteLock

    ReadWriteLock也是一个接口,只有两个方法 一个用来获取读锁,一个用来获取写锁.也就是说将文件的读写操作分开,分成2个锁来分配给线程,从而使得多个线程可以同时进行读操作.下面的Reentra ...

  10. 简单创建json格式文件

    简单创建json格式文件 核心就两点: addProperty 添加属性(也就是加键值对) add是添加 另外的object对象 然后直接toString()输出 核心代码如下; public cla ...