pushState实现Ajax无刷新页面切换


            前言

这样的需求很常见：点击页码局部更新页面（非整体刷新），并且产生历史管理。局部刷新很容易实现，ajax可以满足我们的需要，但是这并不会产生历史管理，好在html5给我们提供了几个好用的api方便解决这个问题，见下文。

正文

一、API

1、pushState 



pushState()有三个参数：一个状态对象、一个标题（现在会被忽略），一个可选的URL地址。 

state：与要跳转到的URL对应的状态信息。 

title：空字符串（以后可能有用）。 

url：要跳转到的URL地址，不能跨域。

作用：将当前URL和history.state加入到history中，并用新的state和URL替换当前。不会造成页面刷新。

2、replaceState 



history.replaceState()操作类似于history.pushState()，不同之处在于replaceState()方法会修改当前历史记录条目而并非创建新的条目。

3、window.onpopstate 



history.go和history.back（包括用户按浏览器历史前进后退按钮）触发，并且页面无刷的时候（由于使用pushState修改了history）会触发popstate事件，事件发生时浏览器会从history中取出URL和对应的state对象替换当前的URL和history.state。通过event.state也可以获取history.state。

二、实现

场景很简单，点击按钮下面的div中出现不同的图片及标题，使用ajax刷新，并且产生历史管理。





<p class="page">

  <a href="javascript:;">[ <span>1</span> ]</a>

  <a href="javascript:;">[ <span>2</span> ]</a>

  <a href="javascript:;">[ <span>3</span> ]</a>

  <a href="javascript:;">[ <span>4</span> ]</a>

</p>

<div>

  <img />

  <p class="title"></p>

</div>



核心代码





  function setUrl(page){

    var url = location.pathname + '?page=' + page;

    history.pushState({

      url : url

    },'',url);

  }

//每次点击按钮的时候就往历史记录里面增加一个条目







注意首次载入的时候需要首次载入替换一下历史记录





  (function(){

    //默认显示第一页

    var url = location.pathname + '?page=1';

    //修改当前的历史记录

    history.replaceState({

      url : url

    },'',url); 

  })()



监听window的popstage事件，事件发生时取到当前历史对应的页码，然后执行ajax





  window.addEventListener('popstate',function(){

    var page = getPage();

    xhr(page);

  })



大体的骨架就是这样。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持中文源码网。