JSON
JSON (JAVASCRIPT OBJECT NOTATION) EST UN FORMAT DE DONNÉES
UTILISÉ POUR STOCKER ET TRANSMETTRE DES INFORMATIONS DE
MANIÈRE SIMPLE ET LISIBLE. IL RESSEMBLE À UNE LISTE DE PAIRES CLÉ-
VALEUR, OÙ LES DONNÉES SONT ORGANISÉES DE MANIÈRE STRUCTURÉE.
SYNTAX OF JSON
I. LES DONNÉES SONT ÉCRITES À L'INTÉRIEUR D'ACCOLADES { }.
II. LES DONNÉES CONTIENNENT DES PAIRES CLÉ => VALEUR.
III. LA CLÉ ET LA VALEUR SONT SÉPARÉES PAR DEUX POINTS :
IV. LES DONNÉES SONT SÉPARÉES PAR DES VIRGULES (,) : {"CLÉ" : "VALEUR",
"CLÉ" : "VALEUR"}.
V. LE JSON PEUT ÊTRE ÉCRIT SUR UNE OU PLUSIEURS LIGNES EN FONCTION DES
DONNÉES.
VI. LES CROCHETS CARRÉS CONTIENNENT UN TABLEAU [ ].
VII. LES ACCOLADES CONTIENNENT UN OBJET { }.
[Link]()
ET
[Link]()
‘ [Link] ‘
EST UNE FONCTION QUI PREND UNE CHAÎNE DE CARACTÈRES JSON EN ENTRÉE ET LA
TRANSFORME EN UN OBJET JAVASCRIPT CORRESPONDANT. CELA SIGNIFIE QUE VOUS
POUVEZ UTILISER [Link] POUR CONVERTIR DES DONNÉES JSON EN OBJETS
JAVASCRIPT EXPLOITABLES.
EXEMPLE:
‘ [Link] ‘
EST UNE FONCTION QUI PREND UN OBJET JAVASCRIPT EN ENTRÉE ET LE TRANSFORME
EN UNE CHAÎNE DE CARACTÈRES JSON.
CELA PERMET DE CONVERTIR DES OBJETS JAVASCRIPT EN FORMAT JSON POUR LE
STOCKAGE OU LA TRANSMISSION DES DONNÉES.
EXEMPLE :
TP
1__ DANS NOTRE PAGE HTML, NOUS AVONS CRÉÉ UN ÉLÉMENT <SELECT> VIDE.
2__ LORSQUE LA PAGE SE CHARGE, NOUS UTILISONS UN FICHIER JAVASCRIPT POUR .LE
REMPLIR AVEC DES OPTIONS DE DEVISES.
3__ LES OPTIONS SONT BASÉES SUR UN TABLEAU D'OBJETS CONTENANT DES
INFORMATIONS SUR DIFFÉRENTES DEVISES :
{"CC": "MAD", "SYMBOL": "MAD", "NAME": "DIRHAM MAROCAIN"}
{"CC": "EUR", "SYMBOL": "\U20AC", "NAME": "EURO EUROPÉEN"}
{"CC": "USD", "SYMBOL": "US$", "NAME": "DOLLAR AMÉRICAIN"}
{"CC": "AED", "SYMBOL": "\U061F", "NAME": "DIRHAM DES ÉMIRATS ARABES UNIS"}
4__ GRÂCE À NOTRE FICHIER JAVASCRIPT, LE SÉLECTEUR <SELECT> SERA
DYNAMIQUEMENT REMPLI AVEC CES OPTIONS LORS DU CHARGEMENT DE LA PAGE.
SOLUTIOn
-<html>
-$js
TP2
1. DANS NOTRE PAGE HTML, NOUS AVONS AJOUTÉ LES ÉLÉMENTS SUIVANTS :
2. UN CHAMP DE SAISIE <INPUT> OÙ LES UTILISATEURS PEUVENT ENTRER LE NOM D'UN
PÈRE.
3. UN BOUTON QUI, LORSQU'IL EST CLIQUÉ, DÉCLENCHERA UNE FONCTION JAVASCRIPT
POUR VÉRIFIER SI LE NOM SAISI CORRESPOND À L'UN DES NOMS DE PÈRE DANS NOTRE
LISTE DE DONNÉES JSON.
4. DANS NOTRE FICHIER JAVASCRIPT, NOUS AVONS DÉFINI LE CODE JSON SUIVANT : (VOIR LE
FICHIER TP2)
5. LORSQUE L'UTILISATEUR SAISIT UN NOM DE PÈRE DANS LE CHAMP DE SAISIE ET CLIQUE
SUR LE BOUTON, NOTRE FONCTION JAVASCRIPT VÉRIFIERA SI LE NOM SAISI CORRESPOND
À L'UN DES NOMS DE PÈRE DANS LA LISTE DE DONNÉES JSON. SI UNE CORRESPONDANCE
EST TROUVÉE, LES ENFANTS DE CE PÈRE SERONT AFFICHÉS.
SOLUTIOn
<html>
$js
ajax
Definition :
AJAX(ASYNCHRONOUS JAVASCRIPT AND XML) EST UNE TECHNIQUE
UTILISÉE EN DÉVELOPPEMENT WEB POUR ENVOYER ET RECEVOIR DES
DONNÉES DE MANIÈRE ASYNCHRONE* ENTRE UN NAVIGATEUR WEB ET UN
SERVEUR. CONTRAIREMENT À L'APPROCHE TRADITIONNELLE OÙ LA PAGE
ENTIÈRE EST RECHARGÉE LORSQU'UNE ACTION EST EFFECTUÉE, AJAX
PERMET DE METTRE À JOUR DYNAMIQUEMENT CERTAINES PARTIES D'UNE
PAGE WEB SANS RECHARGER L'ENSEMBLE DE LA PAGE.
Sighinfication d’asynchrone
EN PROGRAMMATION, UNE OPÉRATION ASYNCHRONE FAIT RÉFÉRENCE À
UNE TÂCHE QUI COMMENCE MAIS QUI NE BLOQUE PAS L'EXÉCUTION DU
PROGRAMME EN ATTENDANT LA FIN DE CETTE TÂCHE. AU LIEU DE CELA, LE
PROGRAMME PEUT CONTINUER À EXÉCUTER D'AUTRES INSTRUCTIONS
PENDANT QUE LA TÂCHE ASYNCHRONE EST EN COURS.
VOICI UN EXEMPLE CONCRET POUR ILLUSTRER LA DIFFÉRENCE ENTRE L'APPROCHE
TRADITIONNELLE ET L'UTILISATION D'AJAX :
SUPPOSONS QUE VOUS AVEZ UN SITE WEB COMPORTANT UNE LISTE DE COMMENTAIRES
D'UTILISATEURS. DANS L'APPROCHE TRADITIONNELLE, LORSQUE VOUS VOULEZ AFFICHER
DE NOUVEAUX COMMENTAIRES, VOUS DEVEZ RECHARGER TOUTE LA PAGE. CELA SIGNIFIE
QUE CHAQUE FOIS QU'UN UTILISATEUR AJOUTE UN COMMENTAIRE, VOUS DEVEZ
RENVOYER UNE REQUÊTE AU SERVEUR, QUI RENVOIE ENSUITE UNE NOUVELLE VERSION
DE LA PAGE ENTIÈRE, Y COMPRIS LES NOUVEAUX COMMENTAIRES. EN CONSÉQUENCE, LA
PAGE ENTIÈRE EST RECHARGÉE, CE QUI PEUT ÊTRE LENT ET ENTRAÎNER UNE MAUVAISE
EXPÉRIENCE UTILISATEUR.
Syntaxe of ajax
I. CRÉATION DE L'OBJET XMLHTTPREQUEST EN UTILISANT LE CONSTRUCTEUR NEW() XMLHTTPREQUEST
II. CONFIGURATION DE LA REQUÊTE EN UTILISANT LA MÉTHODE ‘ OPEN() ’
III. DÉFINITION DU GESTIONNAIRE DE RÉPONSE
IV. ENVOI DE LA REQUÊTE
EST UN INTERMÉDIAIRE ENTRE NOTRE CODE JAVASCRIPT ET LE SERVEUR. IL
NOUS PERMET D'ENVOYER DES DONNÉES AU SERVEUR ET DE RECEVOIR LES
RÉPONSES CORRESPONDANTES.
Configuration de la requête en utilisant la méthode ‘
open() ’
LA MÉTHODE ‘ OPEN() ’ EST UNE MÉTHODE DE L'OBJET XMLHTTPREQUEST QUI EST
UTILISÉE POUR CONFIGURER UNE REQUÊTE AJAX AVANT DE L'ENVOYER.
LA MÉTHODE ‘ OPEN() ’ PREND GÉNÉRALEMENT TROIS PARAMÈTRES OBLIGATOIRES :
1. LA MÉTHODE HTTP, TELLE QUE ‘GET’, ‘POST’ ETC, QUI INDIQUE LE TYPE D'ACTION
À EFFECTUER SUR LE SERVEUR.
2. L'URL DE LA RESSOURCE À LAQUELLE LA REQUÊTE EST DESTINÉE.
3. UN PARAMÈTRE BOOLÉEN FACULTATIF QUI SPÉCIFIE SI LA REQUÊTE DOIT ÊTRE
ASYNCHRONE (‘TRUE’) OU SYNCHRON (‘FALSE’) . LA VALEUR PAR DÉFAUT EST (‘TRUE’) ,
CE QUI SIGNIFIE QUE LA REQUÊTE EST ASYNCHRONE.
Définition du gestionnaire de réponse
NOUS DÉFINISSONS UN GESTIONNAIRE POUR GÉRER LA RÉPONSE
RENVOYÉE PAR LE SERVEUR
1) ONREADYSTATECHANGE : EST INVOQUE LORCEQU’IL Y A UN CHANGEMENT
D’ETAT DE LA REQUÊTE CAD READY STATE
2) READYSTATE : C’EST L’ETAT DE LA REQUÊTE. IL A 5 VALEURS COMME SUITE
[0] => le requete n'est pas commencer
[1] => connexion au serveur établie
[2] => demande reçue
[3] => demande est en train de traitement
[4] => la requete est terminer et la reponse prête
onload est déclenché lorsque la requête a été effectuée
avec succès, c'est-à-dire que la réponse a un statut HTTP
200 (OK).
onloadstart : Cet événement est déclenché lorsque la requête
commence.
onprogress : Cet événement est déclenché périodiquement pendant que
la réponse est en cours de téléchargement. Vous pouvez l'utiliser pour
afficher une barre de progression ou des informations de chargement.
onloadend : Cet événement est déclenché lorsque la requête est
terminée, que ce soit avec succès ou en cas d'erreur.
onerror : Cet événement est déclenché en cas d'erreur lors de la requête.
3) STATUTS : EST UNE PROPRIETE DE L'OBJET XMLHTTPREQUEST CONTIENT LE CODE
DE STATUT DE LA RÉPONSE HTTP RETOURNÉE PAR LE SERVEUR. CE CODE DE STATUT
INDIQUE LE RÉSULTAT DE LA REQUÊTE EFFECTUÉE.
VOICI QUELQUES CODES DE STATUT HTTP COURANTS :
• [200] : OK - LA REQUÊTE A ÉTÉ TRAITÉE AVEC SUCCÈS.
•[404] : NOT FOUND - LA RESSOURCE DEMANDÉE N'A PAS ÉTÉ TROUVÉE SUR LE
SERVEUR.
•[500] : INTERNAL SERVER ERROR - UNE ERREUR INTERNE S'EST PRODUITE SUR LE
SERVEUR.
•[302] : FOUND - LA RESSOURCE DEMANDÉE A ÉTÉ TEMPORAIREMENT DÉPLACÉE
VERS UNE AUTRE URL.
IV. Envoi de la requête
LA MÉTHODE ‘ SEND() ’ EST UTILISÉE AVEC L'OBJET XMLHTTPREQUEST POUR
ENVOYER UNE REQUÊTE HTTP AU SERVEUR.
ELLE EST UTILISÉE SANS ARGUMENT POUR UNE REQUÊTE SIMPLE OU AVEC UN
ARGUMENT POUR ENVOYER DES DONNÉES SUPPLÉMENTAIRES AVEC LA REQUÊTE
DÉPENDRA DU FORMAT DE DONNÉES ATTENDU PAR LE SERVEUR ET DE LA
MÉTHODE DE LA REQUÊTE (GET, POST, ETC.).
FIN