主页 > 知识库 > pushState实现Ajax无刷新页面切换

pushState实现Ajax无刷新页面切换

热门标签:银行业务 服务器配置 团购网站 Mysql连接数设置 科大讯飞语音识别系统 Linux服务器 电子围栏 阿里云

前言

这样的需求很常见:点击页码局部更新页面(非整体刷新),并且产生历史管理。局部刷新很容易实现,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);
  })

大体的骨架就是这样。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

您可能感兴趣的文章:
  • pushState、replaceState、onpopstate 实现Ajax页面的前进后退刷新
  • 使用Yii整合的pjax(pushstate+ajax)实现无刷新加载页面
  • 使用ajax和history.pushState无刷新改变页面URL示例
  • 使用ajax实现无刷新改变页面内容和地址栏URL
  • 基于iframe实现类似于ajax的页面无刷新
  • ajax页面无刷新 IE下遭遇Ajax缓存导致数据不更新的问题
  • Ajax无刷新Url提交页面
  • JS+Ajax+Jquery实现页面无刷新分页以及分组 超强的实现
  • PHP Ajax实现页面无刷新发表评论
  • PHP Ajax实现页面无刷新发表评论

标签:衡水 大理 衢州 江苏 枣庄 萍乡 广元 蚌埠

巨人网络通讯声明:本文标题《pushState实现Ajax无刷新页面切换》,本文关键词  ;如发现本文内容存在版权问题,烦请提供相关信息告之我们,我们将及时沟通与处理。本站内容系统采集于网络,涉及言论、版权与本站无关。
  • 相关文章
  • 收缩
    • 微信客服
    • 微信二维码
    • 电话咨询

    • 400-1100-266