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

Ajax 简介：

AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。

AJAX = 异步 JavaScript和XML（标准通用标记语言的子集）。

AJAX 是一种用于创建快速动态网页的技术。

通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

传统的网页（不使用 AJAX）如果需要更新内容，必须重载整个网页页面。

存在问题

如果使用Firefox等浏览器访问RMS网站时，我们可能会发现页面之间的切换是通过AJAX异步请求实现的，同时页面的URL不会发生改变，虽然可以通过页面上的按钮通过AJAX异步请求实现回退刷新，但是对于浏览器前进和后退不能支持，每当刷新与后退之后，页面都会退到最开始的欢迎页面。AJAX可以实现页面的局部刷新，可以做到非常好的数据加载效果，给用户带来非常良好的体验，但是AJAX不能在浏览器的历史会话中保留记录，当你点开一个页面，AJAX各种数据加载非常快捷，例如一个列表页面可以用异步加载来翻页，但是如果用户一不小心刷新了页面，那么页码就得重新开始计算，一旦用户改变了会话状态（浏览器的前进、后退、刷新），那么AJAX就会丢失相关的数据。

传统的AJAX存在如下的问题：

1、可以无刷新改变页面内容，但无法改变页面URL

2、不能支持通过网址直接访问系统某一模块，必须进过点按操作

3、回退、刷新必须开发人员自己第一，既给开发人员增加了工作量，又不符合用户习惯

4、进而浏览器引入了onhashchange的接口，不支持的浏览器只能定时去判断hash是否改变

5、但这种方式对搜索引擎很不友好

使用技术

为了解决传统ajax带来的问题，HTML5里引入了新的API，即：history.pushState,history.replaceState

可以通过pushState和replaceState接口操作浏览器历史，并且改变当前页面的URL。

pushState是将指定的URL添加到浏览器历史里，replaceState是将指定的URL替换当前的URL。

history.pushState(state, title, url)

将当前URL和history.state加入到history中，并把新的state和URL添加到当前。不会造成页面刷新。

state：与要跳转到的URL对应的状态信息。

title：标题(现在是被忽略，未作处理)。

url：要跳转到的URL地址，不能跨域。

history.replaceState(state, title, url)

history.replaceState()操作类似于history.pushState()，不同之处在于replaceState()方法会修改当前历史记录条目而并非创建新的条目。

state：与要跳转到的URL对应的状态信息。