解决ajax返回的问题。

最新推荐文章于 2022-10-31 00:02:06 发布

原创最新推荐文章于 2022-10-31 00:02:06 发布 · 504 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#返回 #ajax #最简单前端路由

ajax可以实现无刷新响应，无刷新改变页面内容。但是他有一个很严重的弊端，就是返回按钮。当用点击返回，他是整个页面返回，
而不是返回用ajax改变的之前的内容。

比如说你的body本来是内容1，通过ajax将bogy改为内容2，
当你点击返回，你想要的效果是返回内容1，但是，很可惜不是。

解决办法有2个。

1，
通过replaceState，pushState，popstate，三个方法来实现。下面将讲诉三个方法的作用及使用方式。
为了避免看不懂。先来说一下，为什么这三个方法能解决 ajax返回问题。

原理的这样的，通过改变历史记录啦解决的，比如你在内容2的时候，你把返回的页面改为内容1，也就是把最近的历史记录改为1，那你点击返回不就是回到内容1啦，这样是不是就明白了。
下面是一个简单的实现。
1，当你第一次进入页面的时候，
history.replaceState(null, document.title, location.href.split(“?”)[0] + “?” + ‘type=index’);
这个就是把当前页面地址后缀改为type=index，这个基准点。
现在历史记录只有一个
type =index
2，当你进入内容2的时候，
history.pushState({ title : ‘内容2’ }, ‘内容2’，location.href.split(“?”)[0] + “?type=2”);
这个是把type=2加入到历史记录中，也就是当前浏览器地址变为
type=2了。
现在的历史记录有2个了
type=2
type=index
3.注册事件
window.addEventListener(“popstate”, function(evt) {
var query = location.href.split(“?”)[1];
if (query == ‘type=index’) {
//页面内容变为1
}
});
这个事件是当点击返回的时候触发的。你想想当前地址是type=2，
点击返回了不就变成type=index啦。

这个只是一种例子，如果你body是跳往一个url，你可以在popstate的时候根据query的值，跳往那个链接。

2，通过描点连接实现

比如有这样三个链接

<li><a href="#/white">turn white</a></li>
<li><a href="#/blue">turn blue</a></li>
<li><a href="#/green">turn green</a></li>

当你点击第一个的时候，你会发现，你的地址后面加上了#/white.
一个关键方法就是hashchange，能够监听hash的变化，下面是一个简单的实现，其实也是一个最简单的路由。相信如果你看了第一种方式，第二种应该是一看就懂了。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>router</title>
</head>
<body>
    <ul>

        <li><a href="#/blue">turn blue</a></li>
        <li><a href="#/white">turn white</a></li>
        <li><a href="#/green">turn green</a></li>

    </ul>
    <script>
        function Router() {
            this.routes = {};
            this.currentUrl = '';
        }

        Router.prototype.refresh = function() {
            this.currentUrl = location.hash.slice(2) || '/';
            changeBgColor(this.currentUrl);
        };
        Router.prototype.init = function() {
            window.addEventListener('load', this.refresh.bind(this), false);
            window.addEventListener('hashchange', this.refresh.bind(this), false);
        }
        window.Router = new Router();
        window.Router.init();

        var content = document.querySelector('body');
        function changeBgColor(color) {
            content.style.backgroundColor = color;
        }
    </script>

</body>
</html>