La méthode $.ajax()

La méthode $.ajax()

  1. Objectifs

    • Connaitre la méthode $.ajax().
  2. $.ajax() et ses paramètres

    • Lorsque l’on envoie une requête HTTP, on demande quelque chose au serveur.
    • Pour spécifier quelle est la ressource ciblée, il faut utiliser le paramètre url de $.ajax() :
    • $("#more_com").click(function(){
       $.ajax({
       url : 'more_com.php' // La ressource ciblée
       });
      });
    • Le fichier PHP exécuté côté serveur s’appelle more_com.php. C’est un lien relatif, le fichier PHP se trouve donc dans le même répertoire que le fichier JavaScript, et le fichier HTML auquel il est lié.
    • Ce code fonctionne, mais il ne fait rien. Pour envoyer des informations au serveur, il faut envoyer une requête de type GET :
    • $("#more_com").click(function(){
      
       $.ajax({
       url : 'more_com.php', // La ressource ciblée
       type : 'GET' // Le type de la requête HTTP
       });
      });

      le type GET est le type que jQuery prend par défaut.

    • On peut faire passer des paramètres avec GET pour les utiliser côté serveur dans l’array $_GET.
    • Pour cela, il faut utiliser le paramètre data :
    • $("#more_com").click(function(){
      
       $.ajax({
       url : 'more_com.php', // La ressource ciblée
       type : 'GET' // Le type de la requête HTTP.
       data : 'utilisateur=' + nom_user;
       });
      
      });
      
    • Du côté serveur, $_GET['utilisateur'] contiendra la valeur de la variable nom_user.
    • Il faut spécifier maintenant le type de données à recevoir de PHP avec dataType. On peut recevoir tout et n’importe quoi : du XML, du HTML, du texte, du JSON… (on utilisera ici du HTML) :
    • $("#more_come").click(function(){
      
       $.ajax({
       url : 'more_com.php', // La ressource ciblée
       type : 'GET', // Le type de la requête HTTP
       /**
       * data n'est plus renseigné, on ne fait plus passer de variable
       */
       dataType : 'html' // Le type de données à recevoir, ici, du HTML
       });
      
      });
    • Pour envoyer des informations au serveur avec une requête HTTP, il faut commencer à spécifier un type POST :
    • $("#envoyer").click(function(){
      
       $.ajax({
       url : 'send_mail.php', // Le nom du script a changé : c'est send_mail.php
       type : 'POST', // Le type de la requête HTTP, ici devenu POST
       dataType : 'html'
       });
      
      });
    • Pour faire passer les variables JavaScript qui contiennent les informations du formulaire au script PHP, il faut utiliser l’argument data :
    • $("#envoyer").click(function(){
      
       $.ajax({
       url : 'send_mail.php',
       type : 'POST', // Le type de la requête HTTP, ici devenu POST
       // On fait passer les variables au script more_com.php
       data : 'email=' + email + '&contenu=' + contenu_mail,
       dataType : 'html'
       });
      
      });



  3. Les paramètres success, error et complete

    1. Le paramètre success
      • jQuery propose un paramètre pour gérer le retour de la fonction $.ajax() en cas de réussite.
      • Le paramètre s’appelle success, et il ne sera exécuté QUE si l’appel AJAX a abouti. Ce paramètre prend en charge une fonction qui sera exécutée :
      • $("#more_com").click(function(){
        
         $.ajax({
         url : 'more_com.php',
         type : 'GET',
         dataType : 'html', // On désire recevoir du HTML
         success : function(code_html, statut){
        // code_html contient le HTML renvoyé
           }
         });
        
        });
        
    2. Le paramètre error
      • L’argument statut est une chaîne de caractère automatiquement générée par jQuery pour donner le statut de la requête.
      • Si l’appel AJAX a rencontré une erreur, le paramètre qui va être employé sera error. Le paramètre exécute une fonction si l’appel AJAX a échoué :
      • $("#more_com").click(function(){
        
         $.ajax({
         url : 'more_com.php',
         type : 'GET',
         dataType : 'html',
         success : function(code_html, statut){
        // success est toujours en place
         },
         error : function(resultat, statut, erreur){
         }
         });
        
        });
      • La fonction exécutée par error prend en charges trois arguments : le résultat, le statut, et l’erreur. Le second argument est le même que pour success, il ne nous sera pas utile. Le premier est un objet XHR renvoyé par jQuery. Le dernier est une exception : vous pouvez ici placer une chaîne de caractère à afficher à votre visiteur si l’appel AJAX n’a pas fonctionné.
    3. Le paramètre complete
      • Un dernier paramètre de $.ajax() : complete, qui va s’exécuter une fois l’appel AJAX effectué.
      • Le paramètre va prendre deux arguments, l’objet resultat dont nous avons parler plus haut ainsi qu’un statut :
      • $("#more_com").click(function(){
        
         $.ajax({
         url : 'more_com.php',
         type : 'GET',
         dataType : 'html',
         success : function(code_html, statut){
         },
         error : function(resultat, statut, erreur){
         },
         complete : function(resultat, statut){
         }
         });
        
        });
      • C’est à l’intérieur de ces fonctions qu’il faut traiter la suite des évènements.
      • Exemple : ajouter les commentaires reçus du serveur à un fil de commentaires sur une page.
      • Imaginons un bloc div portant l’identifiant #commentaires qui contienne les commentaires déjà chargés dans la page. Nous allons y ajouter les commentaires reçus.
      • // On reprend le même id que dans le précédent chapitre
        $("#more_com").click(function(){
        
         $.ajax({
         url : 'more_com.php',
         type : 'GET',
         dataType : 'html',
         success : function(code_html, statut){
         // On passe code_html à jQuery() qui va nous créer l'arbre DOM !
         $(code_html).appendTo("#commentaires");
         },
         error : function(resultat, statut, erreur){
         },
         complete : function(resultat, statut){
         }
         });
        
        });
        
  4. Exemple

    • // Au clic sur le bouton #search je lance la fonction
      $('#search').on('click', function(){
      
          // J'initialise le variable box
          var box = $('#result');
      
          // Je définis ma requête ajax
          $.ajax({
      
              // Adresse à laquelle la requête est envoyée
              url: '../inc/search.php',
      
              // Le délai maximun en millisecondes de traitement de la demande
              timeout: 4000,
      
              // La fonction à apeller si la requête aboutie
              success: function (data) {
                  // Je charge les données dans box
                  box.html(data);
              },
      
              // La fonction à appeler si la requête n'a pas abouti
              error: function() {
                  // J'affiche un message d'erreur
                  box.html("Désolé, aucun résultat trouvé.");
              }
      
          });
      
      });



Laisser un commentaire

Abonnez vous à notre chaîne YouTube gratuitement