• 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 !

Plus loin avec AJAX

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

Arrivés à ce point dans la lecture du cours, vous savez mettre à jour une partie d'une page Web en utilisant la méthode load(). Nous allons maintenant nous intéresser à des fonctions jQuery complémentaires.

Les méthodes se différencient des fonctions, car elles s'appliquent à des éléments obtenus à travers un sélecteur jQuery. Dans $('sélecteur').meth(paramètres);, meth est une méthode, alors que dans $.fonc(paramètres);, fonc est une fonction.

Charger un script et des données JSON

Charger un script

La fonction $.getScript() permet de charger (de façon asynchrone) puis d'exécuter un fichier JavaScript. Dans sa syntaxe la plus simple, il suffit de préciser l'adresse URL du fichier à charger :

$.getScript('adresse');

Dans la deuxième syntaxe, une fonction de retour est précisée en deuxième paramètre de la fonction. Cette fonction est exécutée lorsque le code JavaScript a été chargé et exécuté :

$.getScript('adresse', function() {
  // Une ou plusieurs instructions
});

Charger des données codées en JSON

JSON (JavaScript Object Notation) est un format de données textuel qui permet de représenter des informations structurées. Voici un exemple de données au format JSON :

{ 
  'menu': 'Fichier', 
  'commande': [ 
      {
          'nomCde': 'Nouveau', 
          'action':'CreateDoc'
      }, 
      {
          'nomCde': 'Ouvrir', 
          'action': 'OpenDoc'
      }, 
      {
          'nomCde': 'Enregistrer sous',
          'action': 'SaveAs'
      }
      {
          'nomCde': 'Fermer',
          'action': 'CloseDoc'
      }
   ] 
}

Comme vous pouvez le déduire en examinant ce code, un fichier JSON est composé d'un ensemble de paires 'nom':'valeur' organisées de façon hiérarchique. Ici par exemple, les noms menu et commande se trouvent au même niveau hiérarchique. Quant aux noms nomCde et action, il s'agit des enfants du nom commande.

Dans vos vies de programmeurs jQuery, vous serez peut-être amenés à manipuler des données au format JSON. Pour cela, vous chargerez le fichier de données JSON avec la fonction $.getJSON(), puis vous travaillerez sur les différentes données qui le composent en utilisant la fonction de rappel.

Pour bien comprendre comment accéder aux données d'un fichier codé en JSON, nous allons raisonner sur un exemple simple qui comporte quatre paires 'nom':'valeur' de même niveau :

{
  "nom": "Pierre Durand",
  "age": "27",
  "ville": "Paris",
  "domaine": "HTML5, CSS3, JavaScript"
}

Et voici le code HTML/jQuery utilisé pour manipuler ces données :

<button id="charger">Charger et traiter les données</button>
<div id="r">Cliquez sur "Charger et traiter les données" pour lancer la lecture et le traitement des données JSON</div>

<script src="jquery.js"></script>
<script>
  $(function() {
    $('#charger').click(function() {
        $.getJSON('fichier.json', function(donnees) {
        $('#r').html('<p><b>Nom</b> : ' + donnees.nom + '</p>');
        $('#r').append('<p><b>Age</b> : ' + donnees.age + '</p>');
        $('#r').append('<p><b>Ville</b> : ' + donnees.ville + '</p>');
        $('#r').append('<p><b>Domaine de compétences</b> : ' + donnees.domaine + '</p>');
      });
    });  
  });
</script>

Lorsque le bouton est cliqué, la fonction getJSON() est exécutée pour charger le fichier de données fichier.json :

$.getJSON('fichier.json', function(donnees) {

Le deuxième paramètre de la fonction getJSON() correspond à la fonction de rappel. Cette fonction est exécutée lorsque le fichier de données a été entièrement chargé. Remarquez le mot donnees passé comme paramètre de la fonction de rappel. C'est par son intermédiaire que les données JSON seront accessibles.

Dans un premier temps, la valeur correspondant au nom (donnees.nom) est extraite du fichier de données et placée sous une forme HTML (html()) dans la balise <div>#r. Comme nous passons par la méthode html() pour remplir la balise <div>, il est possible d'utiliser des attributs de mise en forme. Ici, le mot « Nom » est mis en gras avec la balise HTML <b> :

$('#r').html('<p><b>Nom</b> : ' + donnees.nom + '</p>');

La donnée age (donnees.age) est alors extraite du fichier de données et placée à la suite du nom, dans un nouveau paragraphe. Ici aussi, le nom du champ est mis en gras en utilisant la balise HTML <b>.

Deux instructions similaires extraient les données ville et domaine du fichier de données JSON et les affichent à la suite du nom et de l'âge :

$('#r').append('<p><b>Ville</b> : ' + donnees.ville + '</p>');
$('#r').append('<p><b>Domaine de compétences</b> : ' + donnees.domaine + '</p>');

La figure suivante représente le rendu de ce code dans un navigateur.

Récupération des données dans le fichier JSON
Récupération des données dans le fichier JSON

La fonction $.ajax()

J'ai gardé le meilleur pour la fin : la fonction $.ajax() ! Tout comme les méthodes et fonctions AJAX étudiées jusqu'ici, $.ajax() permet d'envoyer des requêtes HTTP AJAX à un serveur Web. Ce qui la différencie de ses « collègues », c'est la finesse des paramètres qui peuvent lui être communiqués. N'ayez crainte, je vais tout vous expliquer et vous jugerez en toute connaissance de cause si oui ou non vous avez besoin de cette fonction. Deux syntaxes sont possibles :

$.ajax(adresse, {options});

$.ajax({options});

… où adresse est l'adresse à laquelle la requête doit être envoyée, et options correspond à une ou plusieurs des options suivantes :

  • type : type de la requête, GET ou POST (GET par défaut).

  • url : adresse à laquelle la requête doit être envoyée.

  • data : données à envoyer au serveur.

  • dataType : type des données qui doivent être retournées par le serveur : xml, html, script, json, text.

  • success : fonction à appeler si la requête aboutit.

  • error : fonction à appeler si la requête n'aboutit pas.

  • timeout : délai maximum (en millisecondes) pour que la requête soit exécutée. Si ce délai est dépassé, la fonction spécifiée dans le paramètre error sera exécutée.

Beaucoup d'autres options peuvent être utilisées. Pour en avoir une liste exhaustive, consultez la documentation officielle.

Que diriez-vous de passer à la pratique pour voir comment utiliser cette fonction ? Je vous propose de reprendre l'exemple du chapitre précédent et de remplacer la fonction $.get() par $.ajax(). Voici le code utilisé :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Ajax - La fonction ajax()</title>
  </head>
  
  <body>
    <button id="action">Lancer la requête AJAX</button><br />

    <script src="jquery.js"></script>
    <script>
      $(function() {
        $('#action').click(function() {
          $.ajax({
            type: 'GET',
            url: 'proverbes.php?l=7',
            timeout: 3000,
            success: function(data) {
              alert(data); },
            error: function() {
              alert('La requête n\'a pas abouti'); }
          });    
        });  
      });
      </script>
  </body>
</html>

Le corps du document contient un bouton de commande qui sera utilisé pour exécuter la requête AJAX. Lorsque ce bouton est cliqué, la fonction $.ajax() est lancée pour exécuter la requête AJAX. Cette requête est de type GET (ce paramètre aurait pu être omis, puisqu'il s'agit de la valeur par défaut). La page invoquée est définie dans le paramètre url et le délai maximal d'exécution l'est dans le paramètre timeout. Ici, un délai de 3000 millisecondes est accordé au programme PHP pour fournir ce qui lui est demandé.

Si la requête aboutit, les données renvoyées par le programme PHP sont affichées dans une boîte de message. Dans le cas contraire, un message d'erreur est affiché.
Voici un exemple d'exécution de cette page :

Exécution de la fonction $.ajax() pour récupérer des données sur le serveur
Exécution de la fonction $.ajax() pour récupérer des données sur le serveur

Que pensez-vous de la fonction $.ajax() ? Personnellement, j'ai tendance à lui préférer la méthode load() et les fonctions $.get(), $.post(), $.getScript() et $.getJSON(). Mais ce n'est qu'une affaire de goût ! Peut-être préférerez-vous vous concentrer sur une seule fonction pour toutes vos requêtes AJAX plutôt que d'apprendre à utiliser plusieurs méthodes et fonctions.

Événements associés à une requête AJAX

Dans la section précédente, vous avez appris à utiliser la fonction success() pour exécuter du code lorsqu'une requête AJAX a abouti, et la fonction error() pour exécuter du code lorsqu'une requête AJAX n'a pas abouti. Dans cette section, vous allez découvrir une autre technique permettant d'exécuter du code à différentes étapes de l'exécution d'une requête AJAX. Cette technique repose sur la mise en place de méthodes de gestion événementielle. Le tableau suivant donne un aperçu des méthodes utilisables :

Méthode

Événement

$(document).ajaxSend(function(ev, req, options))

Requête sur le point d'être envoyée

$(document).ajaxStart(function())

Début d'exécution de la requête

$(document).ajaxStop(function())

Fin de la requête

$(document).ajaxSuccess(function(ev, req, options))

La requête a abouti

$(document).ajaxComplete(function(ev, req, options))

La requête est terminée

$(document).ajaxError(function(ev, req, options, erreur))

La requête n'a pas abouti

… où :

  • ev représente l'événement ;

  • req représente la requête ;

  • options contient les paramètres passés à la requête ;

  • erreur est le nom de l'erreur détectée par jQuery.

Voici un peu de code pour vous aider à comprendre comment utiliser ces méthodes événementielles et dans quel ordre elles sont exécutées :

<button id="action">Lancer la requête AJAX</button><br /><br />
<div id="donnees" style="background-color: yellow"></div><br />
<div id="message"></div>

<script src="jquery.js"></script>
<script>
  $(function() {
    $('#action').click(function() {
      $(document).ajaxStart(function() {
        $('#message').html('Méthode ajaxStart exécutée<br>');
      });
      $(document).ajaxSend(function(ev, req, options){
        $('#message').append('Méthode ajaxSend exécutée, ');
        $('#message').append('nom du fichier : ' + options.url + '<br>');
      });
      $(document).ajaxStop(function(){
        $('#message').append('Méthode ajaxStop exécutée<br>');
      });
      $(document).ajaxSuccess(function(ev, req, options){
        $('#message').append('Méthode ajaxSuccess exécutée<br>');
      });
      $(document).ajaxComplete(function(ev, req, options){
        $('#message').append('Méthode ajaxComplete exécutée<br>');
      });
      $(document).ajaxError(function(ev, req, options, erreur){
        $('#message').append('Méthode ajaxError exécutée, ');
        $('#message').append('erreur : ' + erreur + '<br>');
      });
      $('#donnees').load('affiche.htm');
    });  
  });
</script>

Lorsque le bouton #action est cliqué, plusieurs méthodes de gestion événementielle sont mises en place. Par exemple, la méthode ajaxStart() capture l'événement « début d'exécution de la requête » :

$(document).ajaxStart(function() {
    

Lorsque cet événement est déclenché, un texte est affiché dans la balise <div id="message"> :

$('#message').html('Méthode ajaxStart exécutée<br>');

Les autres méthodes de gestion événementielle sont comparables. Notez simplement l'affichage du nom du fichier dans la méthode ajaxSend() :

$('#message').append('nom du fichier : ' + options.url + '<br>');

Et l'affichage du message d'erreur dans la méthode ajaxError() :

$('#message').append('erreur : ' + erreur + '<br>');

Une fois les méthodes de gestion événementielle définies, le contenu du document affiche.htm est chargé et inséré dans la balise <div id="donnees"> :

$('#donnees').load('affiche.htm');

Le document affiche.htm est élémentaire : il se contente d'afficher un peu de texte dans le document :

Ce texte est affiché par la page affiche.htm

Essayer

Vous devriez obtenir quelque chose ressemblant à la figure suivante.

Cette exécution montre l'ordre dans lequel sont levés les événements en rapport avec la requête AJAX
Cette exécution montre l'ordre dans lequel sont levés les événements en rapport avec la requête AJAX

Essayons de modifier le nom du fichier pour faire référence à un fichier inexistant :

$('#donnees').load('inexistant.htm');

Un clic sur le bouton de commande déclenche l'exécution d'événements légèrement différents, comme le montre la figure suivante.

Le fichier inexistant.htm n'a pas été trouvé, ce qui a déclenché l'événement ajaxError
Le fichier inexistant.htm n'a pas été trouvé, ce qui a déclenché l'événement ajaxError
  • Plusieurs fonctions jQuery vont vous permettre d'aller plus loin avec vos requêtes AJAX. Vous pouvez en particulier envoyer des requêtes HTTP GET et POST au 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().

  • La fonction $.ajax() pourra vous être utile si vous voulez paramétrer finement vos requêtes AJAX. Elle permet de définir plusieurs fonctions de rappel pour réagir à différents événements liés à la requête.

  • Enfin, vous pouvez mettre en place des méthodes de gestion événementielle pour capturer les événements : ajaxSend(), ajaxStart(), ajaxStop(), ajaxSuccess(), ajaxComplete() et ajaxError().

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