• Facile

Ce cours est visible gratuitement en ligne.

Ce cours existe en livre papier.

Vous pouvez obtenir un certificat de réussite à l'issue de ce cours.

Vous pouvez être accompagné et mentoré par un professeur particulier par visioconférence sur ce cours.

J'ai tout compris !

Premiers pas avec AJAX

Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

Ce chapitre va aborder un sujet qui fait souvent peur aux programmeurs Web : AJAX. Vous allez voir à quel point jQuery facilite les échanges de données AJAX et il y a fort à parier que vous utiliserez sans aucune appréhension tout ce qui sera écrit dans ce chapitre pour obtenir des pages Web dynamiques, vraiment réactives et qui soulageront dans de grandes mesures les échanges avec le serveur.

Qu'est-ce qu'AJAX ?

Lorsque vous naviguez de page en page sur un site Web traditionnel (entendez par là non-AJAX), les actions de l'internaute se traduisent par les actions suivantes :

  1. Envoi d'une requête au serveur afin d'obtenir une nouvelle page.

  2. Calcul de la nouvelle page par le serveur et envoi des données HTML/CSS correspondantes.

  3. Affichage de ces données dans le navigateur.

Cette technique fonctionne très bien dans la plupart des cas, mais parfois seule une partie de la page nécessite d'être mise à jour. C'est là qu'intervient AJAX :

  1. Dans un premier temps, envoi d'une requête au serveur afin d'obtenir les données qui seront affichées dans une partie bien précise de la page actuelle.

  2. Calcul des données demandées par le serveur et envoi de ces données au navigateur au format XML.

  3. Réception des données envoyées par le programme (on dit aussi moteur) AJAX qui les a demandées et affichage dans un endroit bien précis de la page actuelle sans toucher au reste de la page.

La figure suivante résume ces deux modes de fonctionnement.

Les deux modes de fonctionnement d'un site Web : client-serveur et AJAX
Les deux modes de fonctionnement d'un site Web : client-serveur et AJAX

Si, dans la plupart des cas, un fonctionnement traditionnel est entièrement satisfaisant, les performances d'affichage peuvent être grandement améliorées dans certains cas particuliers, comme par exemple l'affichage de données mises à jour à intervalles réguliers (cours d'actions en bourse par exemple), la sauvegarde des données pendant la saisie dans un formulaire, la mise à jour et/ou la vérification dynamique des champs d'un formulaire en fonction des données saisies par l'utilisateur, la saisie prédictive (comme le fait Google en proposant des réponses lorsque vous commencez à taper quelques caractères dans la case de recherche), etc.

Mais au fait, savez-vous ce que signifie le terme AJAX ? Que tous les joyeux drilles qui ont fait un rapprochement avec la lessive de même nom se rassurent, ces deux termes, quoique homonymes, n'ont aucun rapport entre eux. AJAX est l'acronyme d'Asynchronous JavaScript and XML. Tous ces termes se comprennent aisément : le langage JavaScript est utilisé pour demander des données au serveur. Ces données lui sont retournées de façon asynchrone sous une forme XML.

Serveur Web local et serveur Web distant

Vous savez maintenant ce que signifie le terme AJAX et ce qu'il pourra vous apporter dans vos développements Web. Vous êtes donc prêts à écrire vos premières lignes. Et pourtant, nous n'allons pas commencer tout de suite…

Jusqu'ici, tous les développements en jQuery se faisaient en local, sur votre ordinateur, et il suffisait d'afficher la page HTML dans un navigateur Web pour tester son fonctionnement. En effet, tout se passait au niveau client, c'est-à-dire dans le navigateur : aucun aller-retour avec un serveur Web n'était nécessaire. Au risque de vous décevoir, pour que les échanges AJAX fonctionnent, vous devrez utiliser un serveur. Deux possibilités s'offrent à vous. Vous pouvez :

  1. Installer un serveur Web sur votre ordinateur.

  2. Poster vos pages sur un serveur Web distant.

Installation et utilisation d'un serveur Apache

L'installation d'un serveur Apache sur votre ordinateur n'a rien de sorcier : elle consiste à télécharger et exécuter un fichier. Rendez-vous sur le site officiel d'Apache et téléchargez la dernière version en date du fichier Apache pour Windows. Une fois téléchargé, double-cliquez sur ce fichier pour installer le serveur Apache. Vous devriez rapidement arriver à la fenêtre visible à la figure suivante.

Les informations concernant le serveur ont été complétées
Les informations concernant le serveur ont été complétées

Quelques précisions sur le paramétrage de cette boîte de dialogue :

  • « localhost » fait référence à l'ordinateur local ;

  • « 127.0.0.1 » correspond à l'adresse IP interne de l'ordinateur ;

  • « admin@localhost » est l'adresse de l'administrateur du serveur Web. En l'occurrence, vous.

  • « for All Users, on Port 80, as a Service » installe Apache pour tous les comptes d'utilisateurs en utilisant le port 80, c'est-à-dire le port de communication utilisé par défaut pour communiquer avec un serveur Web.

Cliquez surNext, choisissez une installation typique. Cliquez surNextet choisissez le dossier d'installation. Enfin, cliquez surInstallpour procéder à l'installation. Quelques instants plus tard, le serveur Web est installé sur votre ordinateur et il peut être utilisé. Pour vous en convaincre, ouvrez votre navigateur Web, tapezhttp://localhostdans la barre d'adresse et appuyez sur la touche Entrée. Vous devriez obtenir quelque chose ressemblant à la figure suivante.

Le serveur Web est opérationnel
Le serveur Web est opérationnel

Peut-être avez-vous remarqué la présence d'une nouvelle icône dans la zone de notifications, comme le montre la figure suivante. Il s'agit du moniteur Apache. Vous l'utiliserez pour démarrer, arrêter et redémarrer le service Apache.

Démarrage, arrêt et redémarrage du service Apache en quelques clics de souris
Démarrage, arrêt et redémarrage du service Apache en quelques clics de souris

Maintenant que le serveur Web est opérationnel, il va falloir placer vos fichiers HTML à un endroit bien précis. Le dossier de travail utilisé par défaut par Apache est le sous-dossierhtdocsdu dossier dans lequel Apache a été installé :C:/Program Files/Apache Software Foundation/Apache2.2/htdocssi vous avez conservé le chemin proposé dans l'assistant d'installation.

Si, pour une raison ou pour une autre, vous voulez utiliser un autre dossier, ouvrez le fichierC:/Program Files/Apache Software Foundation/Apache2.2/conf/httpd.confdans un éditeur de texte quelconque, recherchez le terme « DocumentRoot » et remplacez le chemin proposé par défaut par un autre chemin qui vous convient mieux.

Maintenant pour tester vos pages présentes dans le dossier Apache, il vous suffit d'ouvrir votre navigateur et de vous rendre sur la pagehttp://localhost/nom_du_fichier.html.

Utilisation d'un serveur distant

Si vous lisez ce cours, il est fort probable que vous ayez déjà hébergé des sites Web sur un serveur distant proposé par un hébergeur quelconque. Vous devriez donc savoir comment faire. Et si ce n'est pas le cas, je vous invite à lire ce chapitre du cours de HTML5 de Mathieu Nebra.

Charger un fichier

Je vais vous montrer comment charger des informations stockées sur le serveur et mettre à jour un élément de la page actuelle (et juste cet élément) avec ces informations. Pour cela, nous allons utiliser la méthodeload(), dont voici la syntaxe :

$('sel').load('nom_page', function() {
  //une ou plusieurs instructions
});

… où :

  • selest un sélecteur jQuery quelconque qui permet d'identifier l'élément (ou les éléments) à mettre à jour ;

  • nom_pageest le nom d'une page Web quelconque dont le contenu sera utilisé pour effectuer la mise à jour ;

  • Si elle est précisée, la fonction de rappel est, comme toujours, exécutée lorsque la méthode a été exécutée, c'est-à-dire lorsque l'élément (ou les éléments) a (ont) été mis à jour.

Passons tout de suite à la pratique. Dans ce premier exemple, un document affiche deux boutons de commande et quatre balises<div>. Trois d'entre elles contiennent du texte et une contient une image. Le premier bouton va mettre à jour le contenu de la première balise<div>et le deuxième le contenu de la deuxième. Et ce, bien entendu, sans toucher au reste du document. Voici le code utilisé :

<style type="text/css">
  div { width: 400px; height: 300px; float: left; margin: 5px; }
  #premier { background-color: #F6E497; }
  #troisieme { background-color: #CAF1EC; }
  #quatrieme { background-color: #F1DBCA; }
</style>

<button id="majPremier">Mise à jour première zone</button>
<button id="majDeuxieme">Mise à jour deuxième zone</button><br /><br />
<div id="premier">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>

<div id="deuxieme">
  <img src="image1.jpg">
</div>

<div id="troisieme">
  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

<div id="quatrieme">
  Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. 
</div>

<script src="jquery.js"></script>
<script>
  $(function() {
    $('#majPremier').click(function() {
      $('#premier').load('maj1.html', function() {
        alert('La première zone a été mise à jour');
      });
    });

    $('#majDeuxieme').click(function() {
      $('#deuxieme').load('maj2.html', function() {
        alert('La deuxième zone a été mise à jour');
      });
    });
  });
</script>

Examinons le code jQuery. Lorsque le premier bouton est cliqué, la balise d'identifiant#premier(en d'autres termes, la première balise<div>) est mise à jour avec le contenu du documentmaj1.html:

$('#premier').load('maj1.html', function() {

La fonction de rappel de la méthodeload()est utilisée pour indiquer la fin de la mise à jour :

alert('La première zone a été mise à jour');

Voici le code contenu dans le fichiermaj1.html:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
  </head>
  
  <body>
    Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
  </body>
</html>

Le texte compris entre les balises<body>et</body>sera utilisé pour mettre à jour la première balise<div>de notre document. Le texte original « Lorem ipsum dolor sit amet… » deviendra donc « Ut enim ad minima veniam… ».

Lorsque le deuxième bouton est cliqué, la même technique met à jour le contenu de la deuxième balise<div>, avec le documentmaj2.html:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
  </head>
  
  <body>
    <img src="image2.jpg">
  </body>
</html>

Essayer le code

Charger une partie d'un fichier

En modifiant légèrement la syntaxe de la méthodeload(), il est possible d'utiliser une partie seulement des données auxquelles donne accès la requête AJAX. Pour cela, il suffit de faire suivre le nom du fichier par une espace et par un sélecteur jQuery :

$('sel').load('nom_page sel2', function() {
  //Une ou plusieurs instructions
});

… où :

  • selest un sélecteur jQuery quelconque qui permet d'identifier l'élément (ou les éléments) à mettre à jour ;

  • nom_pageest le nom d'une page Web quelconque dont le contenu sera utilisé pour effectuer la mise à jour ;

  • sel2est un sélecteur jQuery quelconque, sans le signe $ ni les parenthèses, qui permettra d'isoler certaines données dans la pagenom_page;

  • Si elle est précisée, la fonction de rappel est, comme toujours, exécutée lorsque la méthode a été exécutée, c'est-à-dire lorsque l'élément (ou les éléments) a (ont) été mis à jour.

À titre d'exemple, j'ai regroupé les données de mise à jour qui se trouvaient dans les fichiersmaj1.htmletmaj2.htmlde l'exemple précédent, je les ai placées dans le fichiermaj.htmlet je leur ai affecté un identifiant pour qu'elles soient plus faciles à isoler en jQuery :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
  </head>
  
  <body>
    <div id="modif1">
      Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
    </div>
    <img id="modif2" src="paysage2.jpg">
  </body>
</html>

Ainsi, le texte à utiliser pour mettre à jour la première balise est facilement identifiable par l'identifiant#modif1, et l'image à utiliser pour mettre à jour la deuxième balise est facilement identifiable par l'identifiant#modif2. Voici comment doivent être modifiées les deux méthodes événementielles de l'exemple précédent pour n'utiliser qu'une partie du fichier lors de la mise à jour :

$('#majPremier').click(function() {
  $('#premier').load('maj.html #modif1', function() {
    alert('La première zone a été mise à jour');
  });
});

$('#majDeuxieme').click(function() {
  $('#deuxieme').load('maj.html #modif2', function() {
    alert('La deuxième zone a été mise à jour');
  });
});

Passer des paramètres à un programme PHP

Je ne pouvais pas faire l'impasse sur les possibilités de passage de paramètres de la méthodeload(). Cette technique est particulièrement adaptée si vous programmez en PHP. En utilisant jQuery pour créer des adresses URL contenant un ou plusieurs paramètres (http://site.fr/page.php?id=10&p=2), vous pourrez interroger une base de données en PHP et retourner des informations qui dépendent des paramètres passés dans l'URL.

Première forme de la méthodeload()

Pour passer des paramètres à la suite de l'adresse URL avec la méthodeload(), voici la syntaxe à utiliser :

$('sel').load(url,param);

… où :

  • selest un sélecteur jQuery quelconque qui permet d'identifier l'élément (ou les éléments) à mettre à jour ;

  • urlest le nom de la page PHP qui sera utilisée pour faire la mise à jour ;

  • paramest une chaîne qui contient un ou plusieurs couples paramètres/valeurs. Par exemple, siparamvaut « id=5, p=14 » eturlvauthttp://site.fr/page.php, la page utilisée pour la mise à jour serahttp://site.fr/page.php?id=5&p=14.

Et maintenant, je vous propose de voir comment utiliser cette version de la méthodeload()sur un cas concret. Que diriez-vous d'afficher des proverbes chinois en utilisant quelques lignes de jQuery associées à un programme écrit en PHP ? Voici le code HTML/jQuery utilisé :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Ajax - Load</title>
  </head>
  
  <body>
    <input type="text" id="ref">
    <button id="action">Afficher</button><br />
    <div id="r">Entrez un nombre compris entre 1 et 10 pour afficher un proverbe chinois</div>

    <script src="jquery.js"></script>
    <script>
      $(function() {
        $('#action').click(function() {
          var param = 'l=' + $('#ref').val();
          $('#r').load('http://www.proverbes.php',param);
        });  
      });
      </script>
  </body>
</html>

Lorsque le bouton est cliqué, le contenu de la zone de texte est lu avec la méthode jQueryval()appliquée à la zone de texte#ref. La valeur ainsi obtenue est mémorisée dans la variableparam, précédée du texte « l= » :

var param = 'l=' + $('#ref').val();

Par exemple, si vous tapez « 5 » dans la zone de texte, la variableparamcontiendra la chaîne « l=5 » après l'exécution de cette instruction.

La ligne suivante passe le paramètre que vous avez saisi au programmeproverbes.phpet met à jour la balise<div id="r">en conséquence :

$('#r').load('proverbes.php',param);

Il ne vous manque plus que le traitement PHP. Je vais vous le donner, mais je ne vais pas l'expliquer, ce n'est pas vraiment le but de ce cours. Sans plus attendre…

<?php
$proverbe = array("On ne rassasie pas un chameau en le nourrissant à la cuillère.",
                  "Connaître son ignorance est la meilleure part de la connaissance.",
                  "Une maison en paille où l'on rit, vaut mieux qu'un palais où l'on pleure.",
                  "Le vrai voyageur ne sait pas où il va.",
                  "Point n'est besoin d'élever la voix quand on a raison.",
                  "Un ami c'est une route, un ennemi c'est un mur.",
                  "Un peu de parfum demeure toujours sur la main qui te donne des roses.",
                  "Si élevé que soit l'arbre, ses feuilles tombent toujours à terre.",
                  "Si ce que tu as à dire n'est pas plus beau que le silence, tais toi.",
                  "Trois coupes de vin font saisir une doctrine profonde.");
$l=$_GET["l"];
if (($l != "") && ($l>0) && ($l<11))
{
  echo "<u>Proverbe chinois N° ".$l."</u><br><br>";
  echo "<b>".$proverbe[$l-1]."</b>";
}    
else
  echo "<font color=red>Entrez un nombre compris entre 1 et 10 !</font>";  
?>

Seulement attention, comme je vous le disais précédemment, le PHP doit être placé sur un serveur, local ou distant. Pour que votre page fonctionne, placez les deux fichiers sur un serveur.

Deuxième forme de la méthodeload()

Il est également possible de passer un objet en deuxième argument de la méthodeload(). Par exemple, vous pourriez passer deux couples paramètres/valeurs en utilisant l'instruction suivante :

$('sel').load('http://www.site.com/page.php',{ id:50, nom: 'durand'});

Mais attention, dans ce cas, les valeurs sont passées par une requête HTTPPOST. Elles devront donc être récupérées de la sorte par le programme PHP.

Requête HTTPPOST? Mais qu'est-ce que tout ce charabia ?

À chaque manipulation faite par l'utilisateur, le navigateur envoie une requête au serveur contenant une référence à une page Web (http://www.site.com/page.php?param1=15&param2=rougepar exemple). Le serveur effectue les calculs nécessaires et renvoie le résultat au navigateur sous forme d'une page Web. Les requêtes peuvent être de typeGET(apparentes dans l'adresse URL) ouPOST(absentes de l'adresse URL). Selon la méthode utilisée, les instructions permettant de récupérer les données côté serveur seront différentes.

Requêtes GET et POST

La fonction$.get()

En parallèle de la méthodeload(), vous pouvez utiliser la fonction jQuery$.get()pour obtenir des données envoyées par le serveur en utilisant une requête HTTPGET. Voici la syntaxe de cette fonction :

$.get(adresse, données, function() {
  // Une ou plusieurs instructions
});

… où :

  • adresseest le nom d'une page Web quelconque dont le contenu sera récupéré par la fonctionget();

  • donnéesreprésente les données à passer à la page Web par une requête HTTPGET;

  • Si elle est précisée, la fonction de rappel est, comme toujours, exécutée lorsque la méthode a été exécutée, c'est-à-dire lorsque l'élément (ou les éléments) a (ont) été mis à jour.

Passons à la pratique. À l'aide de la fonctionget(), nous allons modifier le code précédent pour récupérer le code HTML retourné par une page PHP et l'afficher dans une boîte de message. Voici les instructions utilisées :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Ajax - Get</title>
  </head>
  
  <body>
    <button id="action">Lancer la requête HTTP GET</button><br />

    <script src="jquery.js"></script>
    <script>
      $(function() {
        $('#action').click(function() {
          $.get('proverbes.php?l=9', function(data) {
            alert(data);
          });    
        });  
      });
      </script>
  </body>
</html>

Essayer

Le corps du document comporte un simple bouton de commande qui déclenchera l'exécution de la méthodeget().
Lorsque ce bouton est cliqué, la fonctionget()est exécutée. Le premier paramètre de la fonction contient l'adresse de la page à exécuter (ici, une page PHP). Le deuxième correspond à la fonction de rappel grâce à laquelle les données retournées par la page PHP seront récupérées :

$.get('proverbes.php?l=9', function(data) {

Le paramètredataayant été passé en argument de la fonction de rappel, il suffit de l'utiliser pour récupérer les données affichées par la page PHP. Ces données sont alors affichées dans une boîte de message avec la fonctionalert().

La figure suivante vous montre le résultat.

Récupération des données PHP et affichage
Récupération des données PHP et affichage

La fonction$.post()

La fonction$.post()est toute indiquée si vous voulez envoyer des données de grande taille et/ou sensibles (entendez par là qui contiennent des mots de passe ou d'autres données du même type) au serveur. Par exemple, vous utiliserez la fonctionpost()pour envoyer des données saisies dans un formulaire, qui doivent être stockées dans la base de données du site. Voici le type d'instruction que vous pourriez utiliser :

$.post('traiteFormulaire.php', { nom: 'Pierre34', heure: '2pm', post: 'Un peu de texte récupéré dans un formulaire HTML et destiné à être posté dans un forum.' },
   function(data) {
     alert(data);
   });

Ici, le programmetraiteFormulaire.phpest exécuté. Les données saisies dans le formulaire lui sont transmises, et les éléments affichés par le programme PHP sont affichés dans une boîte de message.

Faire patienter l'utilisateur avec une animation

Certaines requêtes AJAX peuvent demander quelques secondes pour s'exécuter. Pour faire patienter la personne qui en est à l'origine, il est courant d'utiliser une image GIF animée, comme celle présentée à la figure suivante.

L'image indique au visiteur qu'il doit attendre quelques secondes
L'image indique au visiteur qu'il doit attendre quelques secondes

Pour gérer l'affichage de cette image, il suffit d'y faire référence lorsque la requête AJAX est déclenchée, puis de l'effacer lorsque l'exécution de la requête AJAX est terminée.

À titre d'exemple, voici comment a été modifié le code de l'exemple précédent pour afficher une image d'attente entre le début et la fin de la requête AJAX :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Ajax - Load</title>
  </head>
  
  <body>
    <input type="text" id="ref">
    <button id="action">Afficher</button><br />
    <div id="r">Entrez un nombre compris entre 1 et 10 pour afficher un proverbe chinois</div>

    <script src="jquery.js"></script>
    <script>
      $(function() {
        $('#action').click(function() {
          $('#r').html('<img src="http://www.mediaforma.com/sdz/jquery/ajax-loader.gif">');
          var param = 'l=' + $('#ref').val();
          $('#r').load('http://www.mediaforma.com/sdz/jquery/data.php',param);
        });  
      });
      </script>
  </body>
</html>

Qu'est-ce qui a changé, d'après vous ?
Le code HTML est strictement identique. C'est du côté jQuery qu'il faut chercher les différences, ou plutôt la différence, puisqu'une seule instruction a été ajoutée, ligne 17 :

$('#r').html('<img src="http://www.mediaforma.com/sdz/jquery/ajax-loader.gif">');

Lorsque le bouton est cliqué par l'utilisateur, cette ligne affiche l'animation dans la balise<div>. Les lignes 18 et 19 lancent une requête AJAX qui met à jour le contenu de la balise<div>et donc efface l'image GIF animée.

  • Pour mettre à jour une zone du document avec une page Web (écrite en HTML ou en PHP par exemple), le plus simple consiste à utiliser la méthodeload(), en précisant le nom de la page entre les parenthèses, éventuellement suivi d'une fonction de rappel. Si elle est précisée, cette fonction sera appelée lorsque les données auront été chargées.

  • En modifiant légèrement la syntaxe de la méthodeload(), il est possible d'utiliser une partie seulement des données auxquelles donne accès la requête AJAX. Pour cela, il suffit de faire suivre le nom du fichier par une espace et par un sélecteur jQuery, sans le signe $, sans les parenthèses et sans les apostrophes.

  • Un ou plusieurs couples paramètres/valeurs peuvent être passés à la méthodeload(). Indiquez-les sous la forme d'une chaîne dans le deuxième paramètre de la fonction.

  • Plusieurs fonctions jQuery vont vous permettre d'aller plus loin avec vos requêtes AJAX. Vous pouvez en particulier envoyer des requêtes HTTPGETetPOSTau serveur avec les fonctions$.get()et$.post(), charger et exécuter un script JavaScript avec la fonction$.getScript()et des données JSON avec la fonction$.getJSON().

Exemple de certificat de réussite
Exemple de certificat de réussite