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 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 html+css js ajax Evènement Envois de données URLEncoded
Requête SQL Réception et traitement

7 Principe html+css js ajax
Mise a jour d'un ou plusieurs élément de la page (mais pas rechargement de la page) js ajax Resultat requête Résultats mis en forme Réception et traitement

8 Ajax avec JQuery Jquery propose un objet ajax auquel il suffit de passer les différents paramètres nécessaires pour effectuer une requête ajax. $.ajax

9 paramètres de $.ajax $.ajax({ url: ... , data: ... , dataType: ... ,
success: function(donnees,status,xhr) { ... }, error: function(xhr,status,error) { } }); 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 à effectuer en cas de réponse positive du serveur. Actions à effectuer en cas de réponse négative du serveur.

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

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

12 Json [ { "nom":"bidochon", "prenom":"robert",
"adresse":"SAINT-DIDIER-SUR-CHALARONNE" }, "nom":"galopin", "prenom":"raymonde", "adresse":"LEAZ" } ] Tableau JSON contenant 2 éléments chaque élément étant constitué de 3 champs

13 Ajax/json/Jquery/PHP
Nom du département en fonction de son code afficherDepartement.html gestionFormulaireDept.js getNomDept.php fonctions.inc

14 Ajax/json/Jquery/PHP
afficherDepartement.html

15 Ajax/json/Jquery/PHP
gestionFormulaireDept.js Permet d'urlEncoder le champ ayant l'id nroDept

16 Ajax/json/Jquery/PHP
gestionFormulaireDept.js Script js faisant la même chose, mais avec la méthode getJSON

17 Ajax/json/Jquery/PHP
getNomDept.php fonctions.inc Encodage du résultat au format json et envois de ce dernier

18 Les scénarii possibles
/ExemplesAjaxSnir Afficher l'adresse d'une personne présente dans une liste déroulante 1 donnée Client Serveur 1 donnée Tester la validité d'un couple login/mot de passe n données Client Serveur 1 donnée 0 donnée Afficher une liste déroulante Client Serveur n données /~dbernard/exempleDeBaseAjaxSnir1_2016/ExemplesAjaxSnir 1 donnée Client Serveur Mettre à jour une liste déroulante en fonction d'une sélection n données n donnée Client Serveur n données

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