解决Ajax框架下页面回退刷新问题

前端之家收集整理的这篇文章主要介绍了解决Ajax框架下页面回退刷新问题前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

http://www.jb51.cc/article/p-celbdira-mx.html@H_502_5@

存在问题

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

@H_502_5@ @H_502_5@

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

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

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

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

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

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

使用技术

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

可以通过pushStatereplaceState接口操作浏览器历史,并且改变当前页面URL

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

@H_403_257@ history.pushState(state,title,url)

将当前URLhistory.state加入到history中,并把新的stateURL添加到当前。不会造成页面刷新。

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_502_5@ @H_502_5@

@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#/rms_hold/index.php/Home/ResourceRequest/getRequestPage@apply_type=1&resource_name=ADM_BIZCARD!1

“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由“&”进行分割。

刷新、回退监听处理:

[html] view plain copy
  1. if(history.pushState){
  2. window.addEventListener("popstate",function(){
  3. back_ajax_mod_url();
  4. back_ajax_post();
  5. if(location.href.indexOf("#")==-1){
  6. window.location.reload();
  7. }
  8. });
  9. }



如以上代码所示,window对象上提供了onpopstate事件,可以使用addEventListener方法监听onpopstate事件,每当URL因为浏览器回退时都会对得到的URLback_ajax_mod_url()back_ajax_post()函数中进行解析、处理,而当浏览器刷新时,根据history.pushState的返回值不空,依然会对得到的URLback_ajax_mod_url()back_ajax_post()函数中进行解析、处理。

对外接口:

@H_502_5@ @H_502_5@

copy
    functionback_ajax_mod_url(){
  1. varurl_ajax=ajaxback_url.pop();
  2. vartitle="Home|UniqueSoftRMS";
  3. if(url_ajax){
  4. history.pushState({title:title},location.href.split("#")[0]+"#"+url_ajax);
  5. 介绍一下back_ajax_mod_url()函数,它与数组ajaxback_url组成对外接口,ajaxback_url是一个全局数组,用来存放需要加入到history中的URL,然后由back_ajax_mod_url()函数在无页面刷新的情况下将当前URLhistory.state加入到history中。

    copy

    $("#reportTabletbody").on("click","trtdimg[alt='Detail']",
  1. function(){
  2. varid=$(this).attr("business_leave_id");
  3. $.post("__MODULE__/ReportCenter/getReportDetailPage",{
  4. "report_name":"ADM_TRAVEL_REP",
  5. "item_id":id,108); list-style:decimal-leading-zero outside; color:inherit; line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important"> },108); list-style:decimal-leading-zero outside; color:inherit; line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important"> function(data){
  6. ajaxback_url.push("__MODULE__/ReportCenter/getReportDetailPage"+"@"+"item_id="+id+"&"+"report_name=ADM_TRAVEL_REP");
  7. $("#container").html(data);
  8. });

以上函数RMS系统里的一个AJAX异步请求事件,会造成页面无刷新变化,加粗部分就是我们提供的对外接口,使用该接口后在history中会产生一条新的URL用来记录达到该页面post方法

URL解析处理器:

如下面函数所示back_ajax_post()RMS系统的URL解析处理器,根据之前提到的URL语法,读出页面上改变内容AJAX请求,并且自动发送AJAX请求,获取需要的页面

copy
    functionback_ajax_post(){
  1. if(location.href.indexOf("#")!=-1){
  2. varpost_href=location.href.split("#")[1];
  3. if(location.href.indexOf("@")!=-1){
  4. varpost_url=post_href.split("@")[0];
  5. varpost_params=post_href.split("@")[1];
  6. if(post_params.indexOf("!")!=-1){
  7. varpost_page_index=post_params.split("!")[1];
  8. post_params=post_params.split("!")[0];
  9. };
  10. }else{
  11. varpost_url=post_href;
  12. varpost_params="";
  13. varpost_page_index="";
  14. varget_resource_href=location.href;
  15. if(get_resource_href.indexOf("!")!=-1){
  16. get_resource_href=get_resource_href.split("!")[0];
  17. if(get_resource_href.indexOf("resource_name=")!=-1){
  18. varhas_resource_name=get_resource_href.split("resource_name=")[1];
  19. varsiderbar_index=has_resource_name;
  20. }elseif(get_resource_href.indexOf("report_name=")!=-1){
  21. varhas_resource_name=get_resource_href.split("report_name=")[1];
  22. varsiderbar_index=has_resource_name.split("_REP")[0];
  23. if(!post_page_index||$("#personalInfo").length<=0){
  24. if(!post_url){
  25. window.location.href="__MODULE__";
  26. $.ajax({
  27. type:"post",108); list-style:decimal-leading-zero outside; color:inherit; line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important"> url:post_url,108); list-style:decimal-leading-zero outside; color:inherit; line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important"> data:post_params,108); list-style:decimal-leading-zero outside; color:inherit; line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important"> success:function(res){
  28. $('#pageContainer').html(res);
  29. if(post_page_index){
  30. location.href=location.href.split("!")[0]+"!1";
  31. location.href=location.href.split("!")[0];
  32. error:function(res){
  33. //forrequestpagenext&back
  34. varprevIoUs_index=$(".navbar,.steps.navbar-innerul.row-fluid").find("li.active").find(".number").text();
  35. vardiffer=post_page_index-prevIoUs_index;
  36. lock_for_req_back_next=1;
  37. if(differ>0){
  38. for(vari=0;i<differ;i++){
  39. $("#personalInfo").trigger("click");
  40. differ=-differ;
  41. $("#btn_back").trigger("click");
  42. lock_for_req_back_next=0;
  43. //forsidebar
  44. if(siderbar_index=="IT_TESTMACHINE"||siderbar_index=="IT_LAPTOP"||siderbar_index=="IT_OTHER_RESOURCE"){
  45. siderbar_index="IT_RESOURCE";
  46. $("ul.page-sidebar-menuliul.sub-menulia").each(function(){
  47. varresource_name=$(this).attr("href").split("resource_name=")[1];
  48. if(siderbar_index==resource_name){
  49. $('.page-sidebarul').children('li.active').removeClass('active');
  50. $('.page-sidebarul').children('arrow.open').removeClass('open');
  51. $(this).parents('li').each(function(){
  52. $(this).addClass('active');
  53. $(this).children('a>span.arrow').addClass('open');
  54. $(this).parents('.sub-menu').show();
  55. $(this).parent('li').parents('li').addClass('activeopen');
  56. returnfalse;
  57. $('.sub-menu').hide();
  58. $("ul.page-sidebar-menuli").not(".open").find("ul").hide();
  59. }

猜你在找的Ajax相关文章