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

使用Ajax可以异步获取数据,可以更高效地渲染页面。 但也存在这一些问题: 再刷新页面,页面就会变成初始的状态 浏览器的前进后退功能无效 对搜索引擎的爬虫抓取不友好

 1、

早前会使用浏览器的 hash锚点 来解决

不同的hash标记着页面不同的部分,能修正页面刷新数据不正确的问题

再通过 onhashchange 事件监听hash锚点的变化,手动进行前进后退操作,浏览器支持度

Chrome

FireFox

IE

Opera

Safari

5.0

3.6(1.9.2)

8.0

10.6

5.0

 2、

随后出现一种 hashbang 的技术,即在url后加上标记 #!/myPath 来解决上述的问题

通过一个路径定义一个页面部分,在单页面应用中可常见到(Angular中已经封装了)。但好像只有google真正支持了对该路径的爬取

3、

HTML5的新特性做了助力,通过pushStatereplaceState 这两个新的history方法和 onpopstate 这个window事件,解决了上述三个问题

当然,也因为是HTML5的新特性,在旧版本浏览器上支持度不好的,建议是再用hashbang的方法来兼容

本文主要讲讲pushState这几个新东西

文字太枯燥了,先看看图示直接点感受

这个栗子目的是:初始值为0,通过异步请求自增值,可以前进或后退以及刷新,新打开一个url后也能获取相应的数据

history.pushState(state, title, url)

history.replaceState(state, title, url)

 其中state是个json对象,可以自定义存放一些数据,title即是这个url对应的标签title(不过好像浏览器都忽略了这个参数)

url是某个页面的标记url(操作只会改变地址栏的url,并不会立马加载这个url,可以简单的标记 ?w=a、ajaxPage.html/w=a、&w=a,只是一种标记,取值时对照着来就行)

replaceState和pushState的不同是:前者直接替换当前值,后者就是向栈中压入一个值

window.onpopstate 事件触发之后,可以通过 history.state获取到上述方法的第一个json对象

实现部分

HTML

<div class="push-state-test">
    <input type="button" id="ajax-test-btn" value="Ajax获取">
    <p>value: <span id="ajax-test-val">0</span></p>
</div>

JS

    var $val = $('#ajax-test-val'),
            // 获取当前页面的标记
            m = window.location.search.match(/\?val=(\d+)/);

        // 新进入页面,通过url中的标记初始化数据
        if (m) {
            increaseVal(m[1] - 1);
        }

        // 请求
        function increaseVal(val) {
            $.post('ajax-test.php', {
                val: val
            }, function(newVal) {
                $val.text(newVal);
                // 存储相关值至对象中
                var state = {
                    val: newVal,
                    title: 'title-' + newVal,
                    url: '?val=' + newVal
                }
                // 将相关值压入history栈中
                window.history.pushState && window.history.pushState(state, state.title, state.url);
            });
        }

        $('#ajax-test-btn').click(function() {
            increaseVal(parseInt($val.text(), 10));
        });

        // 浏览器的前进后退,触发popstate事件
        window.onpopstate = function() {
            var state = window.history.state;
            console.log(state)

            // 直接将值取出,或再次发个ajax请求
            $val.text(state.val);
            window.history.replaceState && window.history.replaceState(state, state.title, state.url);
        };

PHP

<?php

    $val = $_REQUEST['val'];

    echo $val + 1;

?>

这里通过?val=num 的方式,标记了不同的ajax结果页

Tips:

使用pushState之后,当前进后退触发了popstate事件,获取到相应的json对象

json对象的数据可自定义

可简单地存储相关标记再发个请求,或者直接将该标记页对应的结果直接存起来

随着后退操作,地址栏url得到了更新,异步的数据也得到了更新

刷新页面或新打开页面,就要根据url中的标记去请求数据了

要记住的是,浏览器并不会自动加载url这部分标记对应的这个异步内容页,需要我们去获取

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏大前端开发

使用mpvue开发小程序教程(五)

在上一章节中,我们了解了组件的三个基本特性以及组件的基本使用方法。在实际的小程序开发中,我们应该以组件的思维去设计每个小程序的功能页面,对其进行合理的组件拆分,...

1862
来自专栏一个会写诗的程序员的博客

h5中performance.timing轻松获取网页各个数据 如dom加载时间 渲染时长 加载完触发时间

在控制台中输入window.performance.timing(html5的属性);

5451
来自专栏前端架构

vue2.x入坑总结—回顾对比angularJS/React的一统

从感性的角度讲,我是不屑于用VUE,觉得react套件用起来更顺手,但是vue现在越来火,所以也不得入vue(杂烩汤)的坑。

1442
来自专栏狮乐园

Angular Elements 及其工作原理

现在,Angular Elements 这个项目已经在社区引起一定程度的讨论。这是显而易见的,因为 Angular Elements 提供了很多开箱即用的、十分...

1342
来自专栏编程

AngularJS中使用表单输入的应用设计

在Angular中使用表单元素非常方便。正如我们在前面几个例子中看到的,你可以使用ng-model属性把元素绑定到你的模型属性上。这一机制对于所有标准的表单元素...

1736
来自专栏用户2442861的专栏

我的VS2010+VAssistX

最近越来越觉得VAssistX好用,可能是以前没有去仔细研究过吧,也可能是因为我是个快捷键控吧,不管怎样,用或不用,方便或不方便,它就是那里,一动也不动,进入...

1221
来自专栏移动开发之家

Flutter完整开发实战详解(二、 快速开发实战篇)

 作为系列文章的第二篇,继《Flutter完整开发实战详解(一、Dart语言和Flutter基础)》之后,本篇将为你着重展示:如何搭建一个通用的Flutter ...

8323
来自专栏后端之路

被低估的前端模块化

对于前端的缓存主要包括静态资源的缓存 为避免出现类似问题参考 变态的静态资源缓存与更新 在经历了上传前端资源文件等之后测试发现了一堆问题 发现每一个出现问题的均...

26410
来自专栏智能算法

微信小程序,开发大起底

作者简介:张智超,北京微函工坊开发工程师,CSDN微信开发知识库特邀编辑。微信小程序爱好者。 感谢@翟东平 @qq_31383345 @nigelyq 等热情参...

50314
来自专栏葡萄城控件技术团队

Spread for Windows Forms快速入门(12)---数据分组(Outlook风格)

你可以设置的显示将行分组变成 OUTLOOK样式。对于大量的数据来说,这样会以用户需要的顺序显示数据。用户可以选择要进行的排序(以列为依据),然后控件会以此为依...

1878

扫码关注云+社区