侯体宗的博客
  • 首页
  • Hyperf版
  • beego仿版
  • 人生(杂谈)
  • 技术
  • 关于我
  • 更多分类
    • 文件下载
    • 文字修仙
    • 中国象棋ai
    • 群聊
    • 九宫格抽奖
    • 拼图
    • 消消乐
    • 相册

Ajax回退刷新页面问题的解决办法

前端  /  管理员 发布于 5年前   267

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


  • 上一条:
    Ajax的使用四大步骤
    下一条:
    Bootstrap3.0学习笔记之特殊的效果(显示隐藏、消除浮动、关闭按钮等)
  • 昵称:

    邮箱:

    0条评论 (评论内容有缓存机制,请悉知!)
    最新最热
    • 分类目录
    • 人生(杂谈)
    • 技术
    • linux
    • Java
    • php
    • 框架(架构)
    • 前端
    • ThinkPHP
    • 数据库
    • 微信(小程序)
    • Laravel
    • Redis
    • Docker
    • Go
    • swoole
    • Windows
    • Python
    • 苹果(mac/ios)
    • 相关文章
    • 使用 Alpine.js 排序插件对元素进行排序(0个评论)
    • 在js中使用jszip + file-saver实现批量下载OSS文件功能示例(0个评论)
    • 在vue中实现父页面按钮显示子组件中的el-dialog效果(0个评论)
    • 使用mock-server实现模拟接口对接流程步骤(0个评论)
    • vue项目打包程序实现把项目打包成一个exe可执行程序(0个评论)
    • 近期文章
    • 在go中实现一个常用的先进先出的缓存淘汰算法示例代码(0个评论)
    • 在go+gin中使用"github.com/skip2/go-qrcode"实现url转二维码功能(0个评论)
    • 在go语言中使用api.geonames.org接口实现根据国际邮政编码获取地址信息功能(1个评论)
    • 在go语言中使用github.com/signintech/gopdf实现生成pdf分页文件功能(0个评论)
    • gmail发邮件报错:534 5.7.9 Application-specific password required...解决方案(0个评论)
    • 欧盟关于强迫劳动的规定的官方举报渠道及官方举报网站(0个评论)
    • 在go语言中使用github.com/signintech/gopdf实现生成pdf文件功能(0个评论)
    • Laravel从Accel获得5700万美元A轮融资(0个评论)
    • 在go + gin中gorm实现指定搜索/区间搜索分页列表功能接口实例(0个评论)
    • 在go语言中实现IP/CIDR的ip和netmask互转及IP段形式互转及ip是否存在IP/CIDR(0个评论)
    • 近期评论
    • 122 在

      学历:一种延缓就业设计,生活需求下的权衡之选中评论 工作几年后,报名考研了,到现在还没认真学习备考,迷茫中。作为一名北漂互联网打工人..
    • 123 在

      Clash for Windows作者删库跑路了,github已404中评论 按理说只要你在国内,所有的流量进出都在监控范围内,不管你怎么隐藏也没用,想搞你分..
    • 原梓番博客 在

      在Laravel框架中使用模型Model分表最简单的方法中评论 好久好久都没看友情链接申请了,今天刚看,已经添加。..
    • 博主 在

      佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 @1111老铁这个不行了,可以看看近期评论的其他文章..
    • 1111 在

      佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 网站不能打开,博主百忙中能否发个APP下载链接,佛跳墙或极光..
    • 2016-10
    • 2016-11
    • 2017-06
    • 2017-07
    • 2017-08
    • 2017-09
    • 2017-10
    • 2017-11
    • 2018-03
    • 2018-04
    • 2018-05
    • 2018-06
    • 2018-09
    • 2018-11
    • 2018-12
    • 2019-02
    • 2020-03
    • 2020-04
    • 2020-05
    • 2020-06
    • 2021-04
    • 2021-05
    • 2021-07
    • 2021-08
    • 2021-09
    • 2021-10
    • 2021-11
    • 2022-08
    • 2022-09
    • 2022-10
    • 2022-11
    • 2022-12
    • 2023-01
    • 2023-02
    • 2023-03
    • 2023-04
    • 2023-05
    • 2023-06
    • 2023-07
    • 2023-09
    • 2023-10
    • 2023-11
    • 2023-12
    • 2024-01
    • 2024-02
    • 2024-03
    • 2024-04
    Top

    Copyright·© 2019 侯体宗版权所有· 粤ICP备20027696号 PHP交流群

    侯体宗的博客