Faire une requête AJAX en Javascript pur

Contenu

Qu’est-ce qu’une requête AJAX?

On dit que les pages web sont statiques, dans le sens qu’une fois affichée (on dit rendue), plus rien ne se passe. Et que si on veut modifier l’affichage de la page web, on est obligé de recharger la page web.

Par exemple, une page qui présente un tableau avec une liste de produits avec une filtre par prix croissant ou décroissant, si on veut choisir un affichage décroissant, il faut cliquer sur un lien (une action) pour que la page se recharge et affiche  les produits avec un ordre décroissant. Le mot clé ici est rechargement de la page. Pour passer d’un état d’affichage à un autre, il faut recharger la page.

Le Javascript permet d’avoir des pages dynamiques sans rechargement

Quand le Javascript a été inventé, c’était en effet pour faire des pages dynamiques, cela permettait d’avoir une interactivité avec des éléments de la page, mais le contenu texte de données d’origine lui ne changeait pas.

Par exemple, reprenons notre liste de produits, si initialement on a demandé l’affichage de produit d’une catégorie donnée, et qu’on veut changer filtrer les produits de cette catégorie, par exemple masquer les produits dont le prix est supérieur à 100€, on pouvait appuyer sur un bouton et faire ce filtrage sans recharge la page, on a fait simplement une routine Javascript pour masquer les produits dont le prix est supérieur à 100€. Pour autant on n’a pas éliminé les produits de la page, on les a simplement masqué , via une astuce CSS ou JS.

L’état de la page (en anglais on dit State) est inchangé du point de vue des données.

Si on change de catégorie, on sera obligé de recharger la page.

Et si on veut changer de catégorie sans recharger la page?

C’est là qu’intervient la notion d’AJAX (requête Asynchrone). L’astuce est de ne pas recharger entièrement la page mais de recharger une partie de la page. Ici on va recharger la portion de la page qui affiche les produits. Concrètement un clic sur une autre catégorie va déclencher une action Javascript qui va faire un appel AJAX vers le serveur , qui en retour va envoyer les données des nouveaux produits. Ensuite la prise en charge continue en remplaçant toujours via du code Javascript, la liste des anciens produits par les nouveaux.

Utiliser l’objet xhr pour faire une requête AJAX

Requête GET

function ajax(){
  var url = 'https://jsonplaceholder.typicode.com/posts/1';
  var xhr = new XMLHttpRequest();
  xhr.open('GET', url);

  xhr.onload = function () {
    const json = JSON.parse(this.responseText) 
    console.log(json)
  };

  xhr.onerror = function () {
    done(xhr.response);
  };
   xhr.send(null);
}

Le site qui sert une API REST (Json Placeholder) est un site très utile pour tester votre code qui fait des appels AJAX, ça vous évite d’en créer un.  On remarquera que pour faire une requéte GET, pas besoin d’envoyer de paramètre d’où null passé en paramètre de la méthode send();

 

Requête POST

function setId(id){
  var url = 'ajax.php';
  var params = "method=cart&id=" + id;

  var xhr = new XMLHttpRequest();
  xhr.open('POST', url);
  xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');

  xhr.onload = function () {
    const d = document.getElementById('screen')
    const json = JSON.parse(this.responseText) 
    console.log(json)
    d.innerHTML = json[0].id_producto

  };
  xhr.onerror = function () {
    done(xhr.response);
  };
   xhr.send(params);
}

Fetch la nouvelle API pour faire des requêtes asynchrones

Depuis quelques années un nouvelle façon de faire des appels asynchrones en n’utilisant pas l’objet xhr est disponible. Selon la documentation de Mozilla, cette API est facilement utilisée par le Service Worker, d’où la raison de son existence sans doute.

La différence est que fetch retourne une promesse alors que xhr retourne des données.

Retour en haut