Tutoriel pour apprendre la programmation en JavaScript

Créé en 1995, le procédé AJAX (Asynchronous Javascript and XML) a été intégré aux navigateurs pour permettre aux sites Web d'être plus dynamiques.

Cette technique permet à une application JavaScript de :

• échanger des données avec des serveurs Web ;
• charger des données sur une page sans la recharger ;
• accéder à des API (Application Programming Interface) du Web.

Une requête AJAX consiste à effectuer une requête HTTP depuis du code JavaScript.

Pour rappel, HTTP est le protocole employé par les navigateurs pour communiquer avec les serveurs Web.

Par exemple, quand nous allons sur Google, nous tapons http://google.com dans la barre du navigateur, ce qui a pour effet de demander la page HTML de recherche au serveur HTTP de google.com. Ceci est une requête de type GET, car elle permet seulement de récupérer des données depuis ce serveur, contrairement aux requêtes POST permettant d'envoyer des données à un serveur.

À noter que le chargement d'une page HTML déclenche généralement d'autres requêtes HTTP, afin de récupérer toutes les ressources associées à cette page Web : scripts, feuilles de style CSS, images, etc.

Une requête HTTP permet de récupérer des données de formats variés.

Par exemple :

• le format HTML, pour les pages Web ;
• le format CSS, pour les feuilles de style ;
• le format JS, pour les scripts en JavaScript ;
• le format JPG, pour les images, etc.

Nous allons nous intéresser en particulier aux formats représentant des données structurées.

Initialement, AJAX a été créé pour récupérer des données au format XML. Un format proche du HTML, et très en vogue à l'époque.

Exemple de document XML :

<inbox>
  <email from="amazon">votre colis a été envoyé</email>
</inbox>

Comme en HTML, un document XML est composé d'éléments, d'attributs, et de nœuds textuels.

Désormais, la majorité des sites Web emploient le format JSON pour échanger des données structurées.

Exemple de document JSON :

[
  {
    "from" : "amazon",
    "subject" : "votre colis a été envoyé"
  }
]

Pour rappel, JSON (JavaScript Object Notation) est en fait la syntaxe utilisée pour définir des objets en JavaScript.

En supposant que cet objet JSON soit stocké dans une variable objet, le langage JavaScript nous permet d'accéder facilement aux données qui y sont stockées.

Par exemple, pour afficher la valeur de la propriété subject de la propriété email, il suffit de saisir :

console.log(objet.email.subject);

Pour récupérer des données depuis une URL HTTP, le navigateur met à notre disposition la classe XMLHttpRequest. Malgré son nom, il est possible de l'utiliser pour récupérer des données exprimées dans d'autres formats que XML.

Voici un exemple de requête HTTP GET simple, en JavaScript :

var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://jsonplaceholder.typicode.com/users/1');
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4) {
    alert(xhr.responseText);
  }
};
xhr.send();

Cette requête permet de récupérer le texte d'un document disponible à l'URL https://jsonplaceholder.typicode.com/users/1, puis de l'afficher dans un alert() une fois qu'il a été téléchargé intégralement.

Effectuer une requête avec XMLHttpRequest consiste en quatre étapes :

1. Instancier la classe, avec new ;
2. Spécifier la méthode (GET) et l'URL du document à récupérer, en appelant la méthode open() ;
3. Définir ce qu'on souhaite faire de la réponse, une fois reçue intégralement, en affectant une fonction à la propriété onreadystatechange de notre instance ;
4. Puis envoyer la requête, en appelant la méthode send() de notre instance.

La propriété readyState permet de savoir où en est le téléchargement du document. Lorsque celui-ci est complet, readyState vaut 4, et la fonction affectée à onreadystatechange est appelée à nouveau par le navigateur. À ce moment-là, nous pouvons accéder au contenu du document téléchargé, stocké dans la propriété responseText.

À noter que, même si le document en question est au format JSON (par exemple), responseText contiendra la version sérialisée du document, c'est-à-dire qu'il sera de type string, et non object. À ce stade, il n'est donc pas possible d'accéder à une propriété spécifique de cet objet.

Dans la prochaine partie, nous allons voir comment convertir cette chaine de caractères en véritable objet.

Dans le cas où notre requête retourne un document JSON, il est possible de convertir sa représentation textuelle (fournie dans la propriété responseText) en véritable objet JavaScript.

Pour cela, le navigateur fournit la fonction JSON.parse().

Cette fonction prend en paramètre une chaine de caractères (type : string) contenant la version sérialisée d'un objet, et retourne l'objet correspondant (type : object).

Par exemple, imaginons l'objet sérialisé suivant :

var chaine = '{"message" :"bonjour!"}';
console.log(chaine.message); // => undefined

Comme cet objet est sérialisé sous forme de chaine de caractères, il n'est pas possible d'accéder directement à ses propriétés.

Pour permettre cela, nous allons le passer en paramètre de la fonction JSON.parse() :

var chaine = '{"message" :"bonjour!"}';
var objet = JSON.parse(chaine);
console.log(objet.message); // => "bonjour!"

Donc, pour récupérer un objet JavaScript depuis la réponse JSON de notre requête AJAX, il faut utiliser le code suivant :

var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://jsonplaceholder.typicode.com/users/1');
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4) {
    var reponse = JSON.parse(xhr.responseText);
    alert(reponse.name);
  }
};
xhr.send();

Bien entendu, n'oubliez pas de remplacer l'URL de cet exemple par celle à laquelle se trouve le document que vous souhaitez récupérer !

N'oubliez pas non plus de consulter la console de votre navigateur ainsi que la partie « Réseau » (ou « Network », en anglais) de Chrome Dev Tools, afin de diagnostiquer les éventuelles erreurs.

API simples :

• Adresse IP : httpbin.org/ip
• Utilisateur : jsonplaceholder.typicode.com/users/1

API plus complexes :

• Animations : Giphy
• Photos : Flickr
• Chatons : puppygifs.tumblr.com/api/read/json (JSON var with CORS)

Annuaire d'API : Programmable Web

Effectuer une requête AJAX vers l'API httpbin.org/ip qui affichera seulement l'heure fournie en réponse dans un alert().

Solution :

var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://httpbin.org/ip');
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4) {
    console.log('réponse du serveur:', xhr.responseText);
    var objet = JSON.parse(xhr.responseText);
    alert(objet.origin);
  }
};
xhr.send();

Réaliser une page Web permettant d'afficher la météo d'une ville saisie par l'utilisateur. Pour récupérer la météo, utiliser une requête AJAX vers l'API de openweathermap.

Étapes :

1. Effectuer une requête vers l’API fournie, après en avoir consulté la documentation ;
2. Réaliser une page HTML contenant un champ de saisie et un bouton ;
3. Ajouter un code JavaScript qui affiche le contenu du champ quand on clique sur le bouton ;
4. Intégrer la requête AJAX correspondant à la première étape de cet exercice, de manière à ce que la réponse de requête soit affichée dans la console ;
5. Faire en sorte que l'appel AJAX s'adapte en fonction de la saisie, à chaque clic sur le bouton.

Solution :

<html>
  <head>
  </head>
  <body>
    <h1>Météo</h1>
    <input id="ville" placeholder="ville">
    <button id="bouton">OK</button>
    <div id="meteo"></div>
    <script src="ajax-get-weather.js"></script>
  </body>
</html>

Réaliser une page Web permettant d'afficher des images ou animations en rapport avec les mots-clés saisis par l'utilisateur. Pour récupérer l'URL des images, utiliser une requête AJAX vers l'API de Flickr ou de Giphy.

Les images doivent être affichées directement dans la page à l'aide d'éléments <img>, après la saisie de l'utilisateur. Pour cela, vous pouvez utiliser innerHTML, ou les méthodes présentées dans le chapitre sur la manipulation avancée du DOM.

Solution : flickr

<h1>Recherche d'images</h1>
<input id="tags">
<button id="bouton">OK</button>
<ul id="resultats"></ul>

var resultats = document.getElementById('resultats');
document.getElementById('bouton').onclick = function() {
	var tags = document.getElementById('tags').value;
  var url = 'https://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=74a9b070d21072ccac3a7b5f44f09efa&tags=' + encodeURIComponent(tags) + '&format=json&nojsoncallback=1';
  console.log('ajax request url:', url);
  var xhr = new XMLHttpRequest();
  xhr.open('GET', url);
  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4) {
      var reponse = JSON.parse(xhr.responseText);
      var photos = reponse.photos.photo;
      resultats.innerHTML = ''; // effacer les résultats précédents
      for (var i = 0; i < photos.length; i++) {
        var photo = photos[i];
        // cf https://www.flickr.com/services/api/misc.urls.html
        var photoUrl = 'https://farm' + photo.farm + '.staticflickr.com/' + photo.server + '/' + photo.id + '_' + photo.secret + '.jpg';
        var img = document.createElement('img');
        img.src = photoUrl;
        resultats.appendChild(img);
      }
    }
  };
  xhr.send();
};

Solution : giphy

<h1>Recherche de GIF</h1>
<input id="tags">
<button id="bouton">OK</button>
<ul id="resultats"></ul>

var resultats = document.getElementById('resultats');
document.getElementById('bouton').onclick = function() {
	var tags = document.getElementById('tags').value;
  var url = 'https://api.giphy.com/v1/gifs/search?api_key=dc6zaTOxFJmzC&q=' + encodeURIComponent(tags);
  console.log('ajax request url:', url);
  var xhr = new XMLHttpRequest();
  xhr.open('GET', url);
  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4) {
      var reponse = JSON.parse(xhr.responseText);
      var photos = reponse.data;
      console.log(photos);
      resultats.innerHTML = ''; // effacer les résultats précédents
      for (var i = 0; i < photos.length; i++) {
        var gifUrl = photos[i].images.downsized.url;
        console.log(gifUrl);
        var img = document.createElement('img');
        img.src = gifUrl;
        resultats.appendChild(img);
      }
    }
  };
  xhr.send();
};

ajax-get-images-flickr.html
ajax-get-images-giphy.html

Comme vous le savez probablement, le protocole HTTP existe aussi en version sécurisée (HTTPS).

Pour des raisons de sécurité, les navigateurs empêchent le protocole HTTP d'être employé depuis une page Web affichée via HTTPS. Cette contrainte a des implications importantes sur le fonctionnement des requêtes AJAX.

Notamment :

• une page ouverte en HTTPS (ex. : jsfiddle) ne peut pas effectuer de requête AJAX vers des URL HTTP (non sécurisées), seulement vers des URL HTTPS ;
• si vous exécutez une requête AJAX depuis la console d'une page HTTPS, les mêmes contraintes s'appliquent.

Donc, dans la mesure du possible, assurez-vous d'utiliser le protocole HTTPS dans l'URL de vos requêtes AJAX.

En plus des restrictions de sécurité HTTPS, certaines API ne permettent pas l'exécution de requêtes AJAX depuis certains domaines (ex. : jsfiddle).

D'autres refusent carrément de répondre aux requêtes émises depuis d'autres domaines que le leur.

Dans ce cas, vous pourrez seulement exécuter des requêtes AJAX depuis une page de leur site Web, via la console.

Dans les exemples d'API « complexes » fournis plus haut, vous remarquerez que certaines URL contiennent des paramètres, séparés par les caractères ? puis &.

Exemple :

https://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=74a9b070d21072ccac3a7b5f44f09efa&tags=soccer&format=json&nojsoncallback=1

Comme dans la définition de propriétés d'un objet JavaScript, chaque paramètre est composé d'un nom (aussi appelé clé) et d'une valeur. Dans une URL, le nom et la valeur de chaque paramètre sont séparés par un =.

Dans l'URL fournie ci-dessus en exemple, quatre paramètres sont transmis :

• le paramètre nommé method vaut flickr.photos.search ;
• le paramètre nommé api_key vaut 74a9b070d21072ccac3a7b5f44f09efa ;
• le paramètre nommé tags vaut soccer ;
• le paramètre nommé format vaut json ;
• et le paramètre nommé nojsoncallback vaut 1.

Au cas où vous voudriez passer la valeur d'une variable de votre programme JavaScript en paramètre de votre URL, vous pouvez utiliser la concaténation.

Exemple :

var tags = 'soccer';
var url = 'https://api.com/?tags=' + tags + '&format=json';

Pour éviter que les caractères spéciaux éventuels d'une chaine de caractères ne puissent invalider votre URL, utilisez la fonction encodeURIComponent() de la manière suivante :

var tags = 'soccer';
var url = 'https://api.com/?tags=' + encodeURIComponent(tags) + '&format=json';

Vous aurez remarqué que certaines URL contiennent un paramètre api_key, ou appid.

Exemple :

http://api.openweathermap.org/data/2.5/weather?q=London,uk&appid=44db6a862fba0b067b1930da0d769e98

Ce genre de paramètre permet d'identifier l'application utilisant l'API, ou le développeur de cette application. En effet, les fournisseurs d'API souhaitent connaitre cette information, afin de contrôler l'accès et l'usage de leur API.

Pour obtenir une clé, rendez-vous sur le site Web de cette API, puis intégrez la clé fournie dans l'URL de votre/vos requête(s) AJAX.