（转）PJAX的实现与应用

一、前言

web发展经历了一个漫长的周期，最开始很多人认为Javascript这们语言是前端开发的累赘，是个鸡肋，那个时候人们还享受着从一个a链接蹦到另一个页面的web神奇魔术。后来随着JavaScript的不断更新换代，他的功能不仅仅是为网页添加一点特效了，语言本身的加强以及对DOM操作能力的提升让他在前端大放光彩。尤其是ajax的出现，让JavaScript以及整个web的发展翻开了崭新的一页。

利用ajax局部刷新页面，相信很多人玩得相当熟练了。如果整个页面的刷新都是使用ajax，我们可以称之为一个webapp，所有的逻辑都是在当页处理，这种形式的页面带来的体验是十分不错的，减少了那些比较“冗余”的页面跳转、新开页面等。不过，webapp的代码是十分不好维护的，页面逻辑太多太深，出点小问题，整个页面就会瘫痪，而且不方便定位bug，可维护性很低。

二、PJAX的实现与应用

1.场景再现-ajax弊端

ajax是一个非常好玩的小东西，不过用起来也会存在一些问题。

我们可以利用ajax进行无刷新改变文档内容，但是没办法去修改URL，有童鞋要问，这里为什么一定要修改URL呢？一个URL代表一个特定的网络资源，ajax修改了页面的内容，所以用不同的URL去标识他们，这个还是挺有必要的。

比如我们设计了一个单词查询的页面，比较合理的UR应该是http://example.com/word，不同的word对应不同的内容，但是如果整个页面都是ajax实现，我们就没法去修改/word了，当然我们可以使用hash如http://example.com#word，但这样就不能很好的处理浏览器的前进和后退问题。如：在页面中查询了单词A的翻译，接着又查询了单词B，这个时候浏览器的浏览历史会生成http://example.com#A和http://example.com#B两个记录，可是当我们从B转回A的时候，AJAX的效果还停留在B的状态（页面显示的还是单词B的翻译）。部分浏览器对此问题引入了onhashchange的接口，只要URL的hash值发生变化，我们的程序就可以监听并做出相应。不过对于那些木有这个接口的浏览器，就得定时去判断hash的变化了。

而这样的方式对搜索引擎是十分不友好的，twitter和google约定使用hash bang (#!xxx)，也就是hash后面的第一个字符为感叹号，这样的网址他们是会爬取的，但是其他搜索引擎不支持。PJAX可以在改变页面内容的同时也改变他的URL，下面来说说PJAX和他的应用。

2.什么是PJAX

history API中有几个新特性，分别是history.pushState和history.replaceState，我们把pushState+AJAX进行封装，合起来简单点叫，就是PJAX~ 虽说实现技术上没什么新东西，但是概念上还是有所不同的。

PJAX的基本思路是，用户点击一个链接，通过ajax更新页面变化的部分，然后使用HTML5的pushState修改浏览器的URL地址，这样有效地避免了整个页面的重新加载。如果浏览器不支持history的两个新API或者JS被禁用了，那这个链接就只能跳转并重新刷新整个页面了。和传统的ajax设计稍微不同，ajax通常是从后台获取JSON数据，然后由前端解析渲染，而PJAX请求的是一个在服务器上生成好的HTML碎片，如下图所示：

客户端向服务器发送一个普通的请求（1），其实也就是点击了一个链接，服务器会相应这个请求（2），返回一个html文档。客户端向服务器发送一个有PJAX标志的请求（3），此时服务器只返回一个html碎片（4）。但是这两次请求都让客户端的URL变化了，希望上面的说明可以让你明白了PAJX和AJAX的区别了。

3.PJAX的实现

先看一个小DEMO吧，这个DEMO也写了我半个多小时，看之前先说明一下，打开你的现代浏览器（chrome，Firefox，opera，IE9+等），进入gallery页面，查看图片的时候注意观察浏览器的title和url变化，点击前进后退按钮也注意查看其变化。我已经在浏览历史管理中push了三条历史记录。

DEMO地址：http://qianduannotes.duapp.com/demo/PJAX/index.html

如果你还没有理解上面说的PJAX和AJAX的区别，看完这个demo，你应该有所领悟吧！在URL变化之后，页面并没有刷新，而是继续完成自己的动画（demo中为fadeOut）。

在HTML4，Histroy对象有下面属性方法：

  • length：历史堆栈中的记录数。
  • back()：返回上一页。
  • forward()：前进到下一页。
  • go([delta])：delta是个数字，如果不写或为0，则刷新本页；如果为正数，则前进到相应数目的页面；若为负数，则后退到相应数目的页面。

在HTML5中，新增了两个方法：

  • pushState(data, title [, url])：往历史堆栈的顶部添加一条记录。data为一个对象或null，它会在触发window的popstate事件（window.onpopstate）时，作为参数的state属性传递过去；title为页面的标题，但当前所有浏览器都忽略这个参数；url为页面的URL，不写则为当前页。
  • replaceState(data, title [, url])：更改当前页面的历史记录。参数同上。这种更改并不会去访问该URL。

当点击“上一张”、“下一张”这两个链接的时候，首先通过pushState修改URL以及修改document.title，那这个时候你就可以当做文档已经进入了另外一个链接了，然后该干什么干什么。demo中是让图片fadeOut，fadeOut完了之后让浏览器去加载资源，这个步骤就是正常的AJAX操作啦，没有什么特殊之处了~

因为只准备了三张图片，所有后台写的也比较简单：

<?php
error_reporting(false);

$num = $_GET[‘num‘];

if(array_key_exists(‘HTTP_X_PJAX‘, $_SERVER) && $_SERVER[‘HTTP_X_PJAX‘] === ‘true‘){
    if($num == 1) {
?>
        <div class="imgwrap">
            <img src="./images/1.jpg" />
        </div>
        <span><a href="num=2" class="next">下一张&gt;&gt;</a></span>
<?php
    } else if ($num == 2) {
?>
        <div class="imgwrap">
            <img src="./images/2.jpg" />
        </div>
        <span><a href="num=1" class="previous">&lt;&lt;上一张</a>
        <a href="num=3" class="next">下一张&gt;&gt;</a></span>
<?php
    } else {
?>
        <div class="imgwrap">
            <img src="./images/3.jpg" />
        </div>
        <span><a href="num=2" class="previous">&lt;&lt;上一张</a></span>
<?php
    }
}
?>

上面那张图中，我们看到了，并不是每个连接都使用PJAX来加载，如果有X_PJAX标识，我们才会添加相应的处理。js中稍加注意可以看到：

$.ajax({
    "url": "./interface.php",
    "data": {
        "num": num
    },
    "dataType": "html",
    "headers": {
        "X_PJAX": true
    }
});

请求中：

Accept:text/html, */*; q=0.01
Accept-Encoding:gzip,deflate,sdch
Connection:keep-alive
Host:qianduannotes.duapp.com
User-Agent:Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/31.0.1650.63 Safari/537.36
X-Requested-With:XMLHttpRequest
X_PJAX:true

我在请求的header中加了一个X_PJAX的头，而后台在处理的时候也做了判断：

function is_pjax(){
    return array_key_exists(‘HTTP_X_PJAX‘, $_SERVER)
            && $_SERVER[‘HTTP_X_PJAX‘] === ‘true‘;
}

并不是一定要求在header头部中加入X_PJAX的信息，你也可以在url中加入相关的参数，比如:http://example.com?pjax=1，或者其他方式，只要前后端达到一个共识就行。

三、开源的PJAX库

已经有人对这个东西做了封装，我就不重复造轮子了。

并不是页面中所有的链接都需要使用PJAX加载，所有在需要这个东西的a标签上加一个属性，如data-pjax=true，然后统一添加事件。

四、注意事项

  1. 如果浏览器不支持pushState接口函数，那就只能退化为ajax或者使用hash bang了~
  2. 本地环境下使用的话，浏览器会报错：`Uncaught SecurityError: A history state object with URL file:///E:/baidu_app/demo/PJAX/pic-2‘ cannot be created in a document with origin ‘null‘. ，所以如果你要测试的话，请把代码丢到服务器上！
  3. 为了得到更好的体验，PJAX经常配合localStorage来使用，把请求到的内容缓存到本地，再一次请求的时候先从本地查看。如果你的内容是动态变化的，缓存的时候加一个缓存时间，方便更新缓存。
  4. 还有一个容易忽略的东西是统计，使用PJAX只会局部刷新页面，如果忽略了对统计函数的更新，那就会让你失去很多数据。

五、参考资料

时间： 2024-10-11 14:39:18

（转）PJAX的实现与应用的相关文章

jquery.pjax.js bug问题解决集锦

jquery.pjax 是一个很好的局部刷新插件,但实际应用过程是还是会有很多小问题,部分问题解决如下: 1.pjax 局部加载时候,IE 存在缓存问题,很容易理解,pjax是通过jquery的ajax加载局部内容的,默认cache=true,这会导致ie下get数据从缓存中获取,解决办法是设置pjax options的cache=false,这样请求会自动变成如下方式: /XXXX?_pjax=%23pjax-container&_=1455092848927 2.pjax 与 jquery

Ajax保留浏览器历史的两种解决方案（Hash&amp;Pjax）

总是在github down点东西,github整个界面做的不错,体验也很好~对于其中的源代码滑动的特效最为喜欢了~刚开始以为这个只是普通的ajax请求效果,但是发现这个特效能够导致浏览器地址栏跟随变化,并且再点击前进后退按钮后又可以将代码滑回滑出~~于是乎就来研究下吧~ 一.通过锚点Hash实现: 在这方面其实国内很早就有做了,比如淘宝画报,通过的是在地址栏后面加#锚点实现的,浏览器是可以识别锚点为单位的历史记录的.但不是说页面本身有这个锚点,锚点的Hash只是起到一个引导浏览器将这次的记录推

Yii2 Pjax的简单使用

有两个例子:刷新时间和数据显示排序 1.刷新时间 (1)控制器中的方法:Time 1 2 3 4 public function actionTime()   {       return $this->render('time',['time'=>date("h:i:s")]);   } (2)视图中的显示:Time.php 1 2 3 4 5 6 7 8 9 <?php   use yii\widgets\Pjax;   use yii\helpers\Html;

PJax在jQuery 3.0无法运行问题修复

PJax在jQuery 3.0无法运行 [现象] 页面报错:Uncaught TypeError: Cannot read property 'push' of undefined [原因] jQuery3.0开始去除了$.event.props Breaking change: jQuery.event.props and jQuery.event.fixHooks removed jQuery's event handling performance increased thanks to

pjax不再神秘，hash、state那点事

如果最近打电话给武汉的小伙伴,他说信号不好,那么相信我,他肯定不是真的信号不好,也不是不想和你说话,而是他可能在冰箱里...武汉的天气从来都是喜怒无常的,是吧,屌丝气十足,今年也是丝毫看不出有任何逆袭的迹象和可能性,当然咱也没必要去操那个心:好吧,其实你把他看作是我也是可以的:不要联想,赶快进入正题: JS能一路从小丑变为白天鹅,跟ajax技术的风靡有莫大的关系,伴随H5.ES6.Nodejs的发展与普及,不断将前端推向新的高度,如今JS的地位如日中天啊! 用过backbone.Angular.

PJAX的实现与应用

一.前言 web发展经历了一个漫长的周期,最开始很多人认为Javascript这们语言是前端开发的累赘,是个鸡肋,那个时候人们还享受着从一个a链接蹦 到另一个页面的web神奇魔术.后来随着JavaScript的不断更新换代,他的功能不仅仅是为网页添加一点特效了,语言本身的加强以及对DOM操作能 力的提升让他在前端大放光彩.尤其是ajax的出现,让JavaScript以及整个web的发展翻开了崭新的一页. 利用ajax局部刷新页面,相信很多人玩得相当熟练了.如果整个页面的刷新都是使用ajax,我们

Pjax.js防刷新技术

自我感觉良好,所以拿出现在自己用的 Pjax.js 分享给大家 当然 这个版本是 经过本人修改后的版本,跟其它 拿过来就用的 不一样 而且区别还不小 大多的 Pjax 都是 跟后台无关的,而这个版本是跟后台有密切联系的 下面就是说下 代码 以及使用方法,包括后台 内容输出格式 先说说方法吧 引入 jQuery + Pjax.js (本站提供的代码) 下面就关键 运行代码 所接受的参数详解 selector: 绑定 Pjax 的链接 默认:"a[href]" container: 替换内

node+pjax实现不刷新跳转

做前端的都知道如果通过a标签去访问跳转到某一个页面,浏览器会自动刷新.那么如何实现不刷新跳转? html5的出现让我们可以实现不刷新跳转页面.主要使用的方法:history.pushState(data,str,url) .不知道的百度 h5  history api. 现在不用自己来造轮子,我们直接引入jquery.pjax.使用方法 https://github.com/defunkt/jquery-pjax/ 先来看我的前端代码: //$('document').pjax('html元素'

yii2 Pjax的使用

有两个例子:刷新时间和数据显示排序 1.刷新时间 (1)控制器中的方法:Time public function actionTime() { return $this->render('time',['time'=>date("h:i:s")]); } (2)视图中的显示:Time.php <?php use yii\widgets\Pjax; use yii\helpers\Html; ?> <? Pjax::begin()?> <?=Ht

jQuery pjax 简单入门

工作站要做一个类似百度云盘的项目,其中提到了pajx技术,之前从来没接触过这个玩意,今天小试牛刀.去网上找了一些教程,只能说百度相当不靠谱,找到的东西几乎都不能用,还是GitHub好,么么哒!https://github.com/defunkt/jquery-pjax! Pjax是ajax的升级版,怎么理解呢,当初学习ajax的时候讲了ajax的优缺点,其中一个缺点是破坏了浏览器的前进后退,因为ajax的请求不会留在历史记录中.pjax就不一样了,pjax被解释成ajax+pushState的封