Table of Contents
Première requête AJAX avec XMLHTTPRequest et JSON
JSON
XMLHTTPRequest
TP3
Première requête AJAX avec XMLHTTPRequest et JSON
JSON
On peut d'abord se souvenir comment créer un objet en JavaScript :
http://www.w3schools.com/js/js_objects.asp
Analysez l'exemple :
http://ogo.heig-vd.ch/ajax/Exemples/JSONcodec.html
XMLHTTPRequest
Quelques liens pour renforcer la théorie :
http://www.xul.fr/xml-ajax.html
http://www.toutjavascript.com/savoir/xmlhttprequest.php3
Première requête AJAX avec l'objet XMLHTTPRequest en reprenant la solution du TP2
On souhaite appliquer le modèle d'application AJAX
Quelques suggestions :
remplacer le comportement par défaut de soumission de formulaire par un événement onclick
construire l'
URL
cible en composant notamment la query string (cf.
http://www.w3schools.com/jsref/dom_obj_form.asp
)
créer une instance XMLHttpRequest et préparer la fonction “callback” qui traite la réponse
la réponse sera simplement injectée dans un élément <div> de l'IHM
Le corrigé :
avec fonction anonyme :
http://ogo.heig-vd.ch/ajax/TP2_form/index_xhr.html
sans fonction anonyme :
http://ogo.heig-vd.ch/ajax/TP2_form/index_xhr_2.html
Notez bien l'utilisation du
this
pour se référer au contexte d'exécution du
callback
(ici l'objet XHR)
TP3
En partant du début d'application web suivante
tp3_xhr.zip
on dispose d'une partie cliente XHTML qui pose le décor (l'IHM) avec deux listes de sélection
en fonction de la première (l'utilisateur sélectionne une famille), il s'agit d'alimenter la seconde (les espèces de la famille choisie)
à chaque nouveau choix de famille, les espèces sont obtenues par dialogue avec le serveur au travers du service fourni getSpecies.php (cf. son entête)
On souhaite donc obtenir le résultat “sauce AJAX” comme présenté ici (cf. démo)
Plus de suggestions cette fois-ci !
sauf une référence
http://www.w3schools.com/jsref/dom_obj_select.asp
Le corrigé :
http://ogo.heig-vd.ch/ajax/TP3_xhr/index.html