Exemple function go(){ var xhr = getXhr() // On définit ce qu'on va faire quand on aura la réponse xhr.onreadystatechange = function(){ // On ne fait quelque chose que si on a tout reçu et que le serveur est ok if(xhr.readyState == 4 && xhr.status == 200){ alert(xhr.responseText); // traitement } } xhr.open("GET","ajax.php",true); xhr.send(null); } On crée un objet xhr. On définit la fonction à exécuter : Si l'état est "prêt" et si la réponse est OK alors, on peut exécuter le traitement... Lorsque les méthodes et propriétés sont renseignées, on établit la connexion (open) et on envoie la requête (send)
Propriété ou méthode | Description des paramètres |
---|---|
open("méthode","url",flag) |
Ouvre la connexion avec le serveur. méthode -> "GET" ou "POST" url -> l'url à laquelle on va envoyer notre requête. Si la méthode est GET, on met les paramètres dans l'url, sous la forme url?nom1=valeur 1&nom2=valeur 2 flag -> true si l'on veut un dialogue asynchrone, sinon, false |
setRequestHeader("nom","valeur") |
Assigne une valeur à un header HTTP qui sera envoyé lors de la
requête. Obligatoire pour utiliser la méthode POST : nom -> "Content-Type" valeur -> "application/x-www-form-urlencoded" |
send("params") |
Envoie la requête au serveur. Si la méthode est GET, on met null en paramètre. Si la méthode est POST, on met les paramètres a envoyer, sous la forme : "nomparam1=valeurparam1&nomparam2=valeurparam2". |
abort() | Abandonne la requête. |
onreadystatechange |
Ici, on va désigner la fonction qui sera exécutée à chaque "changement d'état" de notre objet. Notez bien la casse : il n'y a pas de majuscules |
readyState |
C'est cette propriété qu'on va tester dans le
onreadystatechange.
Attention au S majuscule |
status |
Le code de la réponse du serveur. 200 -> OK. 404 -> Page non trouvée. ... |
statusText | Le message associé à status. |
responseText | La réponse retournée par le serveur, au format texte. |
responseXML | La réponse retournée par le serveur, au format DOM XML. |