Ajax (version promesse)

Ci dessous figure un autre version  du script "index.js" présenté dans le billet ajax du site. Celle-ci lui est équivalente mais elle utilise les méthodes  done(), fail() et always() de l'objet promesse jqXHR (jQuery XMLHTPRequest) rendu par la fonction $.ajax() dans les versions récentes de jQuery.

Une lecture de la page d'introduction : "les promesses" est indispensable pour la compréhension de ce billet.

Billet créé le :
15 mai 2024
Dernière MAJ :
03 Juil 2024

done()

done() prend pour unique paramètre, une fonction dont le but est la gestion des donnés collectées par $.ajax()  et dont les arguments sont dans l'ordre :

  1. la valeur de la propriété interne "result"  de la promesse renvoyée par $.ajax() en cas de succès. Pour que  le code soit plus facilement lisible, ce paramètre est souvent appelé "data" ou "response".
  2. le status de la requête, souvent nommé "textStatus", dont les valeurs pourront être :
    1. "timeout"
    2. "error"
    3. "notmodified"
    4. "success"
    5. "parsererror"
  3. la référence de l'objet promesse, souvent nommé "jqXHR". Ci-dessous quelques propriétés de cet objet :
    1. readyState (un entier de 0 à 4)
      1. UNSENT
      2. OPENED
      3. HEADERS_RECEIVED
      4. LOADING
      5. DONE
    2. responseText ou responseJSON pour les data
    3. getAllResponseHeaders()

Le code ci-dessous, en cas de réussite de la fonction $.ajax(), affichera "success" dans la console du navigateur et ajoutera le résultat de la requête dans le bloc identifié "test2" de la page affichée par le navigateur.

.done(function(data, textStatus, jqXHR ){
        var rows = data;
        console.log ('dans ajaxSuccess : ' + textStatus);
        for (var i in rows) {
            $("#test2").append(
                rows[i].NumClasse
                + " : " +rows[i].NomClasse
                + " : " + " : " + rows[i].Libelle  + '<br/>');
        };})

Noter que les noms donnés aux paramètres de "function" sont sans importance, on aurait pu écrire

.done(function(reponse, status, p ){
   var rows = reponse;
   ...}

ou encore (mais c'est stupide car impossible à maintenir)

.done(function(a, b, c ){
   var rows = a;
   ...}

 

fail()

fail() prend pour unique paramètre, une fonction dont le but est la gestion des erreurs  et qui a pour arguments :

  • jqXHR
  • textStatus
  • error : le résultat renvoyé par $.ajax() en cas d'échec.

always()

always() prend pour unique paramètre, une fonction dont les arguments sont :

  • en cas de succès, les mêmes arguments que done() :
    • data
    • textStatus
    • jqXHR
  • en cas d'échec, les mêmes arguments que fail() :
    • jqXHR
    • textStatus
    • error.

 

Cliquez sur le bouton pour copier le code dans le presse papier  
    
  /*
* index.js script pour index.php
*/
$(function(){
   // ma fonction
    $.listeTest = function(operation, name) {
        console.log ('dans listeEtudiant : operation = ' + operation );
        var jqXHR = $.ajax({
            method: 'POST',
            url: '../ajaxTest.php',
             extra: 'listeTest',
            data: {
                op  : operation,
                nom : name,
            },
            dataType: 'json',
            beforeSend: function(jqXHR,settings){
                $("#loading").show();
                $("#test").append("</br>Déclenché par ajaxSend:</br> -->lancement de la requete : " +  settings.url  ); 
                },
        })
        .done(function(data, textStatus, jqXHR ){
                var rows = data;
                console.log ('dans ajaxSuccess : ' + textStatus);
                //if (settings.extra == 'listeTest'){
                    for (var i in rows) {
                        $("#test2").append(rows[i].NumClasse + " : " +rows[i].NomClasse + " : " + " : " + rows[i].Libelle  + '<br/>');
                //    }}
                    };
                }
        )
        .fail(function(jqXHR, textStatus, err ){
                console.log("dans ajaxError : "+ textStatus);
                console.log("dans ajaxError : "+ err);
                alert(
                    "dans ajaxError :\n   -->textStatus : " 
                    + textStatus 
                    + "\n-->erreur : \n" + err);
                }
        )
        .always(function(a, textStatus, b ){
                var RS=["UNSENT","OPENED","HEADERS_RECEIVED","LOADING","DONE"];
                $("#loading").hide();
                if (textStatus == "error"){
                    // a : jqXHR b: err  cf fail
                    $("#test").append(
                        "</br>Déclenché par ajaxComplete:</br> -->readyState: </br>"
                        +RS[a.readyState]
                        +"</br> -->responseText: </br>"
                        +a.responseText
                        +"</br> -->headers: </br>"
                        +a.getAllResponseHeaders()
                        );
                } 
                else {
                    // a : les données et b : jqXHR   cf done
                    $("#test").append(
                        "</br>Déclenché par ajaxComplete:</br> -->readyState: </br>"
                        +RS[b.readyState]
                        +"</br> -->responseText: </br>"
                        +b.responseText
                        +"</br> -->headers: </br>"
                        +b.getAllResponseHeaders()
                        );
                }}
        );
        return true;
    };
   //fin ma fonction
    $("#loading").hide();    
    $('#btnSubmit').on('click', function(e) {
        $.listeTest('selectClasse','abcdefcghiklmnopqrstuvwxyz');
    });
});