AJAX - XMLHttpRequest
L'objet XMLHttpRequest est utilisé pour demander des données à un serveur.
Envoyer une requête à un serveur
Pour envoyer une requête à un serveur, on utilise les méthodes open() et send() de l' XMLHttpRequestobjet :
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) |
L'url - Un fichier sur un serveur
Le paramètre url de la open()méthode 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 valeur par défaut du paramètre async est async = true.
Vous pouvez supprimer en toute sécurité le troisième paramètre de votre code.
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.
OBTENIR ou POSTER ?
GETest 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 GETdemande :
Exemple
xhttp.open("GET", "demo_get.asp");
xhttp.send();
Dans l'exemple ci-dessus, vous pouvez obtenir un résultat mis en cache. Pour éviter cela, ajoutez un ID unique à l'URL :
Exemple
xhttp.open("GET", "demo_get.asp?t=" + Math.random());
xhttp.send();
Si vous souhaitez envoyer des informations avec la GETméthode, ajoutez les informations à l'URL :
Exemple
xhttp.open("GET", "demo_get2.asp?fname=Henry&lname=Ford");
xhttp.send();
La manière dont le serveur utilise l'entrée et la manière dont le serveur répond à une requête est expliquée dans un chapitre ultérieur.
Demandes POST
Une simple POSTdemande :
Exemple
xhttp.open("POST", "demo_post.asp");
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 send()méthode :
Exemple
xhttp.open("POST", "ajax_test.asp");
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 |
Requête synchrone
Pour exécuter une requête synchrone, changez le troisième paramètre de la open()méthode en 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, aucune onreadystatechange
fonction n'est nécessaire :
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.
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.