Comment réaliser l'avant, l'arrière et l'actualisation de la page Ajax

Cette fois, je vais vous montrer comment mettre en œuvre l'avant, l'arrière et l'actualisation de la page Ajax. Quelles sont les précautions pour réaliser l'avant, l'arrière et l'actualisation de la page Ajax. cas pratique, jetons un coup d'oeil.

L'utilisation d'Ajax peut obtenir des données de manière asynchrone et 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

Il n'est pas convivial pour les robots des moteurs de recherche

Auparavant, le. l'ancre de hachage du navigateur a été utilisée Cliquez pour résoudre

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 de hachage via onhashchange événement , effectuer des opérations avant et arrière manuellement, prise en charge du navigateur

2,

Puis une technologie de hashbang est apparue, c'est-à-dire l'ajout d'un balisez après l'url# !/myPath pour résoudre les problèmes 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

3,

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)

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>

JS

var $val = $('#ajax-test-val'),
// 获取当前页面的标记
m = window.location.search.match(/\?val=(\d+)/);
// 新进入页面，通过url中的标记初始化数据
if (m) {
increaseVal(m[1] - 1);
}
// 请求
function increaseVal(val) {
$.post('ajax-test.php', {
val: val
}, function(newVal) {
$val.text(newVal);
// 存储相关值至对象中
var state = {
val: newVal,
title: 'title-' + newVal,
url: '?val=' + newVal
}
// 将相关值压入history栈中
window.history.pushState && window.history.pushState(state, state.title, state.url);
});
}
$('#ajax-test-btn').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);
};

PHP

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

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 après avoir obtenu la mise à jour

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

Ce qu'il faut retenir c'est que le navigateur ne se chargera pas automatiquementLa page de contenu asynchrone correspondant à cette partie de la balise url a besoin que nous obtenions

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour un contenu plus passionnant, veuillez prêter attention aux autres articles connexes sur le site Web PHP chinois !

Lecture recommandée :

Comment implémenter une demande de file d'attente AJAX (avec code)

pushState+Ajax pour obtenir aucune actualisation Changement de page

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!