Comment gérer les données après la perte d'actualisation d'Ajax

Cette fois, je vais vous montrer comment gérer les données après la perte et l'actualisation d'Ajax. Quelles sont les précautions pour gérer les données après la perte et l'actualisation d'Ajax. Ce qui suit est un cas pratique, jetons un coup d'oeil.

Introduction à Ajax :

AJAX signifie "Asynchronous Javascript And XML" (JavaScript et XML Asynchrones). technologie de développement Web pour créer des applications Web interactives.

AJAX = JavaScript asynchrone et XML (un sous-ensemble du langage de balisage universel standard).

AJAX est une technologie permettant de créer des pages Web rapides et dynamiques.

AJAX permet de mettre à jour les pages Web de manière asynchrone en échangeant une petite quantité de données avec le serveur en arrière-plan. Cela signifie que certaines parties d'une page Web peuvent être mises à jour sans recharger la page entière.

Les pages Web traditionnelles (n'utilisant pas AJAX) doivent recharger la page Web entière si le contenu doit être mis à jour.

Il y a un problème

Si vous utilisez un navigateur tel que Firefox pour accéder au site Web RMS, nous pouvons constater que basculer entre les pages est asynchrone via AJAX La requête est implémentée et l'URL de la page ne changera pas en même temps. Bien que l'actualisation arrière puisse être implémentée via la requête asynchrone AJAX via le bouton sur la page, le navigateur ne peut pas prendre en charge l'avant et l'arrière. Quelque temps après l'actualisation et la sauvegarde, la page reviendra à la page d'accueil initiale. AJAX peut réaliser un rafraîchissement partiel de la page, peut obtenir un très bon effet de chargement de données et apporter une très bonne expérience à l'utilisateur, mais AJAX ne peut pas conserver les enregistrements dans la session historique du navigateur. Lorsque vous cliquez sur une page, AJAX divers chargements de données sont effectués. très rapide. Par exemple, une page de liste peut être tournée en utilisant un chargement asynchrone. Cependant, si l'utilisateur actualise accidentellement la page, le numéro de page devra être calculé à nouveau une fois que l'utilisateur aura modifié l'état de la session (navigateur avant, arrière, actualisation). ) ), puis comment gérer les données après la perte de l'actualisation d'Ajax

L'AJAX traditionnel présente les problèmes suivants :

1. être modifié sans actualiser, mais l'URL de la page ne peut pas être modifiée

2. L'accès direct à un certain module du système via l'URL ne peut pas être pris en charge et une opération de clic doit être effectuée

3 . Le développeur doit être le premier à revenir en arrière et à actualiser. Cela augmente non seulement la charge de travail des développeurs, mais n'est pas non plus conforme aux habitudes des utilisateurs

4. De plus, les navigateurs ont introduit l'interface onhashchange qui le fait. ne prend pas en charge, il ne peut déterminer que périodiquement si le hachage a changé

5. Mais cette méthode est très peu conviviale pour les moteurs de recherche

Utilisation de la technologie

Dans Afin de résoudre les problèmes causés par l'ajax traditionnel, une nouvelle API a été introduite en HTML5, à savoir : history.pushState, history.replaceState

Vous pouvez exploiter l'historique du navigateur via les interfaces pushState et replaceState et modifier l'URL de la page en cours.

pushState consiste à ajouter l'URL spécifiée à l'historique du navigateur, et replaceState consiste à remplacer l'URL actuelle par l'URL spécifiée.

history.pushState(state, title, url)

Ajoutez l'URL actuelle et history.state à l'historique, et ajoutez le nouvel état et l'URL à l'actuel. Cela n’entraînera pas l’actualisation de la page.

state : informations d'état correspondant à l'URL vers laquelle accéder.

titre : Titre (désormais ignoré et non traité).

url : adresse URL vers laquelle accéder, ne peut pas traverser le domaine.

history.replaceState(state, title, url)

L'opération history.replaceState() est similaire à history.pushState(), sauf que la méthode replaceState() modifie l'entrée actuelle de l'historique au lieu de créer une nouvelle entrée.

state : informations d'état correspondant à l'URL vers laquelle accéder.

titre : Titre (désormais ignoré et non traité).

url : adresse URL vers laquelle accéder, ne peut pas traverser le domaine.

addEventListener(type, Listener)
addEventListener est une fonction qui écoute les événements et les gère en conséquence.

type : Le type d'événement.

listener : Une fonction qui gère les événements après les avoir écoutés. Cette fonction doit accepter un objet Event comme seul paramètre et ne peut renvoyer aucun résultat.

Solution

由于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){
$(&#39;#pageContainer&#39;).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;>

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

怎么使用Ajax实现循环

ajax加载超时提示怎样实现

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!