pacs

pacs : Travaux Dirigés
6. Formulaires en AJAX
Le but de cette séance est d'utiliser les possibilités de requêtes HTTP
asynchrones permises par JavaScript et son objet XMLHttpRequest pour
améliore considérablement l'ergonomie des formulaires Web. On part d'une
solution à double script d'un problème de saisies de notes d'examen dont la
partie PHP va se retrouver fortement allégée, un fichier HTML initial ,
fourni en annexe, contenant dès le départ les deux formulaires, le deuxième
étant initialement caché grâce à la propriété display des CSS.
1 Première requête asynchrone La fonction JavaScript groupe_td10 est appelée lorsque l'utilisateur
introduit un numéro de groupe dans la balise de saisie du premier
formulaire de la page fournie en annexe. Elle reçoit en argument ce
formulaire sous sa forme abstraite, qui comporte toujours un champ
elements, tableau des balises de saisies, ici réduites à une seule, de nom
groupe. A l'aide d'une expression rationnelle, vérifier que la saisie
fournie est un nombre entier. Construire ensuite une URL demandant
l'exécution d'un script get_groupe.php avec une Query-String réduite au
paramètre groupe, de valeur la saisie fournie (ou 0 si elle était
incorrecte). La fonction de rappel à donner se nomme verifier_td10 et sera
définie à la question 5.
Si le numéro de groupe saisi est correct, s'affichera ultérieurement la
moyenne des notes du groupe. La présente fonction doit à l'inverse rendre
invisible la moyenne du groupe saisi précédemment, aussi la balise span
dans le premier formulaire doit avoir sa propriété CSS display à none juste
avant d'envoyer cette requête.
De même, le deuxième formulaire ne doit pas apparaître à ce stade. Là il ne
s'agit pas seulement de le rendre invisible, mais également de le vider de
son contenu puisque la liste des étudiants changera. Cette liste est
ébauchée dans le fichier HTML sous forme d'une balise ul. Repérer
l'attribut id de cette balise, et remettre son contenu à vide à l'aide la
méthode innerHTML.
Solution Télécharger groupe.js
function groupe_td10 (form) {
document.getElementById('u').innerHTML = '';
document.getElementById('moyenne').style.display = 'none';
var v = form.elements['groupe'].value;
// construire une Query-string SECURISEE (un nombre, rien d'autre)
if (!/^[0-9]+$/.test(v)) v = 0;
ajax('get_groupe.php?groupe=' + v, '', verifier_td10);
return false;
} 2 Réponse hors HTML Le script get_groupe.php est censé recevoir dans sa Query-String un
paramètre nommé groupe ayant pour valeur un entier. On suppose que ce
script représente la liste des groupes sous la forme d'un tableau PHP
indexé par les numéros des groupes, et dont les valeurs sont des sous-
tableaux formés des noms des étudiants.
Si le paramètre groupe est absent ou n'est pas un index du tableau, le
script renvoie le code de retour HTTP 204 No Content, à l'aide la fonction
header. Autrement, il renvoie un contenu de type text/plain, composé de la
suite des noms séparés par un ";" avec un ";" terminal.
Solution Télécharger get_groupe.php