AJAX - Des clients légers interactifs
AJAX en pratique - Étape 2 : Gestion de la réponse du serveur
Gestion de l'événement onreadystatechange
A chaque fois que l'objet XMLHttpRequest reçoit une réponse, il va appeler le gestionnaire d'évenements que l'on a défini précédemment.
On peut alors, grâce à la variable readyState et status savoir si la réponse a fini d'être reçue, et si la réponse HTTP reçu est correcte (code 200).
Voici la manière d'implémenter la fonction de gestion d'événements :
function maFonctionAssociee {
if (http_request.readyState == 4) {
// tout va bien, la réponse a été reçue
if (http_request.status == 200) {
// parfait !
// code de traitement ici
} else {
// il y a eu un problème avec la requête,
// par exemple la réponse peut être un code
// 404 (Non trouvée)
// ou 500 (Erreur interne du serveur)
}
} else {
// pas encore prête
}
}
Traiter les données envoyées par le serveur
Comme je l'ai expliqué précédemment, le serveur répond en XML. Il peut également répondre en format texte. Suivant la méthode choisie, deux variables différentes peuvent être appelées :
http_request.responseTextpour les réponse au format texte,http_request.responseXMLpour obtenir un objet JavaScript de type XMLDocument.
Mise à jour de la page grâce à DOM
Il s'agit maintenant de traiter ces données. On utilise pour cela généralement, les fonctionnalités de parcourt et de mise à jour proposée en JavaScript par DOM.
Supposons que nous recevions cette réponse XML du serveur :
<?xml version="1.0">
<person>
<firstName>Toto</firstName>
<lastName>Dupond</lastName>
</person>
Je vais extraire le nom (firstName) et le prénom (lastName) de cette réponse, et mettre à jour les champs de texte qui possèdent le même nom.
var xmlDocument = http_request.responseXML;
var firstName = xmlDocument.getElementsByTagName('firstName')
.item(0).firstChild.data;
var lastName = xmlDocument.getElementsByTagName('lastName')
.item(0).firstChild.data;
document.getElementById('firstNameField').value = firstName;
document.getElementById('lastNameField').value = lastName;
Last modified : 15/03/2006