par
Ryle » 13 sept. 2007, 11:21
Ajax, c'est pas compliqué, c'est un objet (XMLHttpRequest) et deux fonctions pour envoyer et recevoir des données, on en a vite fait le tour
La classe
XMLHttpRequest permet d'interagir avec le serveur grâce à ses méthodes et ses attributs. La première chose à faire est donc de l'instancier, sachant que cela ne se fait pas de la même façon entre IE et FF :
if (window.XMLHttpRequest) { // On test si l'objet existe
xhr = new XMLHttpRequest(); // Firefox, Safari, ...
}
else if (window.ActiveXObject) { // Version ActiveX
xhr = new ActiveXObject("Microsoft.XMLHTTP"); // Internet Explorer
}
Etape suivante, envoyer des données au serveur. Pour cela on utilise deux méthodes de XMLHttpRequest :
-
open() : qui permet de spécifier si les données seront envoyées en GET ou POST, à quelle URL elle seront envoyée, et si le traitement est asynchrone.
-
send() : lorsque tu utilises la méthode POST, tu lui spécifies les données à envoyer (param1=valeur1¶m2=valeur2&...). Avec la méthode GET, elles sont à spécifier directement dans l'url, on envoi donc la valeur null
xhr.open('GET', 'http://www.phpfrance.com/fichier.php', true);
xhr.send(null);
Nota : pour envoyer des données en post, il faut également spécifier le header suivant avant d'envoyer les données :
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
Enfin, attendre et traiter la réponse. Les données fournies par le serveur sont récupérées dans les champs
responseXml ou
responseText de l'objet XMLHttpRequest. S'il s'agit d'un fichier xml, il sera lisible dans responseXml par les méthodes de Dom.
Il faut attendre la disponibilité des données dont l'état est donné par l'attribut
readyState de XMLHttpRequest. L'attribut readyState va prendre plusieurs valeurs, seule la dernière est vraiment utile :
Code : Tout sélectionner
0 : non initialisé
1 : connexion établie
2 : requête reçue
3 : réponse en cours
4 : terminé
On va donc utiliser la propriété
onReadyStateChange qui est activée à chaque changement d'état. Pour cela on lui assigne une fonction pour traiter les données et on traite le cas où la réponse est bien arrivée :
xhr.onreadystatechange = function() { // traitement de la réponse
if (xhr.readyState == 4) { // la réponse a bien été renvoyée
if (xhr.status == 200) // on vérifie qu'il n'y a pas eu d'erreur
document.getElementById('monDiv').innerHTML = xhr.responseText; // met à jour un div par ex
else // si la page n'est pas trouvée (404), les droits sont insuffisants (501), ...
alert ("Erreur : " + xhr.status);
}
}
HTH
Ajax, c'est pas compliqué, c'est un objet (XMLHttpRequest) et deux fonctions pour envoyer et recevoir des données, on en a vite fait le tour :)
La classe [b]XMLHttpRequest[/b] permet d'interagir avec le serveur grâce à ses méthodes et ses attributs. La première chose à faire est donc de l'instancier, sachant que cela ne se fait pas de la même façon entre IE et FF :
[php]if (window.XMLHttpRequest) { // On test si l'objet existe
xhr = new XMLHttpRequest(); // Firefox, Safari, ...
}
else if (window.ActiveXObject) { // Version ActiveX
xhr = new ActiveXObject("Microsoft.XMLHTTP"); // Internet Explorer
}[/php]
Etape suivante, envoyer des données au serveur. Pour cela on utilise deux méthodes de XMLHttpRequest :
- [b]open()[/b] : qui permet de spécifier si les données seront envoyées en GET ou POST, à quelle URL elle seront envoyée, et si le traitement est asynchrone.
- [b]send()[/b] : lorsque tu utilises la méthode POST, tu lui spécifies les données à envoyer (param1=valeur1¶m2=valeur2&...). Avec la méthode GET, elles sont à spécifier directement dans l'url, on envoi donc la valeur null
[php]xhr.open('GET', 'http://www.phpfrance.com/fichier.php', true);
xhr.send(null);[/php]
Nota : pour envoyer des données en post, il faut également spécifier le header suivant avant d'envoyer les données :[php]xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); [/php]
Enfin, attendre et traiter la réponse. Les données fournies par le serveur sont récupérées dans les champs [b]responseXml[/b] ou [b]responseText[/b] de l'objet XMLHttpRequest. S'il s'agit d'un fichier xml, il sera lisible dans responseXml par les méthodes de Dom.
Il faut attendre la disponibilité des données dont l'état est donné par l'attribut [b]readyState[/b] de XMLHttpRequest. L'attribut readyState va prendre plusieurs valeurs, seule la dernière est vraiment utile :[code]0 : non initialisé
1 : connexion établie
2 : requête reçue
3 : réponse en cours
4 : terminé[/code]
On va donc utiliser la propriété [b]onReadyStateChange[/b] qui est activée à chaque changement d'état. Pour cela on lui assigne une fonction pour traiter les données et on traite le cas où la réponse est bien arrivée :
[php]xhr.onreadystatechange = function() { // traitement de la réponse
if (xhr.readyState == 4) { // la réponse a bien été renvoyée
if (xhr.status == 200) // on vérifie qu'il n'y a pas eu d'erreur
document.getElementById('monDiv').innerHTML = xhr.responseText; // met à jour un div par ex
else // si la page n'est pas trouvée (404), les droits sont insuffisants (501), ...
alert ("Erreur : " + xhr.status);
}
}[/php]
HTH :)
