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 服务器 SQL jQuery C# C++ java Android IOS oracle MongoDB SQLite wamp 交通频道 作文范文 邓州-绵阳 大庆-齐齐哈尔 宜宾南-内江 华山北-新乡东 灵璧-洛阳 东安东-双峰北 中和-龙镇 兖州-吕梁 余姚-罗山 开原-徐州 安达-定边 信阳东-衡山西 温根托海-海拉尔 红花园-娄山关 独山-南丹 五十家子-牛家营子 汉中-新乡 柳河-三江口 茂名-灵宝 石家庄-张家口南 辽阳-下马塘 烟筒屯-天津 广水-长治 西哲里木-普兰店 成都-合肥 静海-汉中 隆化-奈曼 诸暨-济南 延安-黄陵 济南-镇江 淮南-开封 海林-四平 南通-兖州 哈尔滨-鞍山 苏家屯-吴家屯 大连北-铁力 宝鸡-禄丰南 永州-徐闻 大板-八面城 偃师-葫芦岛 山海关-大杨树 郴州-呼和浩特 庐山-温州 叶柏寿-孤山子 小新街-营街 大陆号-西胡尔清 巩义-成都 鄂州-灵宝 贵溪-祁门 驼腰岭-柳河 费县-邹城 海口-渭南 聊城-常州 本溪-凌源 会同-当阳 吉林-滕州 亳州-来宾 南丰-泰宁 金昌-鄯善 聊城-广州东 西安北-滕州东 温州南-天津 葫芦岛-天津 哈密-砀山 开封-诸城 三明北-渑池 路口铺-韶关东 萍乡-宣威 衡阳-新化 二岔-松江河 太原-长汀南 亳州-肃宁 虎峰-东方红 南平北-陆丰 安化-樟树 双辽-八仙筒 干溪沟-长寿 郑州东-巢湖东 兴城-凤凰城 南京南-公主岭南 张家港有到南通栟茶的直达车吗
我在绍兴能买杭州到武威的火车列车票吗
我要从大连到沈阳的东陵区东大营街31-21号请问我坐火车列车应该到
到同里,住哪儿比较好啊,要干净,便宜推荐一下
上海九亭九号地铁线到上海站怎么做地铁?
最好围绕(住宅.植物.祖先.詹天佑制作的火车列车轨道)
温州到齐齐哈尔的火车列车票价是多少
您教日语多年吗 我喜欢日语,可没有基础,又找不到老师。我
从湖南张家界到山东威海乘火车列车的路线
从东莞到邵阳客车汽车怎么走?
这周星期五绵阳到成都的火车列车时刻表
福建省厦门市到陕西省咸阳市哪家快递能送液体
义乌—宁波的列车火车
请问火车列车软卧和硬卧有啥区别?郑州到福建顺昌坐哪种合算?
宁波老外滩到体育馆坐车车坐哪路
杭州到下渚湖湿地风景区(德清)怎么坐车
有广东龙川到广东石龙的列车火车不?
托运行李,书籍衣物一类从杭州到乌鲁木齐有列车火车票,随车
从晋州坐车到深泽多少小时
湖州客车汽车总站到临安的车一天有几个班次分别是几点的
渠县达州外国语学校咋去啊(从城里到学校)
机要文件从天津到新疆乌鲁木齐市需要多少天我的档案已经寄
从合肥到威海乳山坐火车怎么坐车
各个民族的风俗习惯、服饰、饮食、民居、和民间工艺品
满堂客家大围多高
7月13号上午的汉口到岳阳的火车列车票有吗
有没有从南昌市到丰城市客车汽车
哪里可以拿到贝吉小猪的货要批发的,谢了
杭州到义乌到千岛湖自驾游,路线如何最好
锦州到熊岳_锦州到熊岳

Copyright © 2016 phpStudy |