http://www.jb51.cc/article/p-celbdira-mx.html@H_502_5@
存在问题
如果使用Firefox等浏览器访问RMS网站时,我们可能会发现页面之间的切换是通过AJAX异步请求实现的,同时页面的URL不会发生改变,虽然可以通过页面上的按钮通过AJAX异步请求实现回退刷新,但是对于浏览器前进和后退不能支持,每当刷新与后退之后,页面都会退到最开始的欢迎页面。AJAX可以实现页面的局部刷新,可以做到非常好的数据加载效果,给用户带来非常良好的体验,但是AJAX不能在浏览器的历史会话中保留记录,当你点开一个页面,AJAX各种数据加载非常快捷,例如一个列表页面可以用异步加载来翻页,但是如果用户一不小心刷新了页面,那么页码就得重新开始计算,一旦用户改变了会话状态(浏览器的前进、后退、刷新),那么AJAX就会丢失相关的数据。
传统的AJAX存在如下的问题:
2、不能支持通过网址直接访问系统某一模块,必须进过点按操作
3、回退、刷新必须开发人员自己第一,既给开发人员增加了工作量,又不符合用户习惯
4、进而浏览器引入了onhashchange的接口,不支持的浏览器只能定时去判断hash是否改变
5、但这种方式对搜索引擎很不友好
使用技术
为了解决传统ajax带来的问题,HTML5里引入了新的API,即:history.pushState,history.replaceState
可以通过pushState和replaceState接口操作浏览器历史,并且改变当前页面的URL。
pushState是将指定的URL添加到浏览器历史里,replaceState是将指定的URL替换当前的URL。
@H_403_257@ history.pushState(state,title,url)将当前URL和history.state加入到history中,并把新的state和URL添加到当前。不会造成页面刷新。
state:与要跳转到的URL对应的状态信息。
title:标题(现在是被忽略,未作处理)。
url:要跳转到的URL地址,不能跨域。
@H_403_257@ history.replaceState(state,51); font-family:Arial; font-size:14px; line-height:26px"> history.replaceState()操作类似于history.pushState(),不同之处在于replaceState()方法会修改当前历史记录条目而并非创建新的条目。url:要跳转到的URL地址,不能跨域。
@H_403_257@ addEventListener(type,listener)addEventListener是一个侦听事件并处理相应的函数。
type:事件的类型。
listener:侦听到事件后处理事件的函数。此函数必须接受Event对象作为其唯一的参数,并且不能返回任何结果。
由于AJAX无刷新改变页面内容的,所以页面的URL始终是不变的,为了区分页面上的各个不同内容,首先需要重新定义一下各个页面的URL,因为RMS网站多使用$.post异步请求,我们可以用URL记录post请求的各个参数(请求地址、传递参数),当浏览器进行刷新、回退操作时,根据URL记录的信息自动发送post请求,进入对应页面,从而实现希望的功能。
定义URL语法:
“http://localhost/rms_hold/index.PHP/Home/Index/loadHomePage”是原先页面的URL,如果在问题解决之前在RMS网站上进行任何点按操作,网址一直不会有任何变动。现在我们使用“#”分割网址,“#”之后就是我们所记录的ajax请求“/rms_hold/index.php/Home/ResourceRequest/getRequestPage”是请求的地址,它由“#”与“@”分割,而在“@”与“!”之间的这是发向请求地址的各个参数,“apply_type=1”与“resource_name=ADM_BIZCARD”由“&”进行分割。
刷新、回退监听处理:
- if(history.pushState){
- window.addEventListener("popstate",function(){
- back_ajax_mod_url();
- back_ajax_post();
- if(location.href.indexOf("#")==-1){
- window.location.reload();
- }
- });
- }
如以上代码所示,window对象上提供了onpopstate事件,可以使用addEventListener方法监听onpopstate事件,每当URL因为浏览器回退时都会对得到的URL在back_ajax_mod_url()与back_ajax_post()函数中进行解析、处理,而当浏览器刷新时,根据history.pushState的返回值不空,依然会对得到的URL在back_ajax_mod_url()与back_ajax_post()函数中进行解析、处理。
对外接口: