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

大体的骨架就是这样。

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

赞 (0)

相关推荐

  • JS+Ajax+Jquery实现页面无刷新分页以及分组 超强的实现第1/2页

    复制代码 代码如下: <%@ Page language="c#" Codebehind="GroupText.aspx.cs" AutoEventWireup="false" Inherits="test1.GroupText" %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" > <HTML&g

  • pushState、replaceState、onpopstate 实现Ajax页面的前进后退刷新

    pushState、replaceState、onpopstate 实现Ajax页面的前进后退刷新

    使用Ajax可以异步获取数据,可以更高效地渲染页面. 但也存在这一些问题: 再刷新页面,页面就会变成初始的状态 浏览器的前进后退功能无效 对搜索引擎的爬虫抓取不友好 1. 早前会使用浏览器的 hash锚点 来解决 不同的hash标记着页面不同的部分,能修正页面刷新数据不正确的问题 再通过 onhashchange 事件监听hash锚点的变化,手动进行前进后退操作,浏览器支持度 2. 随后出现一种 hashbang 的技术,即在url后加上标记 #!/myPath 来解决上述的问题 通过一个路径定

  • 使用ajax实现无刷新改变页面内容和地址栏URL

    在访问现在很火的google plus时,细心的用户也许会发现页面之间的点击是通过ajax异步请求的,同时页面的URL发生了了改变.并且能够很好的支持浏览器的前进和后退.不禁让人想问,是什么有这么强大的功能呢? HTML5里引用了新的API,就是history.pushState和history.replaceState,就是通过这个接口做到无刷新改变页面URL的. 与传统的AJAX的区别 传统的ajax有如下的问题: 虽然ajax可以无刷新改变页面内容,但无法改变页面URL 其次为了更好的可访

  • 使用Yii整合的pjax（pushstate+ajax）实现无刷新加载页面

    使用Yii整合的pjax（pushstate+ajax）实现无刷新加载页面

    Pjax是啥? Pjax = history.pushState + Ajax = history.pushState + Async JS + XML(xhr?) BOM对象history被增强了一波,主要是对历史栈的操作,以前只有 replace , go 之类的,都会跳转并刷新整个页面,现在有了 pushState , replaceState 等等单纯操作历史栈的方法,只是单纯修改历史栈里的内容,没有副作用(页面不会跳转刷新) PJAX效果 通过url可以跟踪ajax的动态加载内容.这种

  • ajax页面无刷新 IE下遭遇Ajax缓存导致数据不更新的问题

    在做ajax页面无刷新添加的时候,IE下遭遇Ajax缓存,因为刚开始并不知道IE有这个坏毛病,折腾好久,终于解决问题. 总结一下解决办法: 在IE下用Ajax请求某一页面,通常会因为缓存的原因而返回上一次的结果,造成混乱,[即get方式时,获取数据,因发送参数和地址都一致,故IE浏览器会从缓存中取,而不会去请求服务器端,而post方式因为参数的不同,不会产生这个问题]而FF下不会出现这种情况.为了不受缓存影响,可以这样做: IE访问策略: Internet选项--浏览历史记录--设置-- Int

  • PHP Ajax实现页面无刷新发表评论

    PHP Ajax实现页面无刷新发表评论

    大家都有在网站发表评论的经历,传统的发表过程无非是:发表->提交页面表单->等待刷新页面,这样在网络比较拥挤的时候,往往需要漫长的等待,今天介绍用PHP+Ajax实现页面无刷新发表评论,希望对初学ajax的PHPer有所帮助. 那么首先,我们需要一个基本的ajax开发框架,文件ajax.js就包含了这个框架,代码如下: var http_request=false;  function send_request(url){//初始化,指定处理函数,发送请求的函数    http_request

  • 使用ajax和history.pushState无刷新改变页面URL示例

    表现 如果你使用chrome或者firefox等浏览器访问本博客.github.com.plus.google.com等网站时,细心的你会发现页面之间的点击是通过ajax异步请求的,同时页面的URL发生了了改变.并且能够很好的支持浏览器前进和后退. 是什么有这么强大的功能呢? HTML5里引用了新的API,history.pushState和history.replaceState,就是通过这个接口做到无刷新改变页面URL的. 与传统的AJAX的区别 传统的ajax有如下的问题: 1.可以无刷新

  • Ajax无刷新Url提交页面

    尤其是在Jquery,porotype,Ext等框架流行之后,大量简化的代码可说是为程序员带来了福音, 从繁重的代码工作之中解脱出来,轻易的就可以实现过去书写复杂的功能. 不过有利有弊,到如今,习惯了使用各种框架,而很少自己书写内部源码的程序员们,还有几个记得Ajax那其实并不算复杂的基本代码呢? 今天,为了不遗忘当初的热忱,我把这基础的代码再贴出来,给自己回顾一下. 1.对于Ajax来说,判断浏览器的类别是一个重复而且毫无新意的工作,这段代码完全可以封装起来,随意调用. 复制代码 代码如下:

  • 基于iframe实现类似于ajax的页面无刷新

    本方法是基于iframe实现的,需求是form表单提交带有文件上传的input标签,因此不能使用ajax来提交 首先: 复制代码 代码如下: <form id="form0" action="${pageContext.request.contextPath}/news/baikeAdd.form" enctype="multipart/form-data" method="POST" target="hidd

  • pushState实现Ajax无刷新页面切换

    前言 这样的需求很常见:点击页码局部更新页面(非整体刷新),并且产生历史管理.局部刷新很容易实现,ajax可以满足我们的需要,但是这并不会产生历史管理,好在html5给我们提供了几个好用的api方便解决这个问题,见下文. 正文 一.API 1.pushState pushState()有三个参数:一个状态对象.一个标题(现在会被忽略),一个可选的URL地址. state:与要跳转到的URL对应的状态信息. title:空字符串(以后可能有用). url:要跳转到的URL地址,不能跨域. 作用:将

  • Ajax回退刷新页面问题的解决办法

    Ajax 简介: AJAX即"Asynchronous Javascript And XML"(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术. AJAX = 异步 JavaScript和XML(标准通用标记语言的子集). AJAX 是一种用于创建快速动态网页的技术. 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新. 传统的网页(不使用 AJAX)如果需要更新内容,必须

  • ajax无刷新分页的简单实现

    本文实例为大家分享了ajax无刷新分页的具体代码,供大家参考,具体内容如下 html页 <html> <head> <title></title> <style type="text/css"> table{ border:solid 1px #444; background-color:Aqua;} table td{border:solid 1px #444;} </style> <script src=

  • 简单实现Ajax无刷新分页效果

    简单实现Ajax无刷新分页效果

    Ajax无刷新分页效果,如下代码实现 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Ajax无刷新分页效果</title> <script type="text/javascript"> function showpage(url) { var xhr = new XML

  • 基于jquery实现ajax无刷新评论

    基于jquery实现ajax无刷新评论

    jquery实现ajax无刷新评论需要用的技术:(本次试验用的是"jquery-1.4.2.js"版本的jquery) $.post("一般处理程序路径",{以字典的形式传递参数},function(data,status){``````}); jquery中的基本选择器操作: 首先创建数据库"T_article": 主键设置自增: 然后创建一个强类型的DataSet. 接着创建一个"无刷新评论.aspx"页面: 页面代码如下

  • jQuery实现ajax无刷新分页页码控件

    jQuery实现ajax无刷新分页页码控件

    这段时间在做公司项目的时候需要用到ajax进行分页(点击页码也是无刷新的显示上一页或下一页的内容,不是一般的选择跳转),但是在网上找了一下,大部分分页插件都是直接刷新跳转的,感觉和我的需求差距比较大,就自己动手写了一个可以实现自己需要的功能的js来实现这个控件,实现的效果如下: 因为业务需要,我需要在一个页面创建多个这样的页码控件(有些是在ajax中生成的),显然为每一个控件写一个专属的js是不现实的,所以,我将公共部分提取出来,然后通过传入的选择器不同,对不同的控件进行相应方法的调用. 下面是

  • PHP+Ajax无刷新带进度条图片上传示例

    PHP+Ajax无刷新带进度条图片上传示例

    项目需求:1.PHP+Ajax无刷新带进度条图片上传,2.带进度条.所需插件:jquery.js,jquery.form.js. 最近在做一个手机web项目,需要用到Ajax上传功图片能,项目要求PHP无刷新上传图片,并且要带进度条,下面就来讲一下我的实现方法,先看效果图 本示例需要使用的是jquery.js,jquery.form.js,demo里面包含有,你可以在文章下方进行下载. 第一步,建立前端页面index.html 此段是前端展示内容,这里需要说明的是由于input:file标签显示

  • 详解PHP+AJAX无刷新分页实现方法

    PHP+AJAX无刷新分页实现代码详解,最近在看ajax 教程,就想写个简单入门的PHP+AJAX无刷新分页,我们依据ajax开发框架,代码如下: var http_request=false; function send_request(url){//初始化,指定处理函数,发送请求的函数 http_request=false; //开始初始化XMLHttpRequest对象 if(window.XMLHttpRequest){//Mozilla浏览器 http_request=new XMLH

  • php+ajax无刷新分页实例详解

    本文实例讲述了php+ajax无刷新分页实现方法.分享给大家供大家参考,具体如下: ajax_page_show_userinfo.php页面如下: <meta 'Content:text/html;charset=utf-8'></meta> <title>ajax分页演示</title> <script language="javascript" src="js/ajaxpage.js"></sc

  • ajax无刷新验证注册信息示例

    ajax无刷新验证注册信息示例

    ajax无刷新验证注册信息示例,其大概思路如下: 一.把注册的html页面做好(html+css) 1.不需要form表单,直接用div包着 2.需要四个标签来显示正确.错误的信息显示 3.不用submit提交按钮,直接用button 如图: 二.把ajax做成一个函数,通过传简单的参数可以与服务器进行数据交换. 1.这个ajax函数前面有一篇如何处理利用ajax处理返回数据的文章中详细说明了. 2.ajax函数需要三个参数,url,jsonData,getMsg.这里的url都是regProc

随机推荐