28. Requêtes Ajax et HTTP avec Javascript

Ajax, qui signifie Asynchronous JavaScript and XML, est une technique de développement Web qui permet à une page Web de mettre à jour des parties de son contenu sans avoir à recharger la page entière. Ceci est réalisé en envoyant des requêtes HTTP avec Javascript au serveur et en traitant la réponse. Ce chapitre approfondira les requêtes HTTP avec Javascript à l'aide d'Ajax.

Pour commencer, une requête HTTP est une requête visant une ressource spécifique (telle qu'une page Web, un fichier image, etc.) sur un serveur Web. La requête est envoyée par le navigateur du client au serveur, qui traite ensuite la requête et renvoie la réponse au client. C'est ce qu'on appelle le cycle demande-réponse.

En Javascript, nous pouvons créer et envoyer des requêtes HTTP à l'aide de l'objet XMLHttpRequest. Cet objet nous fournit des méthodes et des propriétés que nous pouvons utiliser pour envoyer et recevoir des données du serveur. Voici un exemple simple de création d'une requête HTTP avec Javascript :

var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data', true);
xhr.send();

Dans l'exemple ci-dessus, nous créons d'abord une nouvelle instance de l'objet XMLHttpRequest. Nous utilisons ensuite la méthode open() pour configurer la requête. Le premier argument est la méthode HTTP que nous voulons utiliser (dans ce cas, GET), et le deuxième argument est l'URL à laquelle nous voulons envoyer la requête. Le troisième argument est une valeur booléenne qui indique si la requête doit être asynchrone ou non (dans ce cas, true pour asynchrone).

Après avoir configuré la requête, nous utilisons la méthode send() pour l'envoyer au serveur. Si la requête est asynchrone, la méthode send() renvoie immédiatement et l'exécution du script continue. Si la requête est synchrone, la méthode send() ne reviendra pas tant que la réponse n'aura pas été reçue du serveur.

Nous pouvons utiliser l'événement 'readystatechange' pour écouter les changements dans l'état de la requête. Lorsque l'état change, la fonction de rappel que nous avons fournie sera appelée. Nous pouvons ensuite vérifier l'état de la demande et traiter la réponse si la demande aboutit. Voici un exemple de la façon de procéder :

xhr.onreadystatechange = fonction() {
  if (this.readyState == 4 && this.status == 200) {
    console.log(this.responseText);
  }
} ;

Dans l'exemple ci-dessus, la fonction de rappel vérifie si le statut de la requête est 4 (ce qui signifie que la requête a été terminée) et si le statut HTTP est 200 (ce qui signifie que la requête a réussi). Si les deux conditions sont vraies, la réponse du serveur (qui est une chaîne de texte) est enregistrée dans la console.

Ajax est une technique puissante qui vous permet de créer des pages Web plus interactives et réactives. En utilisant des requêtes HTTP asynchrones avec Javascript, nous pouvons mettre à jour des parties d'une page Web sans avoir à recharger la page entière. Cela offre une expérience utilisateur plus fluide et plus efficace.

En résumé, les requêtes AJAX et HTTP avec JavaScript sont fondamentales pour créer des applications Web modernes et interactives. Grâce à l'utilisation de l'objet XMLHttpRequest, nous pouvons envoyer et recevoir des données du serveur de manière asynchrone, permettant des mises à jour dynamiques de la page sans avoir besoin de recharger la page entière. Cela conduit à une expérience utilisateur bien meilleure et plus fluide.

Page suivante de lebook gratuit :

79Introduction à React.js

0 minutes