Asynchronous Javascript And Xml

Présentation au sujet: "Asynchronous Javascript And Xml"— Transcription de la présentation:

1 Asynchronous Javascript And Xml

2 Qu'est-ce ? Principe XMLHttpRequest Exemple JSON AJAX/JQUERY

3 Qu'est-ce ? Apparu en 2005 dans un essai de James Garret.
AJAX est le nom donné à un ensemble de techniques préexistantes : XHTML JAVASCRIPT DOM (Data Object Model) XMLHttpRequest XML/XSL XMLHttpRequest a été conçu par Mozilla sur le modèle d'un objet ActiveX nommé XMLHTTP créé par Microsoft.

4 Qu'est-ce ? Ajax permet de modifier partiellement la page affichée par le navigateur pour la mettre à jour sans avoir à recharger la page entière. Le terme "Asynchronous", signifie que l'exécution de JavaScript continue sans attendre la réponse du serveur qui sera traitée quand elle arrivera. En mode synchrone, le navigateur serait gelé en attendant la réponse du serveur.

5 Principe L'objet XMLHttpRequest permet de lancer des requêtes d'une page WEB vers le serveur pour y récupérer des fichiers au format XML. Le traitement se fait de façon asynchrone.

6 Principe Pour recueillir des informations sur le serveur, l'objet XMLHttpRequest dispose de deux méthodes: open: établit une connexion. send: envoie une requête au serveur. Les données fournies par le serveur seront récupérées dans les champs de l'objet XMLHttpRequest: responseXml pour un fichier XML ou responseText pour un fichier de texte brute.

7 Principe Il faut attendre la disponibilité des données.
L'état est donné par l'attribut readyState de XMLHttpRequest. Les états de readyState sont les suivants : 0: non initialisé. 1: connexion établie. 2: requête reçue. 3: réponse en cours. 4: terminé.

8 XMLHttpRequest

9 XMLHttpRequest Attributs
readyState le code d'état passe successivement de 0 à 4 qui signifie "prêt". status 200 est ok 404 si la page n'est pas trouvée. responseText contient les données chargées dans une chaîne de caractères. responseXml contient les données chargées sous forme XML, les méthodes de DOM servent à les extraire. onreadystatechange propriété activée par un évènement de changement d'état. On lui assigne une fonction.

10 XMLHttpRequest Méthodes
open(mode, url, boolean) mode: type de requête, GET ou POST url: l'endroit où trouver les données ou l'url de la page de traitement avec, éventuellement, les données à transmettre boolean: true (asynchrone) / false (synchrone). send("chaine") null pour une commande GET.

11 XMLHttpRequest

12 Exemple : index.html

13 Exemple : funcAjax.js

14 Exemple : funcAjax.js

15 Exemple : funcAjax.js

16 Exemple : donnees.txt

17 Exemple

18 Exemple Il est possible d'envoyer la requête à une page php avec , par exemple, des paramètres : <div id="afficheur" onclick="affiche(2)">...</div> function affiche(id){ xmlhttp=GetXmlHttpObject(); ... var url="traitement.php?id="; url=url+id; xmlhttp.open("GET",url,true); xmlhttp.send(null); } $id = $_GET["id"] ; HTML JS PHP

19 Exemple Si nous utilisons responseXML plutôt que responseText, il faudra utiliser les méthodes de DOM pour accéder aux éléments.

20 Exemple

21 Exemple

22 Exemple document.documentElement Renvoie l'élément racine
element.getElementsByTagName("nombalise") Accessible à partir d'un noeud Renvoie une liste des éléments portant le nom de la balise donnée

23 Exemple donnees = xhr.responseXML; lycee = donnees.documentElement;
listeNoms=lycee.getElementsByTagName("prenom");

24 Exemple element.getAttribute("nomdattribut");
Renvoie la valeur de l'attribut nomdattribut du nœud courant element.nodeValue Renvoie la valeur du nœud courant

25 Exemple D'autres méthodes de element element.firstChild
Renvoie le premier nœud enfant du nœud courant element.lastChild lastChild renvoie le dernier élément enfant de l'élément courant. element.nextSibling Renvoie le nœud (node) suivant immédiatement le nœud spécifié dans la liste des enfants

26 Exemple Parser un fichier XML demande une grande rigueur de codage afin de récupérer les valeurs des différents champs du document.

27 Json JavaScript Object Notation est un format de données textuel, générique, dérivé de la notation des objets du langage ECMAScript. Il a été créé par Douglas Crockford en 1999 , et permet de représenter des informations de manière structurée.

28 Json Un document JSON ne comprend que deux éléments structurels :
des ensembles de paires nom / valeur ; des listes ordonnées de valeurs.

29 Json / XML { "menu": <menu id="file" value="File"> <popup>
"menuitem": [ { "value": "New" }, { "value": "Open" }, { "value": "Close" } ] } <menu id="file" value="File"> <popup> <menuitem value="New" /> <menuitem value="Open" /> <menuitem value="Close" /> </popup> </menu>

30 JSON ou XML Les avantages de JSON: La vitesse de traitement.
La simplicité de mise en oeuvre. On n'a pas besoin de parser un fichier XML pour extraire des informations à travers le net, car JSON est reconnu nativement par JavaScript. Les avantages de XML: XML est extensible quant au langage, on peut créer des formats (comme RSS). Il est largement utilisé et reconnu par tous les langages de programmation. Il est plus facile à lire.

31 Ajax/json/Jquery/PHP

32 Ajax/json/Jquery/PHP
$(function() { // gestion du click sur la div afficheur $("#afficheur").click(function() { // appel à la page traitement.php via ajax $.ajax({ url: 'traitement.php', data: $("#texte").serialize(), // URL encodage de la zone ayant pour id « texte » type: 'GET', // données envoyées : texte=le+texte+de+la+zone dataType: 'json', success: // si la requete fonctionne, mise à jour de la liste des departements function(objetJson) { alert(objetJson); } });

33 paramètres de $.ajax $.ajax({ url: –-------- , data: –-------- ,
dataType: – , type: – , success: function(valeur) { } }); Nom du script devant traiter la requête Données à envoyer au serveur sous forme urlEncoded Type de données attendu en provenance du serveur (xml, json, script, html ou text) Méthode employée pour envoyer les données (GET ou POST) Actions à effectué en cas de réponse du serveur.

34 Les 4 scenarii possibles
Exemple11 ExempleN1 Exemple1N ExempleNN

35 Conclusion html, javascript, php, json firebug est INDISPENSABLE !
Simple, si vous savez ce que vous devez envoyer et recevoir.