Exemples AJAX

ajax-get-html.js

// EXEMPLE AJAX AVEC HTML
// On passe comme argument à fetch l'URL d'une ressource
// (HTML ou JSON) à interroger
fetch("/ajax-content.html")
// la fonction passée dans le .then est appelée seulement quand on
// a reçu la réponse du serveur
.then(function(response) {
  // L'objet response contient la réponse du serveur
  // En appelant la méthode text on récupère le contenu
  // (texte brut) de la réponse
  return response.text();
})
.then(function(html) {
  // Ici, la variable html que reçoit la fonction contient le contenu
  // du fichier ajax-content.html
  // On insère son contenu dans la div qui a l'id example
  const div = document.getElementById("example");
  div1.innerHTML = html;
});

ajax-get-json.js

// EXEMPLE AJAX AVEC JSON
fetch("/ajax-content.json")
.then(function(response) {
  // ATTENTION, différence avec l'autre exemple : on appelle la méthode json
  // pour interpréter le contenu JSON et le transformer en données JavaScript,
  // qu'on va pouvoir manipuler dans notre programme
  return response.json();
})
.then(function(bands) {
  const ul = document.getElementById("example2");
  for (const b of bands) {
    const item = document.createElement('LI');
    item.innerText = b;
    ul.appendChild(item);
  }
});

exercice-pokemons.md

Exercice - Afficher une liste de pokémons

• créer un fichier HTML pokemons.html contenant un ul avec un id
• ajouter une balise script pour charger votre programme JavaScript
• faire une requête fetch sur l'URL https://pokeapi.co/api/v2/pokemon/
• comprendre accéder aux noms des pokémons dans les données qu'on a récupérées
• pour chaque nom de pokémon, ajouter un list item (li) à la ul

Bonus

1. au lieu de juste afficher le nom, afficher le nom et l'URL
2. quand on clique sur l'URL, faire une requête avec fetch sur cette URL pour récupérer des données supplémentaires (dont les images)
3. afficher une des images (par exemple front_default qui se trouve dans sprites) en créant une image (img) et en mettant l'URL de l'image dans l'attribut src de l'image