AJAXRequête Ajax
Lancer une requête Ajax
Il s'agit maintenant de lancer effectivement la requête. Il faut pour cela appeler les méthodes open() et send() de la classe de requête HTTP, comme ceci :
Lancer la requête HTTP
xhr.open('GET', 'http://www.easy-micro.org/data.php', true);
xhr.send();
xhr.open('GET', 'http://www.easy-micro.org/data.php', true);
xhr.send();
◊ La méthode
open("method", "URL"[, asyncFlag[, "userName"[, "password"]]])
Pépare une requête en indiquant la méthode, l'URL, la drapeau de synchronisation, le nom d'utilisateur et le mot de passe.
◊ La méthode send(contenu)
Effectue la requête, éventuellement en envoyant les données.
Le troisième paramètre de la méthode open() ci-dessus, précise si la requête est asynchrone. A TRUE, l'exécution de la fonction JavaScript se poursuivra en attendant l'arrivée de la réponse du serveur. C'est le A d'AJAX.
Le paramètre de la méthode send() peut être n'importe quelle donnée que vous voulez envoyer au serveur en cas d'utilisation de la méthode POST. Les données doivent être sous la forme d'une chaîne de requête, comme: nom=valeur&autrenom=autrevaleur&ainsi=desuite
Notez que si vous voulez envoyer des données avec la méthode POST, vous devrez changer le type MIME de la requête à l'aide de la ligne suivante : xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); Autrement, le serveur ignorera les données envoyées.
Exemple de requêtes courantes avec les méthodes HEAD, GET et POST
On considère qu'un gestionnaire d'événement (une fonction) a été assigné à la propriété onreadystatechange.
Une requête de type HEAD
/* Création de l'objet : */
var xhr = getHTTPObject();
/* Préparation d'une requête asynchrone de type HEAD : */
xhr.open("HEAD", "/test.html",true);
/* Effectue la requête : */
xhr.send(null);
/* Création de l'objet : */
var xhr = getHTTPObject();
/* Préparation d'une requête asynchrone de type HEAD : */
xhr.open("HEAD", "/test.html",true);
/* Effectue la requête : */
xhr.send(null);
Une requête de type GET
/* Création de l'objet : */
var xhr = getHTTPObject();
/* Préparation d'une requête asynchrone de type GET : */
xhr.open("GET", "/test.php?var1=valeur1&var2=valeur2",true);
/* Effectue la requête : */
xhr.send(null);
/* Création de l'objet : */
var xhr = getHTTPObject();
/* Préparation d'une requête asynchrone de type GET : */
xhr.open("GET", "/test.php?var1=valeur1&var2=valeur2",true);
/* Effectue la requête : */
xhr.send(null);
Une requête de type POST
/* Création de l'objet : */
var xhr = getHTTPObject();
/* Préparation d'une requête asynchrone de type POST : */
xhr.open("POST", "/test.php",true);
/* Effectue la requête en envoyant les données : */
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
xhr.send("var1=valeur1&var2=valeur2");
/* Création de l'objet : */
var xhr = getHTTPObject();
/* Préparation d'une requête asynchrone de type POST : */
xhr.open("POST", "/test.php",true);
/* Effectue la requête en envoyant les données : */
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
xhr.send("var1=valeur1&var2=valeur2");
