Asynchronous Javascript And Xml

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

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

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

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.

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 [ { "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

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

Ajax/json/Jquery/PHP afficherDepartement.html

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

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

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

Les scénarii possibles 172.18.58.14/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 172.18.58.15/~dbernard/exempleDeBaseAjaxSnir1_2016/ExemplesAjaxSnir https://www.amazon.fr/s/ref=sr_nr_n_1?rh=n%3A430351031%2Ck%3Aram&keywords=ram&ie=UTF8&qid=1410258132&rnid=1703605031 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

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