AJAX XMLHttpRequête


Table des matières

    Afficher la table des matières


L'objet XMLHttpRequest est utilisé pour demander des données à un serveur.


Envoyer une demande à 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();
open(method, url, async)

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)

send()

Envoie la requête au serveur (utilisé pour GET)

send(string)

Envoie la requête au serveur (utilisé pour le POST)


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 serveur comme .asp et .php (qui peuvent effectuer 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 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.


Requête 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.


OBTENIR Requêtes

Une simple requête GET :

Exemple

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 :

Exemple

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 :

Exemple

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.



Requêtes POST

Une simple requête POST :

Exemple

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() :

Exemple

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>
setRequestHeader(header, value)

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


Demande synchrone

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:

Exemple

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.