L'objet XMLHttpRequest est utilisé pour demander des données à 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();
Spécifie le type de demande
méthode : le type de requête : GET ou POST
url : l'emplacement du serveur (fichier)
async : vrai (asynchrone) ou faux (synchrone)
Envoie la requête au serveur (utilisé pour GET)
Envoie la requête au serveur (utilisé pour le POST)
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 serveur comme .asp et .php (qui peuvent effectuer actions sur le serveur avant de renvoyer la réponse).
Les requêtes du serveur doivent être envoyées de manière asynchrone.
Le paramètre async de open() la méthode doit être définie sur true :
xhttp.open("GET", "ajax_test.asp", true);
En envoyant de manière asynchrone, le JavaScript n'a pas besoin d'attendre la réponse du serveur, mais peut :
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.
Le XMLHttpRequest synchrone (async=false) n'est pas recommandé car le JavaScript arrêtez l'exécution jusqu'à ce que la réponse du serveur soit prête. Si le serveur est occupé ou lent, le l'application se bloquera ou s'arrêtera.
GET
ou requête POST
?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 mis 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 aucune limitation de taille).
En envoyant une entrée utilisateur (qui peut contenir des caractères inconnus), POST est plus robuste et sécurisé que GET.
Une simple requête GET
:
xhttp.open("GET", "demo_get.asp");
xhttp.send();
Essayez-le vous-même →
<!DOCTYPE html>
<html>
<body>
<h2>The XMLHttpRequest Object</h2>
<button type="button" onclick="loadDoc()">Request data</button>
<p id="demo"></p>
<script>
function loadDoc() {
const xhttp = new XMLHttpRequest();
xhttp.onload = function() {
document.getElementById("demo").innerHTML = this.responseText;
}
xhttp.open("GET", "demo_get.asp");
xhttp.send();
}
</script>
</body>
</html>
Dans l'exemple ci-dessus, vous pouvez obtenir un résultat mis en cache. Pour éviter cela, ajoutez un identifiant unique à l'URL :
xhttp.open("GET", "demo_get.asp?t=" + Math.random());
xhttp.send();
Essayez-le vous-même →
<!DOCTYPE html>
<html>
<body>
<h2>The XMLHttpRequest Object</h2>
<button type="button" onclick="loadDoc()">Request data</button>
<p id="demo"></p>
<script>
function loadDoc() {
const xhttp = new XMLHttpRequest();
xhttp.onload = function() {
document.getElementById("demo").innerHTML = this.responseText;
}
xhttp.open("GET", "demo_get.asp?t=" + Math.random());
xhttp.send();
}
</script>
</body>
</html>
Si vous souhaitez envoyer des informations avec la méthode GET
, ajoutez les informations à l'URL :
xhttp.open("GET", "demo_get2.asp?fname=Henry&lname=Ford");
xhttp.send();
Essayez-le vous-même →
<!DOCTYPE html>
<html>
<body>
<h2>The XMLHttpRequest Object</h2>
<button type="button" onclick="loadDoc()">Request data</button>
<p id="demo"></p>
<script>
function loadDoc() {
const xhttp = new XMLHttpRequest();
xhttp.onload = function() {
document.getElementById("demo").innerHTML = this.responseText;
}
xhttp.open("GET", "demo_get2.asp?fname=Henry&lname=Ford");
xhttp.send();
}
</script>
</body>
</html>
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.
Une simple requête POST
:
xhttp.open("POST", "demo_post.asp");
xhttp.send();
Essayez-le vous-même →
<!DOCTYPE html>
<html>
<body>
<h2>The XMLHttpRequest Object</h2>
<button type="button" onclick="loadDoc()">Request data</button>
<p id="demo"></p>
<script>
function loadDoc() {
const xhttp = new XMLHttpRequest();
xhttp.onload = function() {
document.getElementById("demo").innerHTML = this.responseText;
}
xhttp.open("POST", "demo_post.asp");
xhttp.send();
}
</script>
</body>
</html>
Pour POST 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()
:
xhttp.open("POST", "ajax_test.asp");
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("fname=Henry&lname=Ford");
Essayez-le vous-même →
<!DOCTYPE html>
<html>
<body>
<h2>The XMLHttpRequest Object</h2>
<button type="button" onclick="loadDoc()">Request data</button>
<p id="demo"></p>
<script>
function loadDoc() {
const xhttp = new XMLHttpRequest();
xhttp.onload = function() {
document.getElementById("demo").innerHTML = this.responseText;
}
xhttp.open("POST", "demo_post2.asp");
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("fname=Henry&lname=Ford");
}
</script>
</body>
</html>
Ajoute des en-têtes HTTP à la requête
header : spécifie le nom de l'en-tête
value : spécifie la valeur de l'en-tête
Pour exécuter une requête synchrone, remplacez le troisième paramètre de la méthode open()
par false
:
xhttp.open("GET", "ajax_info.txt", false);
Parfois, async=false est utilisé pour des tests rapides. Vous trouverez également requêtes synchrones dans l’ancien code JavaScript.
Puisque le code attendra la fin du serveur, il n'est pas nécessaire d'effectuer un onreadystatechange
fonction:
xhttp.open("GET", "ajax_info.txt", false);
xhttp.send();
document.getElementById("demo").innerHTML = xhttp.responseText;
Essayez-le vous-même →
<!DOCTYPE html>
<html>
<body>
<h2>The XMLHttpRequest Object</h2>
<p id="demo">Let AJAX change this text.</p>
<button type="button" onclick="loadDoc()">Change Content</button>
<script>
function loadDoc() {
var xhttp = new XMLHttpRequest();
xhttp.open("GET", "ajax_info.txt", false);
xhttp.send();
document.getElementById("demo").innerHTML = xhttp.responseText;
}
</script>
</body>
</html>
Le XMLHttpRequest synchrone (async=false) n'est pas recommandé car le JavaScript arrêtez l'exécution jusqu'à ce que la réponse du serveur soit prête. Si le serveur est occupé ou lent, le l'application se bloquera ou s'arrêtera.
Les outils de développement modernes sont encouragés à avertir de l'utilisation requêtes synchrones et peut lever une exception InvalidAccessError lorsqu'elle se produit.