pushState, replaceState, onpopstate réalisent l'actualisation avant et arrière de la page Ajax-js tutoriel-php.cn

pushState, replaceState, onpopstate réalisent l'actualisation avant et arrière de la page Ajax

亚连

Libérer： 2018-05-23 11:15:44

original

1694 Les gens l'ont consulté

Cet article présente principalement pushState, replaceState et onpopstate pour réaliser l'actualisation avant et arrière des pages Ajax. Il est très bon et a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer

Vous pouvez l'utiliser. Ajax L'obtention de données de manière asynchrone peut rendre la page plus efficacement.

Mais il y a aussi quelques problèmes :

Actualisez à nouveau la page, et la page reviendra à son état initial

Parcourir Les fonctions avant et arrière du navigateur ne sont pas valides

Pas convivial pour les robots des moteurs de recherche

Auparavant, le point d'ancrage de hachage du navigateur était utilisé pour résoudre le problème<.>

Différents hachages marquent différentes parties de la page, ce qui peut corriger le problème des données d'actualisation de page incorrectes

Surveillez ensuite le changement du point d'ancrage du hachage via l'événement onhashchange et effectuez manuellement des opérations avant et arrière , prise en charge du navigateur

Puis une technologie hashbang est apparue, qui consiste à ajouter la balise #!/myPath après l'url pour résoudre le problème ci-dessus.

Définissez une partie de page via un chemin, ce qui est couramment vu dans les applications monopage (déjà encapsulées dans Angular). Mais il semble que seul Google prend vraiment en charge l'exploration de ce chemin

Les nouvelles fonctionnalités de HTML5 ont aidé, grâce aux deux nouvelles méthodes d'historique pushState et replaceState et à l'événement de fenêtre onpopstate, à résoudre le problème au-dessus de trois problèmes

Bien sûr, comme il s'agit d'une nouvelle fonctionnalité de HTML5, elle n'est pas bien prise en charge par les anciens navigateurs. Il est recommandé d'utiliser la méthode hashbang pour la rendre compatible

Cet article. parle principalement de pushState, ces nouveautés

Le texte est trop ennuyeux, jetons un œil à l'icône pour le ressentir directement

Le but de ceci Chestnut est : La valeur initiale est 0. Elle s'incrémente grâce à des requêtes asynchrones. Vous pouvez avancer ou reculer et actualiser. Vous pouvez également obtenir les données correspondantes après avoir ouvert une nouvelle URL

history.pushState(state, title, url)
history.replaceState(state, title, url)

Copier après la connexion

Parmi elles, indiquez. est un objet json, qui peut être personnalisé pour stocker certaines données. , title est le titre de la balise correspondant à cette url (mais il semble que les navigateurs ignorent ce paramètre)

url est l'url de la balise d'une certaine page ( l'opération modifiera uniquement l'URL dans la barre d'adresse et ne se chargera pas immédiatement. Cette URL peut être simplement marquée avec ?w=a, ajaxPage.html/w=a, &w=a. C'est juste une marque. Comparez-la simplement quand. prenant la valeur.)

La différence entre replaceState et pushState est la suivante : le premier remplace directement la valeur actuelle, et le second consiste à pousser une valeur dans la pile

window.onpopstate Après l'événement est déclenché, le premier objet json de la méthode ci-dessus peut être obtenu via history.state

Partie d'implémentation

HTML

<p class="push-state-test">
<input type="button" id="ajax-test-btn" value="Ajax获取">
<p>value: <span id="ajax-test-val">0</span></p>
</p>

Copier après la connexion

var $val = $(&#39;#ajax-test-val&#39;),
// 获取当前页面的标记
m = window.location.search.match(/\?val=(\d+)/);
// 新进入页面，通过url中的标记初始化数据
if (m) {
increaseVal(m[1] - 1);
}
// 请求
function increaseVal(val) {
$.post(&#39;ajax-test.php&#39;, {
val: val
}, function(newVal) {
$val.text(newVal);
// 存储相关值至对象中
var state = {
val: newVal,
title: &#39;title-&#39; + newVal,
url: &#39;?val=&#39; + newVal
}
// 将相关值压入history栈中
window.history.pushState && window.history.pushState(state, state.title, state.url);
});
}
$(&#39;#ajax-test-btn&#39;).click(function() {
increaseVal(parseInt($val.text(), 10));
});
// 浏览器的前进后退，触发popstate事件
window.onpopstate = function() {
var state = window.history.state;
console.log(state)
// 直接将值取出，或再次发个ajax请求
$val.text(state.val);
window.history.replaceState && window.history.replaceState(state, state.title, state.url);
};

Copier après la connexion

PHP

<?php
$val = $_REQUEST[&#39;val&#39;];
echo $val + 1;
?>

Copier après la connexion

Ici, différentes marques sont marquées à l'aide de ?val=num Page de résultats Ajax

Conseils :

Après avoir utilisé pushState, les déclencheurs avant et arrière actuels l'événement popstate et obtient l'objet json correspondant

Les données de l'objet json peuvent être personnalisées

Vous pouvez simplement stocker la balise pertinente et envoyer une requête, ou enregistrer directement les résultats correspondant à l'objet json correspondant. page de balise

Avec l'opération de retour, l'URL de la barre d'adresse est mise à jour et les données asynchrones sont également mises à jour

Actualisez la page ou ouvrez une nouvelle page, vous devez demander des données en fonction la balise dans l'url

N'oubliez pas que le navigateur ne chargera pas automatiquement la balise dans l'url. Pour la page de contenu asynchrone correspondante, nous devons obtenir

Ce qui précède est ce que j'ai compilé pour tout le monde. J'espère que cela sera utile à tout le monde à l'avenir.