Page d'actualisation de secours Ajax

Cette fois, je vais vous proposer le rollback Ajax pour actualiser la page. Quelles sont les précautions pour le rollback Ajax pour actualiser la page. Voici un cas pratique, jetons un 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 de restauration 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 des données et apporter une très bonne expérience à l'utilisateur. Cependant, AJAX ne peut pas conserver les enregistrements dans la session historique du navigateur. Lorsque vous cliquez sur une page, AJAX charge diverses données. est très rapide. Par exemple, une page de liste peut être tournée via 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,). actualiser) ), alors AJAX perdra les données pertinentes.

AJAX traditionnel présente les problèmes suivants :

1 Le contenu de la page peut être modifié sans actualisation, 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 n'est pas pris en charge et une opération de clic est requise

3. Le développeur doit se mettre en premier lors du retour en arrière et de l'actualisation, ce qui non seulement augmente la charge de travail du développeur, mais cela n'est pas non plus conforme aux habitudes des utilisateurs

4. De plus, les navigateurs ont introduit l'interface onhashchange. Les navigateurs qui ne la prennent pas en charge ne peuvent déterminer que périodiquement si le hachage a été utilisé. changé

5. Mais cette méthode est très préjudiciable aux moteurs de recherche Peu convivial

Utiliser la technologie

Afin de résoudre les problèmes causés par l'ajax traditionnel. , de nouvelles API ont été introduites en HTML5, à savoir : history.pushState, history.replaceState

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

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+Struts2怎么实现用户输入验证码校验功能

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!