pushState中怎么利用Ajax实现无刷新页面切换

pushState中怎么利用Ajax实现无刷新页面切换，很多新手对此不是很清楚，为了帮助大家解决这个难题，下面小编将为大家详细讲解，有这方面需求的人可以来学习下，希望你能有所收获。

创新互联公司是一家专业提供祁连企业网站建设,专注与网站建设、成都网站制作、H5网站设计、小程序制作等业务。10年已为祁连众多企业、政府机构等服务。创新互联专业网站设计公司优惠进行中。

一、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);
  })

看完上述内容是否对您有帮助呢？如果还想对相关知识有进一步的了解或阅读更多相关文章，请关注创新互联行业资讯频道，感谢您对创新互联的支持。

当前标题：pushState中怎么利用Ajax实现无刷新页面切换
本文地址：https://www.cdcxhl.com/article6/jeojog.html

成都网站建设公司_创新互联，为您提供响应式网站、手机网站建设、云服务器、自适应网站、网站建设、网站维护

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联