解决ajax返回的问题。

来源：互联网发布：怎么用js判断两个日期编辑：程序博客网时间：2024/05/16 19:28

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>

0 0