Asynchronous Javascript And Xml

Slides:



Advertisements
Présentations similaires
Jérôme CUTRONA AJAX Jérôme CUTRONA 01:07:47 Programmation Web
Advertisements

AJAX et les langages serveurs
Introduction aux technologies AJAX Ajax François BONNEVILLE
Méthode de suppression des cadres entourant les animations flash et activation automatique de leur focus lors du chargement des pages dans Internet Explorer.
AJAX.
Introduction aux technologies AJAX Ajax François BONNEVILLE
PROGRAMMATION WEB FRONT-END.
Asynchronous JavaScript And XML AJAX C. Petitpierre
AJAX Jérôme CUTRONA 06:28:58 Programmation Web
Ajax1 A. Obaid - Programmation web (INF2005) AJAX.
Abes agence bibliographique de l’enseignement supérieur Comment adapter les “modéles de notices” à vos besoins ?
Commerce électronique Automne  Introduction  Création du panier d’achats  Migration du panier d’achats  Conclusion.
Système de gestion d'entrées pour un cinéma Scanvion Michel – Etudiant 4.
JAVASCRIPT AJAX LE WEB 2.0. Comment JavaScript se situe-t-il par rapport à html? ● 3 méthodes d'insertion du code JavaScript dans un document html : –
Introduction aux technologies du Web Mercredi 12 décembre 2007 Patrice Pillot
Le DOM Le Document Object Model (DOM) est une interface de programmation pour les documents HTML et XML Il fournit une représentation structurée du document.
Février 2006X. Belanger / Guilde Introduction à. Février 2006X. Belanger / Guilde Qu'est ce que Samba ? ● Implémentation libre du protocole CIFS/SMB (client.
Toulibre : présentation de... xhtml + css par Rémy Sanchez.
Cours de HTML suite 3. Sommaire...  Les formulaires. Les formulaires.  Structure basique du formulaire, balise. Structure basique du formulaire, balise.
Pour plus de modèles : Modèles Powerpoint PPT gratuitsModèles Powerpoint PPT gratuits Page 1 Free Powerpoint Templates Client service architecteur réseaux.
Le Langage JavaScript pour le web
Lire et manipuler du XML...
Ajouter le code dans une page html
I- ANALYSE DU BESOIN / Plan
Qu’est-ce un serveur de messagerie?
I- ANALYSE DU BESOIN / Plan
Les boites texte et dossier
Environnement de développement des BD
Comprendre l’environnement Web
Environnement du développement de BD ORACLE REPORTS 10g
PLAN DU MODULE (35 heures)
JQuery.
JavaScript.
5.
Implémentation de PayPal
Clients riches RIA (Rich Internet Application) / RDA
LE MASHUP.
420-B63 Programmation Web Avancée Auteur : Frédéric Thériault
Les technologies AJAX.
Asynchronous Javascript And Xml
fonctionnalités iiS iis
Asynchronous Javascript And Xml
5.
Wireshark Capture et analyse de trames IP
PROGRAMMATION INFORMATIQUE D’INGÉNIERIE II
AJAX et JQuery
Cours 8 : Les Web Services et XML-RPC Février Version 1.0 -
CSS et DREAMWEAVER (Suite et fin)  Les liens
Introduction à Internet
A. DAAIF ENSET Mohammedia Université Hassan II Casablanca.
Outils et principes de base. Exemple d’application  Gestion de données d’enquête : Interface de saisie en ligne  insère directement les données dans.
Les protocoles de la couche application Chapitre 7.
1 Copyright © 2004, Oracle. Tous droits réservés. Extraire des données à l'aide de l'instruction SQL SELECT.
Cours 10 : Les Web Services et WSDL Février Version 1.0 -
Catherine Cyrot - bibliothèques numériques - Cours 5
Programmation Web : Introduction à XML
Programmation Web : DOM en PHP
Atos, Atos et le poisson, Atos Origin et le poisson, Atos Consulting ainsi que le poisson seul sont des marques déposées d'Atos Origin SA. © 2006 Atos.
Structure de données utiles
Principes de programmation (suite)
STREAMS (et fichiers).
Projet de fin d’études : Université Cadi Ayyad Ecole Supérieure de Technologie-Safi Techniques Instrumentales et Management de la Qualité Sujet traité.
Definition de html sommaire. Présentation de html, css et javascript Module 1.
AJAX Par M.Youssfi.
Bases de données Singleton pour la connexion
Qu’est ce qu’une page web? Comment fonctionne un site web?
App Inventor trucs Afficher une image depuis le Web ou Google Drive.
Introduction aux technologies AJAX Ajax François BONNEVILLE
Site web, Ce qu’il faut savoir ?
Synchronized Multimedia Integration Language par Yves Bekkers
Transcription de la présentation:

Asynchronous Javascript And Xml

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

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.

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.

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.

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.

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é.

XMLHttpRequest

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.

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.

XMLHttpRequest

Exemple : index.html

Exemple : funcAjax.js

Exemple : funcAjax.js

Exemple : funcAjax.js

Exemple : donnees.txt

Exemple

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

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

Exemple

Exemple

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

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

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

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

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

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.

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

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>

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.

Ajax/json/Jquery/PHP

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); } });

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.

Les 4 scenarii possibles Exemple11 ExempleN1 Exemple1N ExempleNN

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