前端技术-pjax是如何工作的?

前端技术-pjax是如何工作的?

归属感 发布于 2016-11-13 字数 581 浏览 1190 回复 2

最近用了用Google+, 发现它好像使用了pjax, 效果很赞。对于减少http请求和重复请求很有帮助,同时也改善了用户体验。我知道它使用了ajax, 但跟ajax又有区别。就是在点击导航链接时发生变化的是网页局部,但浏览器的url也跟着变了(跟链接加#!方式不同)。在github上也同样使用类似东东。
我想问题它的工作原理,是如何做到不刷新页面改变url的(非#号带参数方式)
还有就是有没有在不支持html5技术的浏览器上实现pjax的替代方案

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

灵芸 2017-10-05 2 楼

pjax是pushState+ajax的简写,主要是用到了html5的新History对象。
在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。

具体更改浏览器url的流程如下:

用ajax加载新内容。
加载完成新页面后,用history.replaceState方法修改当前的url。
用history.pushState将原来的页面加入历史记录。
使用document.title修改当前页的标题。

但是这个功能,只能在HTML5中才能够使用,如果要兼容HTML4,可以使用该一个History.js文件,支持多种js框架(包括jquery):
这里详细的API介绍:https://github.com/balupton/history.js

灵芸 2017-02-10 1 楼

pjax 的话可以直接用 jQuery 来做,会简单易行些

pjax 本身的逻辑简单,即通过 # 来分割 URL 的请求

比如访问 A 用户(ID:100456)信息为 http://www.url.com/index.html#user/100456

访问 B 用户(ID:567126)信息为 http://www.url.com/index.html#user/567126

那么通过 JS 去读取浏览器栏的 URL ,解析请求的目标

然后通过 Ajax 去请求,取回需要的数据

需要处理的是,在不同浏览器下,两次访问的 URL 能和一般请求连接一样前进和后退

因为再一些浏览器下,仅改变 # 后的内容,不会使得浏览器的前进后退按钮生效