AJAX - Envoyer une requête à un serveur
L'objet XMLHttpRequest est utilisé pour échanger des données avec un serveur.
Envoyer une requête à un serveur
Pour envoyer une requête à un serveur, nous utilisons les méthodes open() et send() de l'objet XMLHttpRequest :
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();
| Method | Description |
|---|---|
| open(method, url, async) | Specifies the type of request method: the type of request: GET or POST url: the server (file) location async: true (asynchronous) or false (synchronous) |
| send() | Sends the request to the server (used for GET) |
| send(string) | Sends the request to the server (used for POST) |
OBTENIR ou POSTER ?
GET est plus simple et plus rapide que POST et peut être utilisé dans la plupart des cas.
Cependant, utilisez toujours les requêtes POST lorsque :
- Un fichier en cache n'est pas une option (mettre à jour un fichier ou une base de données sur le serveur).
- Envoi d'une grande quantité de données au serveur (POST n'a pas de limitation de taille).
- En envoyant des entrées utilisateur (qui peuvent contenir des caractères inconnus), POST est plus robuste et sécurisé que GET.
Requêtes GET
Une simple requête GET :
Exemple
xhttp.open("GET", "demo_get.asp", true);
xhttp.send();
Dans l'exemple ci-dessus, vous pouvez obtenir un résultat mis en cache. Pour éviter cela, ajoutez un identifiant unique à l'URL :
Exemple
xhttp.open("GET", "demo_get.asp?t=" + Math.random(), true);
xhttp.send();
Si vous souhaitez envoyer des informations avec la méthode GET, ajoutez les informations à l'URL :
Exemple
xhttp.open("GET", "demo_get2.asp?fname=Henry&lname=Ford", true);
xhttp.send();
Demandes POST
Une simple requête POST :
Exemple
xhttp.open("POST", "demo_post.asp", true);
xhttp.send();
Pour POSTer des données comme un formulaire HTML, ajoutez un en-tête HTTP avec setRequestHeader(). Spécifiez les données que vous souhaitez envoyer dans la méthode send() :
Exemple
xhttp.open("POST", "demo_post2.asp", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("fname=Henry&lname=Ford");
| Method | Description |
|---|---|
| setRequestHeader(header, value) | Adds HTTP headers to the request header: specifies the header name value: specifies the header value |
L'url - Un fichier sur un serveur
Le paramètre url de la méthode open() est une adresse vers un fichier sur un serveur :
xhttp.open("GET", "ajax_test.asp", true);
Le fichier peut être n'importe quel type de fichier, comme .txt et .xml, ou des fichiers de script de serveur comme .asp et .php (qui peuvent effectuer des actions sur le serveur avant de renvoyer la réponse).
Asynchrone - Vrai ou Faux ?
Les requêtes du serveur doivent être envoyées de manière asynchrone.
Le paramètre async de la méthode open() doit être défini sur true :
xhttp.open("GET", "ajax_test.asp", true);
En envoyant de manière asynchrone, le JavaScript n'a pas à attendre la réponse du serveur, mais peut à la place :
- exécuter d'autres scripts en attendant la réponse du serveur
- traiter la réponse une fois que la réponse est prête
La propriété onreadystatechange
Avec l'objet XMLHttpRequest, vous pouvez définir une fonction à exécuter lorsque la requête reçoit une réponse.
La fonction est définie dans la propriété onreadystatechange de l'objet XMLHttpResponse :
Exemple
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML = this.responseText;
}
};
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();
Le fichier "ajax_info.txt" utilisé dans l'exemple ci-dessus est un simple fichier texte et ressemble à ceci :
<h1>AJAX</h1>
<p>AJAX is not a programming language.</p>
<p>AJAX is a
technique for accessing web servers from a web page.</p>
<p>AJAX stands for
Asynchronous JavaScript And XML.</p>
Vous en apprendrez plus sur onreadystatechange dans un chapitre ultérieur.
Requête synchrone
Pour exécuter une requête synchrone, modifiez le troisième paramètre de la méthode open() sur false :
xhttp.open("GET", "ajax_info.txt", false);
Parfois async = false sont utilisés pour des tests rapides. Vous trouverez également des requêtes synchrones dans l'ancien code JavaScript.
Étant donné que le code attendra la fin du serveur, il n'est pas nécessaire d'utiliser une fonction onreadystatechange :
Exemple
xhttp.open("GET", "ajax_info.txt", false);
xhttp.send();
document.getElementById("demo").innerHTML = xhttp.responseText;
XMLHttpRequest synchrone (async = false) n'est pas recommandé car le JavaScript s'arrêtera de s'exécuter jusqu'à ce que la réponse du serveur soit prête. Si le serveur est occupé ou lent, l'application se bloque ou s'arrête.
XMLHttpRequest synchrone est en train d'être supprimé de la norme Web, mais ce processus peut prendre de nombreuses années.
Les outils de développement modernes sont encouragés à avertir de l'utilisation de requêtes synchrones et peuvent générer une exception InvalidAccessError lorsqu'elle se produit.