Ajax 简介：php
AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML），是指一种建立交互式网页应用的网页开发技术。html
AJAX = 异步 JavaScript和XML（标准通用标记语言的子集）。ajax
AJAX 是一种用于建立快速动态网页的技术。跨域
经过在后台与服务器进行少许数据交换，AJAX 可使网页实现异步更新。这意味着能够在不从新加载整个网页的状况下，对网页的某部分进行更新。数组
传统的网页（不使用 AJAX）若是须要更新内容，必须重载整个网页页面。浏览器
存在问题服务器
若是使用Firefox等浏览器访问RMS网站时，咱们可能会发现页面之间的切换是经过AJAX异步请求实现的，同时页面的URL不会发生改变，虽然能够经过页面上的按钮经过AJAX异步请求实现回退刷新，可是对于浏览器前进和后退不能支持，每当刷新与后退以后，页面都会退到最开始的欢迎页面。AJAX能够实现页面的局部刷新，能够作到很是好的数据加载效果，给用户带来很是良好的体验，可是AJAX不能在浏览器的历史会话中保留记录，当你点开一个页面，AJAX各类数据加载很是快捷，例如一个列表页面能够用异步加载来翻页，可是若是用户一不当心刷新了页面，那么页码就得从新开始计算，一旦用户改变了会话状态（浏览器的前进、后退、刷新），那么AJAX就会丢失相关的数据。app
传统的AJAX存在以下的问题：异步
一、能够无刷新改变页面内容，但没法改变页面URLide
二、不能支持经过网址直接访问系统某一模块，必须进过点按操做
三、回退、刷新必须开发人员本身第一，既给开发人员增长了工做量，又不符合用户习惯
四、进而浏览器引入了onhashchange的接口，不支持的浏览器只能定时去判断hash是否改变
五、但这种方式对搜索引擎很不友好
使用技术
为了解决传统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对应的状态信息。
title：标题(如今是被忽略，未做处理)。
url：要跳转到的URL地址，不能跨域。
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”由“&”进行分割。
刷新、回退监听处理：
if (history.pushState) { window.addEventListener("popstate", function() { back_ajax_mod_url(); back_ajax_post(); if(location.href.indexOf("#")==-1){ window.location.reload(); } }); back_ajax_mod_url(); back_ajax_post(); }
如以上代码所示，window对象上提供了onpopstate事件，可使用addEventListener方法监听onpopstate事件，每当URL由于浏览器回退时都会对获得的URL在back_ajax_mod_url()与back_ajax_post()函数中进行解析、处理，而当浏览器刷新时，根据history.pushState的返回值不空，依然会对获得的URL在back_ajax_mod_url()与back_ajax_post()函数中进行解析、处理。
对外接口：
function back_ajax_mod_url(){ var url_ajax=ajaxback_url.pop(); var title ="Home | UniqueSoft RMS"; if(url_ajax){ history.pushState({ title: title }, title,location.href.split("#")[0] + "#"+ url_ajax); } }
介绍一下back_ajax_mod_url()函数，它与数组ajaxback_url组成对外接口，ajaxback_url是一个全局数组，用来存放须要加入到history中的URL，而后由back_ajax_mod_url()函数在无页面刷新的状况下将当前URL和history.state加入到history中。
$("#reportTable tbody").on("click", "trtd img[alt = 'Detail']",
function() {
var id = $(this).attr("business_leave_id");
$.post("__MODULE__/ReportCenter/getReportDetailPage",{
"report_name": "ADM_TRAVEL_REP",
"item_id": id,
},
function(data) {
ajaxback_url.push("__MODULE__/ReportCenter/getReportDetailPage"+ "@" + "item_id=" + id + "&" +"report_name=ADM_TRAVEL_REP");
$("#container").html(data);
back_ajax_mod_url();
});
});
以上函数是RMS系统里的一个AJAX异步请求事件，会形成页面无刷新变化，加粗部分就是咱们提供的对外接口，使用该接口后在history中会产生一条新的URL用来记录达到该页面的post方法。
URL解析处理器：
以下面函数所示back_ajax_post()为RMS系统的URL解析处理器，根据以前提到的URL语法，读出页面上改变内容的AJAX请求，而且自动发送AJAX请求，获取须要的页面
function back_ajax_post() { if (location.href.indexOf("#")!= -1) { var post_href =location.href.split("#")[1]; if (location.href.indexOf("@")!= -1) { var post_url =post_href.split("@")[0]; var post_params =post_href.split("@")[1]; if(post_params.indexOf("!") != -1) { var post_page_index =post_params.split("!")[1]; post_params =post_params.split("!")[0]; }; } else { var post_url = post_href; var post_params = ""; var post_page_index = ""; } var get_resource_href =location.href; if(get_resource_href.indexOf("!") != -1) { get_resource_href =get_resource_href.split("!")[0]; }; if(get_resource_href.indexOf("resource_name=") != -1) { var has_resource_name =get_resource_href.split("resource_name=")[1]; var siderbar_index =has_resource_name; } else if(get_resource_href.indexOf("report_name=") != -1) { var has_resource_name =get_resource_href.split("report_name=")[1]; var siderbar_index =has_resource_name.split("_REP")[0]; }; if (!post_page_index ||$("#personalInfo").length <= 0) { if (!post_url) { window.location.href ="__MODULE__"; } $.ajax({ type: "post", url: post_url, data: post_params, success: function(res){ $('#pageContainer').html(res); if(post_page_index) { location.href= location.href.split("!")[0] + "!1"; } else { location.href= location.href.split("!")[0]; }; }, error: function(res) { window.location.href = "__MODULE__"; }, }); } //for request page next&back if (post_page_index) { var previous_index =$(".navbar,.steps .navbar-innerul.row-fluid").find("li.active").find(".number").text(); var differ =post_page_index - previous_index; lock_for_req_back_next =1; if (differ > 0) { for (var i = 0; i <differ; a="" bar="" differ="-differ;" else="" for="" i="0;" if="" li="" lock_for_req_back_next="0;" resource_name="$(this).attr("href").split("resource_name=")[1];" side="" siderbar_index="=" ul.page-sidebar-menuli="" ul.sub-menu="" var=""> span.arrow').addClass('open'); $(this).parents('.sub-menu').show(); }); $(this).parent('li').parents('li').addClass('active open'); return false; } else { $('.sub-menu').hide(); } }); $("ul.page-sidebar-menuli").not(".open").find("ul").hide(); } } </differ;>
以上所述是小编给你们介绍的Ajax回退刷新页面问题的解决办法的相关知识，但愿对你们有所帮助，若是你们有任何疑问请给我留言，小编会及时回复你们的。在此也很是感谢你们对脚本之家网站的支持！