TD - JavaScript, AJAX
Cours

Exercice synchrone

Le squelette de l'application - (étape préliminaire pour aider ceux qui écrivent du JavaScript pour la première fois, les autres pouvant passer directement à la suite)

Réaliser une page HTML que vous mettrez dans votre répertoire public_html et que vous chargerez dans votre navigateur via le serveur Apache sur tuxa.sme.utc : http://tuxa.sme.utc/~sr03p0../xxxx.html. Cette page comportera :

  • un formulaire regroupant une balise <INPUT type="text" ..> pour saisir une chaine de caractères, ainsi qu'une balise <INPUT type="button" ..> pour déclencher une action

  • *une DIV pour l'affichage du HTML généré dynamiquement

  • *une fonction JavaScript displayData() (déclenchée par un clic du bouton), qui prendra en argument les deux objets correspondant respectivement à la zone de saisie et à la zone d'affichage, et qui affichera dans la zone d'affichage la chaîne 'Bonjour ' concaténée avec la chaîne de caractères saisie

La connexion (pour l'instant synchrone) avec studentdata.php

Ecrire une fonction JavaScript getListOfStudents() qui retourne un bloc XML obtenu du service studentdata.php grâce à une utilisation SYNCHRONE d'un objet de type XMLHttpRequest. getListOfStudents() prendra en argument la chaîne de caractères à passer à studentdata.php.

L'application synchrone

Réaliser une page HTML comportant

  • un formulaire et une DIV (voir 1.1 plus haut)

  • * une fonction JavaScript displayData() (déclenchée par un clic du bouton), qui prendra en argument les deux objets correspondant respectivement à la zone de saisie et à la zone d'affichage. Le HTML affiché dans la DIV sera le résultat d'une transformation du bloc XML retourné par getListOfStudents(). Pour parser le bloc XML nous vous proposons d'utiliser la méthode XML DOM getElementsByTagName. On trouve sur le web de nombreuses pages pédagogiques traitant de ces méthodes DOM, par exemple ici. Si vous préférez faire autrement pour extraire les éléments désirés du XML, n'hésitez pas.

2.1 Le passage vers l'asynchrone

Exercice asynchrone (page suivante)Introduction (page Précédente)
AccueilImprimerRéalisé avec SCENARI