Solution au problème de la restauration et de l'actualisation de la page Ajax-js tutoriel-php.cn

Cet article présente principalement les informations pertinentes sur la solution au problème de restauration d'Ajax et d'actualisation de la page. Il est très bon et a la valeur de référence et d'apprentissage d'Ajax. Les amis intéressés par Ajax devraient apprendre ensemble

Introduction à Ajax :

AJAX signifie "Asynchronous Javascript And XML" (JavaScript et XML asynchrones), qui fait référence à un méthode de création d'applications Web interactives Technologie de développement Web.

AJAX = JavaScript asynchrone et XML (un sous-ensemble du langage de balisage standard généralisé).

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 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). ) ), 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)

Copier après la connexion

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)

Copier après la connexion

L'opération history.replaceState() est similaire à history.pushState(), la différence est que replaceState( ) La méthode modifiera l’entrée actuelle de l’historique plutôt que d’en créer une nouvelle.

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

Étant donné qu'AJAX modifie le contenu de la page sans actualiser, l'URL de la page est toujours la même afin de distinguer le contenu. sur la page Pour chaque contenu différent, vous devez d'abord redéfinir l'URL de chaque page. Les sites RMS utilisant principalement des requêtes asynchrones $.post, nous pouvons utiliser l'URL pour enregistrer les différents paramètres (adresse de la requête, paramètres de transfert) du <. 🎜>demande de publication

. Lorsque Lorsque le navigateur effectue des opérations d'actualisation et de restauration, il envoie automatiquement une demande de publication basée sur les informations enregistrées dans l'URL et entre dans la page correspondante, réalisant ainsi la fonction souhaitée.

Définir la syntaxe de l'URL :

Prenons l'exemple de l'adresse suivante :

"http://localhost/rms_hold /index .php/Home/Index/loadHomePage#/rms_hold/index.php/Home/

Resource

Request/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();
}

Copier après la connexion

如以上代码所示，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);
}
}

Copier après la connexion

介绍一下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 = &#39;Detail&#39;]",
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();
});
});

Copier après la connexion

以上函数是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&#39;).addClass(&#39;open&#39;);
$(this).parents(&#39;.sub-menu&#39;).show();
});
$(this).parent(&#39;li&#39;).parents(&#39;li&#39;).addClass(&#39;active open&#39;);
return false;
} else {
$(&#39;.sub-menu&#39;).hide();
}
});
$("ul.page-sidebar-menuli").not(".open").find("ul").hide();
}
}
</differ;>

Copier après la connexion

以上所述是小编给大家介绍的Ajax回退刷新页面问题的解决办法的相关知识，希望对大家有所帮助！！