Médiaforma

All posts tagged ajax

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Requête post $.ajax()</title>
    <style>
      #zone {
        width: 300px;
        height: 315px;
        border-style: solid;
        border-width: 3px;
        border-color: black;
      }
    </style>
  </head>
  <body>
    <script src="jquery.js"></script>
    <h2>Les lois de la robotique, selon Isaac Asimov</h2>
    <button id="loi1">Loi N° 1</button>
    <button id="loi2">Loi N° 2</button>
    <button id="loi3">Loi N° 3</button><br><br>
    <div id="zone"></div>
    <script>
      $(function() {
        $('#loi1').on('click', function(){
          $.ajax({
            type: 'POST',
            url: 'donneesPost.php',
            data: {l:'1'},
            timeout: 3000,
            success: function(data){
              $('#zone').html(data);
            },
            error: function(){
              $('#zone').html('Cette requête AJAX n\'a pas abouti');
            }
          });
        });
        $('#loi2').on('click', function(){
          $.ajax({
            type: 'POST',
            url: 'donneesPost.php',
            data: {l:'2'},
            timeout: 3000,
            success: function(data){
              $('#zone').html(data);
            },
            error: function(){
              $('#zone').html('Cette requête AJAX n\'a pas abouti');
            }
          });
        });
        $('#loi3').on('click', function(){
          $.ajax({
            type: 'POST',
            url: 'donneesPost.php',
            data: {l:'3'},
            timeout: 3000,
            success: function(data){
              $('#zone').html(data);
            },
            error: function(){
              $('#zone').html('Cette requête AJAX n\'a pas abouti');
            }
          });
        });
      });
    </script>
  </body>
</html>

Ce code est accessible ici : https://www.mediaforma.com/encours/postAjax.htm


<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Requête get $.ajax()</title>
    <style>
      #zone {
        width: 300px;
        height: 315px;
        border-style: solid;
        border-width: 3px;
        border-color: black;
      }
    </style>
  </head>
  <body>
    <script src="jquery.js"></script>
    <h2>Les lois de la robotique, selon Isaac Asimov</h2>
    <button id="loi1">Loi N° 1</button>
    <button id="loi2">Loi N° 2</button>
    <button id="loi3">Loi N° 3</button><br><br>
    <div id="zone"></div>
    <script>
      $(function() {
        $('#loi1').on('click', function(){
          $.ajax({
            type: 'GET',
            url: 'donnees.php?l=1',
            timeout: 3000,
            success: function(data){
              $('#zone').html(data);
            },
            error: function(){
              $('#zone').html('Cette requête AJAX n\'a pas abouti');
            }
          });
        });
        $('#loi2').on('click', function(){
          $.ajax({
            type: 'GET',
            url: 'donnees.php?l=2',
            timeout: 3000,
            success: function(data){
              $('#zone').html(data);
            },
            error: function(){
              $('#zone').html('Cette requête AJAX n\'a pas abouti');
            }
          });
        });
        $('#loi3').on('click', function(){
          $.ajax({
            type: 'GET',
            url: 'donnees.php?l=3',
            timeout: 3000,
            success: function(data){
              $('#zone').html(data);
            },
            error: function(){
              $('#zone').html('Cette requête AJAX n\'a pas abouti');
            }
          });
        });
      });
    </script>
  </body>
</html>

Le code est bien plus “verbeux” qu’avec la fonction $.get(), mais il est aussi très simple à comprendre, facile à maintenir et plus complet. Ici, nous avons introduit un message d’erreur si la requête n’aboutit pas :

error: function(){
  $('#zone').html('Cette requête AJAX n\'a pas abouti');
}

Ce code est accessible ici : https://www.mediaforma.com/encours/getAjax.htm


La fonction $.ajax() permet d’émettre des requêtes AJAX. Elle admet de très nombreux paramètres. Pour avoir une description exhaustive de cette fonction, reporte-vous à la documentation en ligne : http://api.jquery.com/jQuery.ajax/.

Dans cette formation, nous utiliserons l’une des syntaxes de la fonction $.ajax() :

$.ajax(options);

Où options peut contenir les éléments suivants :

  • 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

A titre d’exemple, nous allons réécrire les programmes get.htm et post.htm pour utiliser la fonction $.ajax() à la place des fonctions $.get() et $.post().


La méthode load() n’est pas la seule à pouvoir récupérer des données via AJAX. Vous pouvez également utiliser :

  • la fonction jQuery $.get() pour obtenir des données envoyées par le serveur en utilisant une requête HTTP GET.
  • la fonction jQuery $.post() pour obtenir des données envoyées par le serveur en utilisant une requête HTTP POST.

Vous utiliserez la fonction $.get() si les données envoyées au serveur sont de petite taille. Vous utiliserez la fonction $.post() si les données envoyées au serveur sont de grande taille ou contiennent des informations confidentielles (des mots de passe par exemple).

 

Voici la syntaxe de la fonction $.get() :

$.get(URL, function() {
  // Une ou plusieurs instructions exécutées lorsque les données ont été rapatriées
});

 

A titre d’exemple, nous allons exécuter un fichier PHP afin d’extraire les données qui y sont stockées. Ces données correspondent aux trois lois de la robotique d’Isaac Asimov. L’URL passée sera du type suivant :

donnees?l=1 // pour obtenir la première loi
donnees?l=2 // pour obtenir la deuxième loi
donnees?l=3 // pour obtenir la troisième loi

 

Voici le code du fichier PHP :

<?php
  $loi = array("Un robot ne peut porter atteinte à un être humain, ni, restant passif, permettre qu'un être humain soit exposé au danger.",
               "Un robot doit obéir aux ordres que lui donne un être humain, sauf si de tels ordres entrent en conflit avec la Première loi.",
               "Un robot doit protéger son existence tant que cette protection n'entre pas en conflit avec la Première ou la Deuxième loi.");
  $l=$_GET["l"];
  echo "<u>Loi de la robotique N° ".$l."</u><br><br>";
  echo "<b>".$loi[$l-1]."</b>";
?>

 

Les premières lignes définissent le tableau $loi et y mémorisent les trois lois de la robotique.

La valeur passée dans l’URL est récupérée et stockée dans la variable $l :

$l=$_GET["l"];

 

L’instruction suivante affiche un texte souligné :

echo "<u>Loi de la robotique N° ".$l."</u><br><br>";

 

Et la dernière instruction affiche la loi extraite du tableau $loi :

echo "<b>".$loi[$l-1]."</b>";

 

 

 

Voici le résultat obtenu lorsque l’utilisateur clique sur le premier bouton :

 

 

Et voici le code HTML5/jQuery utilisé :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Requête AJAX $.get()</title>
    <style>
      #zone {
        width: 300px;
        height: 315px;
        border-style: solid;
        border-width: 3px;
        border-color: black;
      }
    </style>
  </head>
  <body>
    <script src="jquery.js"></script>
    <h2>Les lois de la robotique, selon Isaac Asimov</h2>
    <button id="loi1">Loi N° 1</button>
    <button id="loi2">Loi N° 2</button>
    <button id="loi3">Loi N° 3</button><br/>
    <div id="zone"></div>
    <script>
      $(function() {
        $('#loi1').on('click', function(){
          $.get('donnees.php?l=1',function(data){
            $('#zone').html(data);
          });
        });
        $('#loi2').on('click', function(){
          $.get('donnees.php?l=2',function(data){
            $('#zone').html(data);
          });
        });
        $('#loi3').on('click', function(){
          $.get('donnees.php?l=3',function(data){
            $('#zone').html(data);
          });
        });
      });
    </script>
  </body>
</html>

 

Le corps du document définit un titre H2, trois boutons et un élément div d’id #zone.

<h2>Les lois de la robotique, selon Isaac Asimov</h2>
<button id="loi1">Loi N° 1</button>
<button id="loi2">Loi N° 2</button>
<button id="loi3">Loi N° 3</button><br/>
<div id="zone"></div>

 

Lorsque le premier bouton est cliqué, une requête GET est effectuée sur l’URL https://www.mediaforma.com/encours/donnees.php?l=1 :

$('#loi1').on('click', function(){
  $.get('donnees.php?l=1',function(data){

 

Lorsque les données ont été rapatriées, la fonction callback s’exécute. Les données récupérées sont affichées dans l’élément div #zone :

$('#zone').html(data);

 

Les deux autres boutons ont un comportement similaire, à ceci près qu’ils envoient (respectivement) les paramètres l=2 et l=3 au programme PHP. Ceci afin d’afficher la deuxième et la troisième loi de la robotique.

Cet exemple est accessible à partir de l’URL suivante : https://www.mediaforma.com/encours/get.htm


En ajoutant un deuxième paramètre à la méthode load(), il est possible de limiter le chargement de données en utilisant un sélecteur jQuery :

load('URL sélecteur', function() {
  //une ou plusieurs instructions exécutées après le chargement des données
});
URL est l'URL de l'élément à charger et sélecteur est un sélecteur jQuery sans le signe $ et sans les parenthèses.

 

Exercice

En partant du code de l’exemple précédent (load.htm), insérer trois boutons dans le corps du document et associez-leur un gestionnaire d’événement qui charge les parties #p1, #p2 et #p3 de ce document (texte2.htm) :

<!DOCTYPE html>
<html>
  <head>
    <title>Texte</title>
  </head>
  <body>
    <p id="p1">
    <font size="3"><i>Lorem <b>ipsum</b> dolor sit amet, consectetur adipiscing elit. Sed non
    risus. Lectus tortor, dignissim sit amet, adipiscing nec,
    ultricies sed, dolor. Cras elementum ultrices diam. Maecenas
    ligula massa, varius a, semper congue, euismod non, mi. Proin
    porttitor, orci nec nonummy molestie, enim est eleifend mi, non
    fermentum diam nisl sit amet erat. Duis semper.</i></font>
    </p>

    <p id="p2">
    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. Nemo enim ipsam voluptatem quia voluptas
    sit aspernatur aut odit aut fugit, sed quia consequuntur magni
    dolores eos qui ratione voluptatem sequi nesciunt.
    </p>

    <p id="p3">
    Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet,
    consectetur, adipisci velit, sed quia non numquam eius modi tempora
    incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
    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?
    </p>
  </body>
</html>

 

Solution

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Chargement AJAX avec load()</title>
    <style>
      #zone {
        width: 300px;
        height: 315px;
        border-style: solid;
        border-width: 3px;
        border-color: black;
      }
    </style>
  </head>
  <body>
    <script src="jquery.js"></script>
    <button id="charge-texte1">Charger le texte #p1</button>
    <button id="charge-texte2">Charger le texte #p2</button>
    <button id="charge-texte3">Charger le texte #p3</button>
    <div id="zone"></div>
    <script>
      $(function() {
        $('#charge-texte1').on('click', function(){
          $('#zone').load('texte2.htm #p1');
        });
        $('#charge-texte2').on('click', function(){
          $('#zone').load('texte2.htm #p2');
        });
        $('#charge-texte3').on('click', function(){
          $('#zone').load('texte2.htm #p3');
        });
      });
    </script>
  </body>
</html>

Pour mettre à jour un élément sur une page Web en utilisant des données stockées sur le serveur, le plus simple consiste à utiliser la méthode jQuery load() :

load('URL de l'élément', function() {

//une ou plusieurs instructions exécutées après le chargement des données

});

 

La fonction callback est facultative. Si elle est présente, les instructions qui la composent seront exécutées lorsque le fichier aura été entièrement rapatrié par la méthode load().

A titre d’exemple, ce document (load.htm) contient deux boutons et un élément div. Le premier bouton va être utilisé pour afficher un texte dans l’élément div et le deuxième pour afficher une image dans ce même élément :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Chargement AJAX avec load()</title>
    <style>
      #zone {
        width: 300px;
        height: 315px;
        border-style: solid;
        border-width: 3px;
        border-color: black;
      }
    </style>
  </head>
  <body>
    <script src="jquery.js"></script>
    <button id="charge-texte">Charger le texte</button>
    <button id="charge-image">Charger l'image</button><br/><br/>
    <div id="zone"></div>
    <script>
      $(function() {
        $('#charge-texte').on('click', function(){
          $('#zone').load('texte.htm');
        });
        $('#charge-image').on('click', function(){
          $('#zone').load('image.htm');
        });
      });
    </script>
  </body>
</html>

 

Dans cet exemple, aucune fonction callback n’étant spécifiée dans les paramètres de la méthode load(), cette dernière se contente de charger les fichiers HTML correspondants et de les afficher dans l’élément div.

Voici le code du fichier texte.htm :

<!DOCTYPE html>
<html>
  <head>
    <title>Texte</title>
  </head>
  <body>
    <p>
    <font size="3"><i>Lorem <b>ipsum</b> dolor sit amet, consectetur adipiscing elit. Sed non
    risus. Lectus tortor, dignissim sit amet, adipiscing nec,
    ultricies sed, dolor. Cras elementum ultrices diam. Maecenas
    ligula massa, varius a, semper congue, euismod non, mi. Proin
    porttitor, orci nec nonummy molestie, enim est eleifend mi, non
    fermentum diam nisl sit amet erat. Duis semper.</i></font>
    </p>
  </body>
</html>

Et voici le code du fichier image.htm :

<!DOCTYPE html>
<html>
  <head>
    <title>Image</title>
    <style type="text/css">
      p { text-align: center;}
    </style>
  </head>
  <body>
    <p><img src="chat.jpg"></p>
  </body>
</html>

Dans un site Web traditionnel (non AJAX), lorsque l’utilisateur demande l’affichage d’une nouvelle page, par exemple en cliquant sur un lien hypertexte, une requête http est envoyée au serveur. Ce dernier retourne une page HTML et des règles de mise en forme CSS qui sont interprétées dans le navigateur pour afficher la nouvelle page.

Dans un site Web qui exploite la technologie AJAX, il est possible de mettre à jour une partie d’une page et non la page entière. Le client envoie une requête http au serveur pour obtenir les données souhaitées. Les données sont envoyées au client. Ces données sont reçues par le client et le moteur AJAX les envoie dans l’élément qui doit les recevoir sans toucher au reste de la page.