XMLHttpRequest de AJAX

L'objet XMLHttpRequest est utilisé pour échanger des données avec le serveur.

Envoyer une requête au serveur

Pour envoyer une requête au serveur, nous utilisons l'objet XMLHttpRequest open() et send() Méthode :

xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();
Méthode Description
open(method, url, async)

Définir le type de requête

  • method：type de requête : GET ou POST
  • url：emplacement du serveur (fichier)
  • async：true（asynchrone）ou false（synchronisé）
send() Envoyer une requête au serveur (utilisé pour GET)
send(string) Envoyer une requête au serveur (utilisé pour POST)

GET ou POST ?

GET est plus simple et plus rapide que POST, et peut être utilisé dans la plupart des cas.

Cependant, utilisez toujours POST dans les situations suivantes :

  • Les fichiers en cache ne sont pas une option (mise à jour des fichiers ou de la base de données sur le serveur)
  • Envoyer une grande quantité de données au serveur (POST sans limite de taille)
  • Envoyer l'entrée de l'utilisateur (peut contenir des caractères inconnus), POST est plus puissant et plus sûr que GET

Requête GET

Une requête GET simple :

Exemple

xhttp.open("GET", "demo_get.asp", true);
xhttp.send();

Essayez-le vous-même

Dans l'exemple ci-dessus, vous pourriez obtenir un résultat en cache. Pour éviter cela, ajoutez un ID unique à l'URL :

Exemple

xhttp.open("GET", "demo_get.asp?t=" + Math.random(), true);
xhttp.send();

Essayez-le vous-même

Si vous devez envoyer des informations en utilisant la méthode GET, ajoutez ces informations à l'URL :

Exemple

xhttp.open("GET", "demo_get2.asp?fname=Bill&lname=Gates", true);
xhttp.send();

Essayez-le vous-même

Requête POST

Une requête POST simple :

Exemple

xhttp.open("POST", "demo_post.asp", true);
xhttp.send();

Essayez-le vous-même

Si vous souhaitez envoyer des données POST comme un formulaire HTML, utilisez setRequestHeader() Ajoutez un en-tête HTTP. Veuillez utiliser send() Le méthode stipule les données que vous devez envoyer :

Exemple

xhttp.open("POST", "ajax_test.asp", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("fname=Bill&lname=Gates");

Essayez-le vous-même

Méthode Description
setRequestHeader(header, value)

Ajouter un en-tête HTTP à la requête

  • header: définir le nom de l'en-tête
  • value: définir la valeur de l'en-tête

url - fichier sur le serveur

méthode open() url paramètre, c'est l'adresse du fichier sur le serveur :

xhttp.open("GET", "ajax_test.asp", true);

Ce fichier peut être de n'importe quel type, comme .txt et .xml, ou un fichier de script serveur, comme .asp et .php (ils peuvent exécuter des opérations sur le serveur avant d'envoyer la réponse).

Asynchrone - true ou false ?

Pour envoyer une requête de manière asynchrone,open() méthode async Le paramètre doit être réglé sur true:

xhttp.open("GET", "ajax_test.asp", true);

L'envoi de requêtes asynchrones représente une avancée significative pour les développeurs web. De nombreuses tâches exécutées sur le serveur sont très longues. Avant AJAX, cette opération pouvait entraîner le blocage ou l'arrêt de l'application.

En envoyant de manière asynchrone, JavaScript n'a pas besoin d'attendre la réponse du serveur, mais peut :

  • Exécuter d'autres scripts pendant l'attente de la réponse du serveur
  • Traiter la réponse lorsque la réponse est prête

Propriété onreadystatechange

Grâce à l'objet XMLHttpRequest, vous pouvez définir une fonction à exécuter lorsque la requête reçoit une réponse.

Cette fonction est définie sur l'objet XMLHttpResponse : onreadystatechange Défini dans les propriétés :

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

Essayez-le vous-même

Vous apprendrez plus sur onreadystatechange dans les chapitres suivants.

Requête synchronisée

Pour exécuter une requête synchronisée, veuillez mettre open() Le troisième paramètre de la méthode est réglé sur false:

xhttp.open("GET", "ajax_info.txt", false);

async = false est parfois utilisé pour des tests rapides. Vous verrez également des requêtes synchrones dans des codes JavaScript plus anciens.

Puisque le code attendra que le serveur soit terminé, la fonction onreadystatechange n'est pas nécessaire :

Exemple

xhttp.open("GET", "ajax_info.txt", false);
xhttp.send();
document.getElementById("demo").innerHTML = xhttp.responseText;

Essayez-le vous-même

Nous ne recommandons pas l'AJAX synchrone (async = false), car JavaScript s'arrêtera jusqu'à ce que la réponse du serveur soit prête. Si le serveur est occupé ou lent, l'application peut être bloquée ou arrêtée.

Les XMLHttpRequest synchrones sont en cours de suppression des normes Web, mais ce processus peut prendre de nombreuses années.

Il est encouragé que les outils de développement modernes avertissent de l'utilisation des requêtes synchrones, et une exception InvalidAccessError peut être lancée dans ce cas.