Technique XMLHTTPRequest

Les premières techniques existent depuis longtemps avec celle de Script Loading la plus largement utilisée. Mais le Web 2.0 sous sa forme “web applicatif” a véritablement pu décoller grâce à la standardisation de l'objet XMLHTTPRequest (voir Intro, slides 9-11, et https://developer.mozilla.org/fr/docs/XMLHttpRequest).

C'est un outil qui est dédié au déclenchement d'une requête en arrière-plan et qui permet de contrôlé directement le dialogue client/serveur.

• Part1/xhr1.html : fonctionnement (new XMLHttpRequest, xhr.open/send/onreadystatechange/readyState/status, …). Le résultat est contenu dans this.responseText (ici du HTML prêt à coller)
• Part1/xhr2.html : avec envoi d'un paramètre et réponse en notation JSON (usage de JSON.parse)
• Part1/xhr3.html : utilisation de this.responseXML avec un header text/xml et encodage en XML côté serveur). Le résultat this.responseXML est directement obtenu sous la forme d'un arbre XML (DOM Document) et donc pas besoin de le décoder “à la main”.

• Exercices : refaire les exercices TraceIt, Amis, CodePostal avec la technique XMLHTTPRequest
  • Corrigé TraceIt : http://ogo.heig-vd.ch/ajaxrad/Ex1/trace/traceit_xhr.html
  • Corrigé Amis : amis_xhr.zip, http://ogo.heig-vd.ch/ajaxrad/Ex1/amis/amis_xhr.html
  • Corrigé CodePostal : http://ogo.heig-vd.ch/ajaxrad/Ex1/codepostal/codepostal_xhr.html

• Exercice Animaux (animaux_0.html, familles.xml) : alimenter une liste (d'espèces d'animaux) selon l'élément sélectionné d'une autre liste (de familles d'animaux)
  • Suggestion : pour créer le service d'extraction des espèces, utilisez la méthode DOMXpath->query de PHP
  • Suggestion : la méthode DOMDocument->importNode peut aussi servir.

Conclusions : c'est la technique la plus souple et complète (GET, POST, contrôle d'erreurs, …). Elle a été créée comme technique dédiée au concept de programmation web AJAX.