Cet article expliquera ce que sont AJAX et jQuery et examinera des exemples de comment les utiliser.
AJAX est un outil permettant de créer des applications Web qui communiquent avec le serveur en arrière-plan. Dans ce cas, l'utilisateur reçoit une application avec des mises à jour dynamiques du contenu, sans recharger la page entière.
jQuery est un framework JavaScript, une bibliothèque qui vous permet d'utiliser plus facilement certaines fonctionnalités Javascript, telles que la création d'effets visuels, la gestion d'événements, l'utilisation du support DOM et AJAX.
Vous pouvez télécharger la dernière version de jQuery et vous familiariser en détail avec toutes les fonctionnalités sur le site Web du développeur : http://www.jquery.com/
Dans cet article, nous examinerons une seule fonction de la bibliothèque jQuery, à savoir la fonction $.ajax(). Cette fonctionnalité nous permet à la fois de transmettre des données au serveur et de recevoir des réponses du serveur, le tout en arrière-plan, sans recharger la page. Les paramètres de réception ou de transmission de données dépendent des paramètres avec lesquels la fonction $.ajax() est appelée. Les principaux seront abordés ci-dessous. Vous pouvez en savoir plus sur les paramètres dans le manuel jQuery.
Passons à l'examen d'exemples.
Important!
Pour que les exemples fonctionnent correctement, vous devez :
1. Tous les fichiers doivent être écrits en codage UTF-8.
2. Les scripts doivent être exécutés sur le serveur Web et non dans le navigateur sous forme de fichier.
Créons un programme simple qui affiche l'heure actuelle, mise à jour une fois par seconde à l'aide d'une minuterie. Une fonctionnalité de ce programme sera d'obtenir des informations sur l'heure actuelle à partir d'un autre fichier externe.
Contenu du fichier index.html.
function show() ( $.ajax(( url: "time.php", cache: false, success: function(html)( $("#content").html(html); ) )); ) $(document ).ready(function())( show(); setInterval("show()",1000); ));
Le code possède plusieurs fonctionnalités, expliquons-les.
1. La bibliothèque jQuery est incluse dans l'en-tête du fichier HTML, cette ligne est écrite à cet effet.
Le fichier jquery.js lui-même se trouve dans le même dossier que les fichiers d'exemple.
2. Un conteneur est créé dans le corps du document dans lequel nous allons charger le contenu.
3. La fonction $(document).ready(), étrange à première vue, est nécessaire au bon fonctionnement de jQuery, et nous pouvons y effectuer toutes les préparations pour que le programme fonctionne. Dans notre cas, nous appelons la fonction show(), qui spécifie le mécanisme de récupération du contenu d'un autre fichier, et définissons une minuterie pour que la fonction show() soit appelée une fois par seconde.
$(document).ready(function())( show(); setInterval("show()",1000); ));
4. La fonction show() consiste à appeler la fonction $.ajax() avec un certain nombre de paramètres, ce qui permet d'obtenir des informations d'un fichier externe sur le serveur en arrière-plan.
$.ajax(( url : "time.php", cache : false, succès : function(html)( $("#content").html(html); ) ));
Regardons les paramètres utilisés par la fonction $.ajax().
Url : "time.php" Accède au fichier time.php pour récupérer le contenu. cache : false Les résultats de la requête ne sont pas mis en cache. success: function(html)( $("#content").html(html); ) Si la requête réussit, le contrôle passe à la fonction, qui reçoit le contenu en tant que paramètre et écrit son conteneur. L'écriture dans le conteneur s'effectue sur cette ligne :
$("#content").html(html);
Contenu du fichier time.php.
Le but du fichier time.php est d'afficher l'heure actuelle à l'écran.
Téléchargez des exemples de fichiers sources (16,6 Ko) :
Un programme qui charge dynamiquement le contenu à la discrétion de l'utilisateur.
Contenu du fichier index.html.
Quelle page souhaitez-vous ouvrir ?
$(document).ready(function())( $("#btn1").click(function())( $.ajax(( url : "page1.html", cache : false, succès : fonction(html) ( $ ("#content").html(html); ) )); )); $("#btn2").click(function())( $.ajax(( url: "page2.html", cache : false, succès : function(html)( $("#content").html(html); ) )); )); ));Dans le corps du document, un formulaire a été créé comportant deux boutons grâce auxquels l'utilisateur sélectionne le contenu souhaité. Et un conteneur pour charger le contenu.
L'événement de clic sur le bouton "Page 1" est géré par la fonction $("#btn1").click(), et l'événement de clic sur le bouton "Page 2" est traité par la fonction $("#btn2"). fonction clic().
Le contenu des fichiers page1.html et page2.html, qui sont chargés dynamiquement dans la zone de contenu, sont de simples pages HTML ou des fichiers texte contenant du contenu.
Téléchargez des exemples de fichiers sources (18,4 Ko) :
Regardons un exemple qui envoie le nom d'utilisateur saisi au serveur. Lorsque le serveur reçoit un nom, il émet un message d'accueil et compte le nombre de caractères du nom saisi.
Contenu du fichier index.html.
Entrez votre nom:
$(document).ready(function())( $("#myForm").submit(function())( $.ajax(( type : "POST", url : "greetings.php", données : "nom d'utilisateur =" +$("#username").val(), success: function(html)( $("#content").html(html); ) )); return false; )); ));
Un formulaire de saisie d'un nom d'utilisateur a été créé dans le corps du document. Et un conteneur pour charger du contenu dynamique.
Notez que le formulaire lui-même ne comporte pas les champs d’action et de méthode habituels. La fonction $("#myForm").submit() sert de gestionnaire pour l'événement de clic sur le bouton "Soumettre". Jetons un coup d'œil à cette fonction.
$("#myForm").submit(function())( $.ajax(( type : "POST", url : "greetings.php", données : "username="+$("#username").val ( ), succès : function(html)( $("#content").html(html); ) )); return false; ));
Comme nous pouvons le voir, le travail principal est à nouveau lié à la fonction $.ajax(). Cette fois, apparaissent des paramètres supplémentaires qui n'ont pas été pris en compte dans les exemples 1 et 2. A savoir :
Tapez : "POST" Type de transfert de données. data: "username="+$("#username").val() Paramètres transmis au serveur. Dans ce cas, nous transmettons le contenu du champ nom d'utilisateur - le nom d'utilisateur. En général, les paramètres s'écrivent de la même manière que dans la méthode GET, sur une seule ligne, par exemple :
données : "nom d'utilisateur=Vasya&age=18&sex=male"
Attention, à la fin il y a une ligne :
Renvoie faux ; Ceci est fait pour que le formulaire n'essaye pas de transférer des données vers le fichier à partir duquel il est lancé et que la page ne se recharge pas.
Contenu du fichier salutations.php.
Nous affichons le message d'accueil et comptons le nombre de caractères dans le nom.
Téléchargez des exemples de fichiers sources (16,8 Ko) :
Il convient de dire en conclusion qu'en plus des avantages évidents de la création de pages utilisant un contenu mis à jour dynamiquement, il existe un certain nombre d'inconvénients qui doivent être pris en compte lors du développement d'un site, à savoir :
1. Sur les pages avec mise à jour dynamique du contenu, le bouton « Retour » du navigateur ne fonctionne pas correctement.
2. Les pages avec des mises à jour de contenu dynamiques ne modifient pas les URL en fonction de leur contenu, elles ne peuvent donc pas être mises en signet.
3. Les pages avec des mises à jour de contenu dynamiques ne sont pas indexées par les moteurs de recherche, car ils n'exécutent pas de commandes JavaScript.
Vous pouvez vous débarrasser des inconvénients ci-dessus par programme. Cet article ne traite pas de ces méthodes.
Bonne journée. Cette fois, un peu plus sur JavaScript. Il fallait mettre à jour le contenu d’un bloc en appuyant sur un bouton, sans recharger la page, pour ne pas rendre fou l’utilisateur. Grâce à cette petite note, vous pourrez vous rappeler une fois pour toutes comment mettre cela en œuvre.
Vous pouvez mettre à jour non seulement, mais aussi
Tout d’abord, nous avons besoin d’un élément block. Qu'il en soit ainsi, créons-le sur la page et attribuons-lui un identifiant unique par lequel jQuery le reconnaît.
Bonjour le monde
Il est important de comprendre que l'identifiant doit être unique sur toute la page, donc en appelant $('#block') on obtient d'abordélément sur la page avec cet identifiant. Si vous devez modifier le contenu de plusieurs éléments, vous devez utiliser des classes.
Bonjour le monde
|
Bonjour le monde |
Bonjour le monde
Laisser comme boutons agit comme un lien régulier , avec le stub href=# . Dans des circonstances normales, un stub ramènera l'utilisateur en haut de la page Web. Nous attacherons un événement onclick au lien, dans lequel nous appellerons la fonction js setNewEntry(), qui, par exemple, recevra du nouveau contenu pour notre élément de bloc.
Bouton 1
Bouton 2
Bouton 3
Effacer le bloc
renvoie faux ; après l'appel est nécessaire pour annuler la transition vers l'url depuis href , dans notre cas nous ne reviendrons pas en haut de la page, mais resterons en place.
Regardons maintenant la fonction elle-même dans JS ; nous allons modifier le contenu du bloc en utilisant la méthode .html(). Si nous l'utilisons sans arguments, il nous renverra le contenu actuel du bloc ; si nous lui passons un argument, par exemple une chaîne, alors il remplacera le contenu du bloc par celui-ci. Dans des cas plus proches de la réalité, la méthode reçoit une fonction qui traite le bloc et lui renvoie un nouveau contenu. Mais pour l’instant nous nous limiterons au passage de la corde.
function setNewEntry(entry) ( //#block - rechercher un élément par identifiant //.block - rechercher par nom de classe $("#block").html(entry); )
Voici à quoi ressemblera le code de la page Web.
js .html démo
Bonjour le monde
Bouton 1
Bouton 2
Bouton 3
Effacer le bloc
function setNewEntry(entry) ( //#block - rechercher un élément par identifiant //.block - rechercher par nom de classe $("#block").html(entry); ) Exemple de passage d'une fonction à la méthode.html()
J'ai trouvé une fonction très simple qui accumulera notre historique de clics sur les boutons et l'effacera quand nous le souhaitons. Assez pour la démonstration.
fonction setNewEntry(entry) ( $("#block").html(getNewEntry($("#block").html(), Entry)); ) fonction getNewEntry(oldHTML, newHTML) ( if(newHTML == "" ) renvoie newHTML ; sinon renvoie oldHTML + newHTML ; )
ConclusionBon, c'est tout, si vous y regardez, ce n'est pas compliqué, mais avec l'aide de cette méthode, vous pouvez accomplir de « grandes choses » et créer des pages Web dynamiques pour tous les goûts. Merci pour votre attention!
Disons que j'ai une page index.html avec un menu de navigation et que j'ai 15 autres pages html avec le même menu.
Est-ce possible si html/css/js met à jour UN fichier (par exemple le fichier index.html) et que toutes les mises à jour sont appliquées aux 15 documents ?
Je sais que vous pouvez le faire avec PHP, mais la page que j'utilise n'utilise pas de fichier d'index PHP, je cherche donc un autre moyen.
Peut-être existe-t-il un autre moyen d’y parvenir ? Peut-être du JS angulaire ? Avez-vous des suggestions ou des liens que vous pouvez suggérer de lire/apprendre à faire cela ?
Essaye ça:
document.getElementById("sideBar").innerHTML="";
Pouvez-vous utiliser JQuery ? :D
Exemple page 1 :
$(document).ready(function() ( $("#sideBar").load("side_content.html"); ));
Oui, c'est possible et c'est une exigence pour tout type de taille de site non triviale.
La manière générale de faire des choses comme ça sans devenir trop compliqué est la suivante. Dans vos fichiers HTML, vous incluez des modèles. Ces modèles contrôlent l'apparence générale de votre site. Tous vos fichiers HTML contiennent les mêmes modèles. Si vous voulez quelque chose de différent sur une page spécifique, vous remplacez vos modèles dans ce fichier HTML spécifique.
En conséquence, cela ressemble à ceci :
mon contenu ici.
Dans votre style.css et votre custom.js, vous pouvez accéder au paramètre ville. Vous pouvez ajouter plus de feuilles de style et plus de scripts javascript selon vos besoins. La plupart des sites ont plus de style et de javascript que de contenu.
Mon site préféré pour en savoir plus sur ces technologies est Réseau de développeurs Mozilla, mais il existe de nombreuses autres ressources intéressantes.
La synchronisation des onglets est disponible via localStorage et StorageEvent. Plus d'informations peuvent être trouvées sur MDN
Après avoir mis à jour la navigation, vous appelez localStorage.setItem(someKey, someValue) et avec window.addEventListener("storage", this.handleStorageEvent) gérez le changement de localStorage sur d'autres onglets. L'onglet sur lequel l'événement a été déclenché ne propagera pas la modification localStorage.
J'espère que ma réponse vous a aidé : 3
vous pouvez le faire avec une requête http XML... il vous suffit de définir l'intégralité de l'en-tête de navigation, du menu dans un fichier et d'accéder à un div dans toutes les pages...
function includeHTML() ( var z, i, elmnt, file, xhttp; /*boucle sur une collection de tous les éléments HTML :*/ z = document.getElementsByTagName("*"); for (i = 0; i< z.length; i++) { elmnt = z[i]; /*search for elements with a certain atrribute:*/ file = elmnt.getAttribute("include-html"); if (file) { /*make an HTTP request using the attribute value as the file name:*/ xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() { if (this.readyState == 4) { if (this.status == 200) {elmnt.innerHTML = this.responseText;} if (this.status == 404) {elmnt.innerHTML = "Page not found.";} /*remove the attribute, and call this function once more:*/ elmnt.removeAttribute("include-html"); includeHTML(); } } xhttp.open("GET", file, true); xhttp.send(); /*exit the function:*/ return; } } }; includeHTML();
