Posted by:
努力记

努力记,通过记录,计划,让自己的努力可以触碰彩虹!

32,741

PJAX技术

  • 2013-06-25
  • 8 评论

pjax是对ajax + pushState的封装,让你可以很方便的使用pushState技术。

表现

如果你使用chrome或者firefox等浏览器访问github.com网站,你会发现大多数结构相同的页面之间的点击是通过ajax异步请求的,同时页面的URL发生了了改变(例如:个人资料页,项目管理页,代码浏览等),但能够支持浏览器前进和后退。
HTML5里引用了新的API,history.pushState和history.replaceState

在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。

就是通过以上2个接口做到无刷新改变页面URL的,在配合ajax,也就是现在的pjax技术的产生。
首先说下目前ajax为了实现以上效果(更改页面URL,并支持前进后退)的一些问题:

  1. 可以无刷新改变页面内容,但无法改变页面URL
  2. 为了更好的可访问性,内容发生改变后,通常改变URL的hash
  3. hash的方式不能很好的处理浏览器的前进、后退等问题
  4. 进而浏览器引入了onhashchange的接口,不支持的浏览器只能定时去判断hash是否改变,这种方式对搜索引擎很不友好

Pjax的操作流程

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

加入历史记录:

var state = {
    title: title,
    url: options.url,
    otherkey: othervalue
};
window.history.pushState(state, document.title, url);

state对象除了要title和url之外,你也可以添加其他的数据
replaceState和pushState是大致相同

在流程外,为了保证前进后退操作的体验一致:

响应页面中的onpopstate事件:

window.addEventListener('popstate', function(e){
  if (history.state){
    var state = e.state;
    //do something(state.url, state.title);
  }
}, false);

window对象上提供了onpopstate事件,history传递的state对象会成为event的子对象,这样就可以拿到存储的title和URL了(或者其他当时存储的数据)

对应后端的一些处理:

这种模式下除了当前使用ajax可以无刷新浏览外,还要保证直接请求改变的URL后也可以正常浏览,所以
对使用pushState的ajax发送一个特殊的头,如: setRequestHeader(‘PJAX’, ‘true’)。
则后端程序通过判断请求头确定当前请求是否是pjax请求,从而改变响应的内容

通过以上3步的补充,则完成pjax的整体过程

限制

  1. 传递的URL必须是同域下的,无法跨域
  2. state对象虽然可以存储很多自定义的属性,但对于不可序列化的对象则不能存储,如:DOM对象。
  3. 最关键的是只有HTML5才能实现该操作

说明:
本文内容大多转载于:http://www.welefen.com/use-ajax-and-pushstate.html(添加并组织了部分内容)
该作者的项目地址:  https://github.com/welefen/pjax, 目前支持jquery, qwrap, kissy 3个版本
以上项目的封装借鉴于https://github.com/defunkt/jquery-pjax
对其增加了缓存、本地存储和动画等功能,并且将一些参数进行了优化。



  1. Pingback: Youtube的跳转方式如何做到? | segment-解决方案

    • 兼容IE的代码大多指的是通过链接锚点进行类似操作
      几个支持pjax技术的框架都是用这个技术实现相同效果的
      Backbone.js

back up ↑

无觅相关文章插件,快速提升流量