Editions ENI Livres | Vidéos | e-Formations
jQuery et les données
Les fichiers exemples
jQuery permet de stocker temporairement des données dans une page web. Cela peut être intéressant quand on souhaite mémoriser des informations, en les associant à des éléments HTML de la page web, de manière à les exploiter ultérieurement, lors d’une interaction utilisateur par exemple.
Le code du fichier main.html que nous utiliserons pour les tests de ce chapitre est le suivant :
<!DOCTYPE html>
<html lang="fr-FR">
<head>
<meta charset="utf-8">
<title>Page WEB support</title>
<link rel="stylesheet" type="text/css" href="styles/main.css">
<script type="text/javascript" src="scripts/jQuery-331.min.js">
</script>
</head>
<body>
<header>Bienvenue sur la page WEB support de cours -
Chapitre 8</header>
<nav>
<label>Accueil</label>
<label id="pageUne">Bouton un</label>
<label name="pageDeux">Bouton deux</label>
</nav>
<div class="articleContainer">
<article data-order="1">
<label>Article 1</label>
<p>
Lorem ipsum ipsum dolor sit amet, consectetur
adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam,
quis nostrud exercitation...La méthode .data()
Avec cette méthode, on peut stocker un objet contenant les informations que l’on souhaite en l’associant aux éléments retournés par le sélecteur sur lequel elle est appliquée.
Le principe est assez simple : le stockage est effectué sous la forme d’une paire nom/valeur par un appel à la méthode .data() avec deux paramètres. Le premier est une chaîne de caractères nommant l’espace où l’on veut stocker la donnée et le second est la donnée elle-même. On peut stocker plusieurs données de types différents dans un même élément HTML.
Utilisée sans paramètre, la méthode renvoie l’ensemble des données stockées dans l’élément concerné sous la forme d’un objet dont les propriétés sont constituées par les noms des données, et leurs valeurs par les données elles-mêmes.
Par exemple, on tape le code suivant dans la console :
$('article:eq(1)').data("test", "Chaine de caractères test");
$('article:eq(1)').data("essai",{nom: "objet test", prop: "propriété"});
$('article:eq(1)').data("tableau", ["tableau", "test"...AJAX et le mode asynchrone de récupération de données
À une époque pas si lointaine, pour obtenir des données distantes de manière asynchrone en JavaScript, il fallait prendre en compte le fait que les navigateurs utilisaient des méthodes différentes. Ces différences obligeaient les développeurs à écrire de multiples fonctions pour gérer tous les cas de figure. jQuery a apporté une solution pratique en offrant une couche d’abstraction qui permet d’écrire un seul code, la bibliothèque se chargeant de transformer ce code utilisant des objets abstraits en méthodes d’acquisition réelles se basant sur les fonctionnalités qu’elle détecte comme disponibles dans le navigateur. De nos jours, ces différences ont tendance à être gommées, et ce même si certaines subtilités perdurent.
jQuery propose plusieurs méthodes permettant d’obtenir des données distantes ou d’envoyer des données vers un serveur pour leur traitement ou leur enregistrement.
Voici une descriptions des plus utilisées d’entre elles :
.load()
Cette méthode accepte jusqu’à trois paramètres, les deux derniers étant optionnels.
Le premier paramètre, obligatoire, est une chaîne de caractères représentant l’adresse URL de la source des données que l’on souhaite charger. Cette URL peut être écrite en relatif, par rapport à la structure du site et à l’emplacement de la page web dans laquelle on exécute le script, ou en absolu, mais toujours dans la limite du "same domain policy" dont nous avons déjà parlé.
Le deuxième paramètre, optionnel, est un objet ou une chaîne de caractères et représente les propriétés nécessaires pour que la source de données soit fournie avec justesse.
Enfin, le troisième paramètre, optionnel lui aussi, est une fonction callback qui est exécutée dès lors que le traitement de la requête est terminé. Trois paramètres sont passés à cette fonction callback qui lui permettent de manipuler les données reçues et de connaître le statut...
