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对应的状态信息。

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回退刷新页面问题的解决办法的相关知识,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对phpstudy网站的支持!



相关阅读:
Win10任务栏搜索框怎么开启或者禁用?
实例讲解使用CSS实现多边框和透明边框的方法
CSS3绘制有活力的链接下划线
使用ctop在命令行中检测Linux容器性能
MySQL存储过程的优化实例
Hibernate分页的两种实现方法
微信企业号开发之微信考勤百度地图定位
基于UIControl控件实现ios点赞功能
浅析Javascript ES6中的原生Promise
C语言中获取和改变目录的相关函数总结
GridView控件实现数据的修改(第9节)
C#中的文件路径获取函数和文件名字获取函数小结
ORACLE EXP不能导出空表的原因分析及解决方法
C#开源的AOP框架--KingAOP基础
快速导航
PHP MySQL HTML CSS JavaScript MSSQL AJAX .NET JSP Linux Mac ASP 服务器 CMS SQL jQuery C# C++ java Android IOS oracle MongoDB PostgreSQL SQLite 交通频道 荥阳刘河镇汽车站 河南省郑州市荥阳市
嘉祥纸坊客运站 山东省济宁市嘉祥县
宁安客运站 黑龙江省牡丹江市宁安市
商丘古城汽车站北门 北环城西路1号西100米
郎中客运站 河南省濮阳市濮阳县
长春汽车站 九六一县道
交通银行(离行式 太仓汽车站) 太仓市太平北路109号
佳阳客运 福建省宁德市福鼎市
酃湖汽车站候车大厅 湖南省衡阳市珠晖区
建行汽车站储蓄所 广西壮族自治区桂林市全州县
高沙新城客运站 浙江省杭州市江干区
济南市长途客运中心站候车厅 堤口路73号2
铁门乡客运站 重庆市
德阳市汽车站招待所 长江西路二段240号
九江公路客运中心汽车总站 江西省九江市浔阳区
公安通运汽车客运站 湖北省荆州市公安县
陆良客运站 云南省曲靖市陆良县
阳曲汽车站 山西省太原市阳曲县
山东交通疃里客运站 山东省济宁市嘉祥县
建德梅城客运站 西门街
曹里客运站 河南省周口市扶沟县
五常山河客运站 黑龙江省哈尔滨市五常市
大足中敖汽车站 重庆市大足县
四马台客运站 北京市房山区
灵寿慈峪客运站 河北省石家庄市灵寿县
营山县双流汽车客运站 四川省南充市营山县
小林汽车客运站 湖北省随州市曾都区
昆山南港汽车站 莲花路
荔浦汽车客运服务站 广西壮族自治区桂林市荔浦县
城东客运站 伊利线
襄樊市旅游长途汽车站 湖北省襄樊市樊城区
瑞安市东门客运中心站候车厅 浙江省温州市瑞安市
漯河客运汽车站 交通路
龙堂客运站 河南省漯河市临颍县
景东者后客运站 云南省普洱市景东彝族自治县
王庆坨客运站 天津市武清区
三堡汽车站 广西壮族自治区梧州市岑溪市
黄山汽车站 山东省青岛市胶南市
阜阳汽车西站售票厅 安徽省阜阳市颍州区
东馆车站 江西省抚州市临川区
大八车站 广东省阳江市阳东县
桓台唐山客运站 山东省淄博市桓台县
居委路口新兴车站 广东省揭阳市揭东县
榆林汽车站 榆阳路与肤施路交叉口西北角
沙洋后港车站 湖北省荆门市沙洋县
兰州客运中心公司 火车站东路338号
江都客运站 引江路41号
乐平众埠汽车站 江西省景德镇市乐平市
菏泽马岭岗客运站 山东省菏泽市牡丹区
汽车总站-公交车站 广西壮族自治区贺州市昭平县
顾山客运站 江苏省无锡市江阴市
岐头一村汽车站 浙江省温州市乐清市
万州汽车客运中心站国本路汽车站 国本路
广灵蕉山乡汽车站 山西省大同市广灵县
达县桥湾汽车站 四川省达州市达县
南王交通客运站 山东省淄博市临淄区
黄骅渤海新区汽车站 河北省沧州市黄骅市黄骅港开发区
抚松抽水客运站 吉林省白山市抚松县
潮安汽车站停车场 广东省潮州市潮安县
支塘客运站 江苏省苏州市常熟市
海口新港客运站停车场 海南省海口市龙华区
永吉公路客运总站 吉林省吉林市永吉县
揭东车站 广东省揭阳市揭东县
龙门客运站 河北省保定市满城县
永安汽车站 江苏省扬州市江都市
重庆陈家坪汽车站售票大厅 石杨路39号
城北客运站 重庆市
乐清柳市站 车站路
白元乡汽车站 河南省洛阳市伊川县
安县安昌客运中心站 安昌镇
洛党客运站 云南省临沧市凤庆县
屯子镇汽车客运站 河南省鹤壁市浚县
珠海市莲溪车站 广东省珠海市斗门区
恩施市客运站 湖北省恩施土家族苗族自治州恩施市
吉县东城客运站 山西省临汾市吉县
旺苍县普济客运站 四川省广元市旺苍县
宁波汽车东站 宁穿路707
七星客运站 云南省昆明市寻甸回族彝族自治县
上思汽车站 广西壮族自治区防城港市上思县
禄劝九龙客运站 鸡九公路
三分场客运站 黑龙江省双鸭山市宝清县
桦甸客运总站 吉林省吉林市桦甸市
朝阳客运站 黑龙江省双鸭山市宝清县
普合客运站 广西壮族自治区百色市西林县
彭湾客运站 江西省鹰潭市贵溪市
山阳户垣客运站 陕西省商洛市山阳县
东台汽车站售票厅 江苏省盐城市东台市
湖岗乡客运站 河南省开封市杞县
金昌城乡客运站 天美里7-4号斜对面
长武县汽车客运有限责任公司 陕西省咸阳市长武县
龙门客运 西林路29号
宣城汽车站小件快运服务中心 安徽省宣城市宣州区
江阴华士客运站 江苏省无锡市江阴市
泗水柘沟客运站 山东省济宁市泗水县
南洋客运站 福建省龙岩市上杭县
深圳市东风汽车技术服务公司 龙华龙观东路66号龙华汽车站正对面
南康市汽车总站驾驶员培训学校 江西省赣州市南康市
桂平车站 广西壮族自治区贵港市桂平市
偃师缑氏客运站 河南省洛阳市偃师市
辉南县长途客运站 爱民大街

Copyright © 2016 phpStudy |