Maison interface Web js tutoriel Exemple d'utilisation d'ajax et history.pushState pour modifier l'URL de la page sans rapport avecfresh_AJAX

Exemple d'utilisation d'ajax et history.pushState pour modifier l'URL de la page sans rapport avecfresh_AJAX

May 25, 2018 pm 03:21 PM
ajax 改变

Cet article présente principalement l'exemple d'utilisation d'ajax et history.pushState pour modifier l'URL de la page sans actualiser. Les amis qui en ont besoin peuvent se référer à

Performance

. Si vous utilisez Lorsque des navigateurs tels que Chrome ou Firefox visitent ce blog, github.com, plus.google.com et d'autres sites Web, si vous faites attention, vous constaterez que les clics entre les pages sont demandés de manière asynchrone via ajax, et en même temps , l'URL de la page a changé. Et il peut très bien prendre en charge le navigateur en avant et en arrière.

Qu'est-ce qui a une fonction si puissante ?

HTML5 fait référence à de nouvelles API, history.pushState et history.replaceState, qui sont utilisées pour modifier l'URL de la page sans actualiser.
Différences par rapport à l'AJAX traditionnel

L'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. Pour une meilleure accessibilité, après la modification du contenu, le hachage de l'URL est généralement modifié

3 La méthode de hachage ne peut pas bien gérer les problèmes de transfert en avant et en arrière du navigateur !

4. Le navigateur a introduit l'interface onhashchange. Les navigateurs qui ne la prennent pas en charge ne peuvent déterminer que périodiquement si le hachage a changé

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

6. Twitter et Google ont convenu d'utiliser #!xxx (c'est-à-dire que le premier caractère du hachage est !), et les moteurs de recherche le prennent en charge.

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

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

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.

Comment utiliser

<strong style="border-color: initial; border-width: 0px; padding: 0px; margin: 0px;">var state = { 
title: title, 
url: options.url, 
otherkey: othervalue 
}; 
window.history.pushState(state, document.title, url);</strong>
Copier après la connexion
En plus du titre et de l'URL, vous pouvez également ajouter d'autres données à l'objet d'état, telles que : vous souhaitez également envoyer un peu d'ajax Enregistrez la configuration.

replaceState et pushState sont similaires, je ne les présenterai donc pas ici.

Comment répondre aux opérations avant et arrière du navigateur

L'événement onpopstate est fourni sur l'objet window. L'objet state passé ci-dessus deviendra un sous-objet de l'événement, de sorte que le titre stocké et L'URL peut être obtenue.

window.addEventListener(&#39;popstate&#39;, function(e){ 
if (history.state){ 
var state = e.state; 
//do something(state.url, state.title); 
} 
}, false);
Copier après la connexion
De cette façon, vous pouvez combiner ajax et pushState pour une navigation parfaite sans actualisation.

Quelques restrictions

1. L'URL transmise doit être dans le même domaine et ne peut pas traverser de domaines

2 Bien que l'objet d'état puisse stocker de nombreux attributs personnalisés, il n'est pas sérialisable. Les objets ne le peuvent pas. être stockés, tels que : les objets DOM.

Quelques traitements correspondant au backend

Dans ce mode, en plus d'utiliser ajax pour naviguer sans rafraîchir, il faut également s'assurer que l'URL modifiée peut être parcourue normalement après l'avoir directement demandée, donc le le backend doit les traiter.

1. Envoyez un en-tête spécial à ajax en utilisant pushState, tel que : setRequestHeader('PJAX', 'true').

2. Lorsque le backend obtient l'en-tête avec PJAX=true, les parties communes de la page ne seront pas affichées. Par exemple : PHP peut porter les jugements suivants

function is_pjax(){ 
return array_key_exists(&#39;HTTP_X_PJAX&#39;, $_SERVER) && $_SERVER[&#39;HTTP_X_PJAX&#39;] === &#39;true&#39;; 
}
Copier après la connexion
Bien que l'interface n'ait que pushState, replaceState et onpopstate, de nombreux traitements doivent être effectués lors de son utilisation.

Un plug-in basé sur jquery a été écrit pour cela. L'article suivant présentera en détail comment utiliser pjax (ajax+pushState) pour modifier la navigation dans les URL sans actualiser.

J'ai compilé ce qui précède pour vous, j'espère que cela vous sera utile à l'avenir.

Articles connexes :

Résumé en 3 points des principes techniques Ajax_Connexes à AJAX

Guide d'utilisation de la classe d'encapsulation AJAX

Tutoriel élémentaire AJAX : Apprendre à connaître AJAX pour la première fois

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!

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

AI Hentai Generator

Générez AI Hentai gratuitement.

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Meilleurs paramètres graphiques
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Comment réparer l'audio si vous n'entendez personne
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: Comment déverrouiller tout dans Myrise
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Outils chauds

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Comment modifier le prix de livraison de départ de la version marchand de Meituan Takeout Comment modifier le prix de livraison de départ de la version marchand de Meituan Takeout Mar 27, 2024 pm 07:20 PM

Dans le processus de fonctionnement de Meituan Takeout Merchant Edition, la fixation du prix de livraison de départ est un maillon crucial. Un prix de livraison initial raisonnable peut non seulement aider les commerçants à contrôler les coûts, mais également à augmenter dans une certaine mesure le montant des commandes, augmentant ainsi les revenus globaux. Cependant, de nombreux commerçants ne savent pas grand-chose sur la manière de modifier le prix minimum de livraison. Ainsi, dans l'article suivant, l'éditeur de ce site vous proposera un guide détaillé de fixation des prix de départ pour les commerçants. Si vous souhaitez en savoir plus, rendez-vous à l'article suivant pour le découvrir ! Dans Meituan Takeout Merchant Center, connectez-vous et entrez les paramètres du magasin, puis sélectionnez la gestion du magasin. Dans le menu de navigation en haut de la page de gestion du magasin, sélectionnez les informations de livraison, puis cliquez sur Ajouter une zone de livraison pour terminer l'opération. Une fois que vous avez ajouté un emplacement, les frais d'expédition correspondants apparaîtront automatiquement. Après avoir finalisé votre commande, vous recevrez

Comment résoudre l'erreur 403 rencontrée par la requête jQuery AJAX Comment résoudre l'erreur 403 rencontrée par la requête jQuery AJAX Feb 20, 2024 am 10:07 AM

Titre : Méthodes et exemples de code pour résoudre les erreurs 403 dans les requêtes jQuery AJAX L'erreur 403 fait référence à une demande selon laquelle le serveur interdit l'accès à une ressource. Cette erreur se produit généralement parce que la demande manque d'autorisations ou est rejetée par le serveur. Lorsque vous effectuez des requêtes jQueryAJAX, vous rencontrez parfois cette situation. Cet article explique comment résoudre ce problème et fournit des exemples de code. Solution : Vérifiez les autorisations : assurez-vous d'abord que l'adresse URL demandée est correcte et vérifiez que vous disposez des autorisations suffisantes pour accéder à la ressource.

Comment résoudre l'erreur 403 de la requête jQuery AJAX Comment résoudre l'erreur 403 de la requête jQuery AJAX Feb 19, 2024 pm 05:55 PM

jQuery est une bibliothèque JavaScript populaire utilisée pour simplifier le développement côté client. AJAX est une technologie qui envoie des requêtes asynchrones et interagit avec le serveur sans recharger la page Web entière. Cependant, lorsque vous utilisez jQuery pour effectuer des requêtes AJAX, vous rencontrez parfois des erreurs 403. Les erreurs 403 sont généralement des erreurs d'accès refusé par le serveur, probablement en raison de problèmes de politique de sécurité ou d'autorisation. Dans cet article, nous verrons comment résoudre la requête jQueryAJAX rencontrant une erreur 403.

Comment obtenir des variables de la méthode PHP en utilisant Ajax ? Comment obtenir des variables de la méthode PHP en utilisant Ajax ? Mar 09, 2024 pm 05:36 PM

L'utilisation d'Ajax pour obtenir des variables à partir de méthodes PHP est un scénario courant dans le développement Web. Grâce à Ajax, la page peut être obtenue dynamiquement sans actualiser les données. Dans cet article, nous présenterons comment utiliser Ajax pour obtenir des variables à partir de méthodes PHP et fournirons des exemples de code spécifiques. Tout d’abord, nous devons écrire un fichier PHP pour gérer la requête Ajax et renvoyer les variables requises. Voici un exemple de code pour un simple fichier PHP getData.php :

Comment résoudre le problème de l'erreur 403 jQuery AJAX ? Comment résoudre le problème de l'erreur 403 jQuery AJAX ? Feb 23, 2024 pm 04:27 PM

Comment résoudre le problème de l’erreur 403 jQueryAJAX ? Lors du développement d'applications Web, jQuery est souvent utilisé pour envoyer des requêtes asynchrones. Cependant, vous pouvez parfois rencontrer le code d'erreur 403 lors de l'utilisation de jQueryAJAX, indiquant que l'accès est interdit par le serveur. Cela est généralement dû aux paramètres de sécurité côté serveur, mais il existe des moyens de résoudre le problème. Cet article explique comment résoudre le problème de l'erreur 403 jQueryAJAX et fournit des exemples de code spécifiques. 1. faire

PHP et Ajax : créer un moteur de suggestions de saisie semi-automatique PHP et Ajax : créer un moteur de suggestions de saisie semi-automatique Jun 02, 2024 pm 08:39 PM

Créez un moteur de suggestions de saisie semi-automatique en utilisant PHP et Ajax : Script côté serveur : gère les requêtes Ajax et renvoie des suggestions (autocomplete.php). Script client : envoyer une requête Ajax et afficher des suggestions (autocomplete.js). Cas pratique : Incluez le script dans la page HTML et spécifiez l'identifiant de l'élément d'entrée de recherche.

PHP vs Ajax : solutions pour créer du contenu chargé dynamiquement PHP vs Ajax : solutions pour créer du contenu chargé dynamiquement Jun 06, 2024 pm 01:12 PM

Ajax (Asynchronous JavaScript et XML) permet d'ajouter du contenu dynamique sans recharger la page. En utilisant PHP et Ajax, vous pouvez charger dynamiquement une liste de produits : HTML crée une page avec un élément conteneur et la requête Ajax ajoute les données à l'élément après l'avoir chargé. JavaScript utilise Ajax pour envoyer une requête au serveur via XMLHttpRequest afin d'obtenir des données produit au format JSON à partir du serveur. PHP utilise MySQL pour interroger les données produit de la base de données et les encoder au format JSON. JavaScript analyse les données JSON et les affiche dans le conteneur de pages. Cliquer sur le bouton déclenche une requête Ajax pour charger la liste de produits.

PHP et Ajax : moyens d'améliorer la sécurité d'Ajax PHP et Ajax : moyens d'améliorer la sécurité d'Ajax Jun 01, 2024 am 09:34 AM

Afin d'améliorer la sécurité Ajax, il existe plusieurs méthodes : Protection CSRF : générer un token et l'envoyer au client, l'ajouter côté serveur dans la demande de vérification. Protection XSS : utilisez htmlspecialchars() pour filtrer les entrées afin d'empêcher l'injection de scripts malveillants. En-tête Content-Security-Policy : limite le chargement de ressources malveillantes et spécifie les sources à partir desquelles les scripts et les feuilles de style peuvent être chargés. Valider les entrées côté serveur : validez les entrées reçues des requêtes Ajax pour empêcher les attaquants d'exploiter les vulnérabilités d'entrée. Utilisez des bibliothèques Ajax sécurisées : profitez des modules de protection CSRF automatiques fournis par des bibliothèques telles que jQuery.

See all articles