La méthode $.ajax()

Objectifs

• Connaitre la méthode $.ajax().

$.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
 });
});

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){
    }
    });
   
   });

3. 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é.

4. 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){
    }
    });
   
   });

5. C'est à l'intérieur de ces fonctions qu'il faut traiter la suite des évènements.
6. Exemple : ajouter les commentaires reçus du serveur à un fil de commentaires sur une page.
7. 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){
 }
 });

});

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é.");
        }

    });

});