Quel est le moyen le plus propre d'obtenir la progression de la requête JQuery ajax?

En javascript simple, c'est très simple: il suffit de joindre le rappel à {XMLHTTPRequest}.onprogress

var xhr = new XMLHttpRequest();

xhr.onprogress = function(e){
    if (e.lengthComputable)
        var percent = (e.loaded / e.total) * 100;
};

xhr.open('GET', 'http://www...', true);
xhr.onreadystatechange = function() {
    ...
};
xhr.send(null);

mais je fais un site ajax qui télécharge des données html avec JQuery ( $.get()ou $.ajax()) et je me demandais quel est le meilleur moyen d'obtenir la progression d'une requête afin de l'afficher avec une petite barre de progression mais curieusement, je ne suis pas trouver quelque chose d'utile dans la documentation JQuery ...

Quelque chose comme ça pour $.ajax(HTML5 uniquement):

$.ajax({
    xhr: function() {
        var xhr = new window.XMLHttpRequest();
        xhr.upload.addEventListener("progress", function(evt) {
            if (evt.lengthComputable) {
                var percentComplete = evt.loaded / evt.total;
                //Do something with upload progress here
            }
       }, false);

       xhr.addEventListener("progress", function(evt) {
           if (evt.lengthComputable) {
               var percentComplete = evt.loaded / evt.total;
               //Do something with download progress
           }
       }, false);

       return xhr;
    },
    type: 'POST',
    url: "/",
    data: {},
    success: function(data){
        //Do something on success
    }
});

jQuery a déjà implémenté des promesses, il est donc préférable d'utiliser cette technologie et de ne pas déplacer la logique des événements vers le optionsparamètre. J'ai fait un plugin jQuery qui ajoute une promesse de progrès et maintenant il est facile à utiliser comme les autres promesses:

$.ajax(url)
  .progress(function(){
    /* do some actions */
  })
  .progressUpload(function(){
    /* do something on uploading */
  });

Découvrez-le sur github

J'ai essayé trois manières différentes d'intercepter la construction de l'objet Ajax:

1. Ma première tentative a utilisé xhrFields , mais cela ne permet qu'un seul auditeur, ne s'attache qu'à la progression du téléchargement (pas du téléchargement) et nécessite ce qui semble être un copier-coller inutile.
2. Ma deuxième tentative a joint un progress fonction à la promesse retournée, mais j'ai dû maintenir mon propre tableau de gestionnaires. Je n'ai pas pu trouver un bon objet pour attacher les gestionnaires car un endroit où j'accéderais au XHR et un autre j'aurais accès au jQuery XHR, mais je n'ai jamais eu accès à l'objet différé (seulement sa promesse).
3. Ma troisième tentative m'a donné un accès direct au XHR pour attacher des gestionnaires, mais encore une fois, il a fallu beaucoup de copier-coller du code.
4. J'ai terminé ma troisième tentative et remplacé jQuery ajaxpar le mien. Le seul inconvénient potentiel est que vous ne pouvez plus utiliser votre propre xhr()réglage. Vous pouvez permettre cela en vérifiant s'il options.xhrs'agit d'une fonction.

J'appelle ma promise.progressfonction xhrProgressafin de pouvoir la retrouver facilement plus tard. Vous voudrez peut-être lui donner un autre nom pour séparer vos écouteurs de téléchargement et de téléchargement. J'espère que cela aide quelqu'un même si l'affiche originale a déjà ce dont il avait besoin.

(function extend_jQuery_ajax_with_progress( window, jQuery, undefined )
{
var $originalAjax = jQuery.ajax;
jQuery.ajax = function( url, options )
{
    if( typeof( url ) === 'object' )
    {options = url;url = undefined;}
    options = options || {};

    // Instantiate our own.
    var xmlHttpReq = $.ajaxSettings.xhr();
    // Make it use our own.
    options.xhr = function()
    {return( xmlHttpReq );};

    var $newDeferred = $.Deferred();
    var $oldPromise = $originalAjax( url, options )
    .done( function done_wrapper( response, text_status, jqXHR )
    {return( $newDeferred.resolveWith( this, arguments ));})
    .fail( function fail_wrapper( jqXHR, text_status, error )
    {return( $newDeferred.rejectWith( this, arguments ));})
    .progress( function progress_wrapper()
    {
        window.console.warn( "Whoa, jQuery started actually using deferred progress to report Ajax progress!" );
        return( $newDeferred.notifyWith( this, arguments ));
    });

    var $newPromise = $newDeferred.promise();
    // Extend our own.
    $newPromise.progress = function( handler )
    {
        xmlHttpReq.addEventListener( 'progress', function download_progress( evt )
        {
            //window.console.debug( "download_progress", evt );
            handler.apply( this, [evt]);
        }, false );
        xmlHttpReq.upload.addEventListener( 'progress', function upload_progress( evt )
        {
            //window.console.debug( "upload_progress", evt );
            handler.apply( this, [evt]);
        }, false );
        return( this );
    };
    return( $newPromise );
};
})( window, jQuery );

jQuery a une AjaxSetup()fonction qui vous permet d'enregistrer des gestionnaires ajax globaux tels que beforeSendet completepour tous les appels ajax ainsi que vous permet d'accéder à l' xhrobjet pour faire la progression que vous recherchez

http://www.htmlgoodies.com/beyond/php/show-progress-report-for-long-running-php-scripts.html

Je cherchais une solution similaire et j'ai trouvé que celle-ci était pleinement utilisée.

var es;

function startTask() {
    es = new EventSource('yourphpfile.php');

//a message is received
es.addEventListener('message', function(e) {
    var result = JSON.parse( e.data );

    console.log(result.message);       

    if(e.lastEventId == 'CLOSE') {
        console.log('closed');
        es.close();
        var pBar = document.getElementById('progressor');
        pBar.value = pBar.max; //max out the progress bar
    }
    else {

        console.log(response); //your progress bar action
    }
});

es.addEventListener('error', function(e) {
    console.log('error');
    es.close();
});

}

et vos sorties serveur

header('Content-Type: text/event-stream');
// recommended to prevent caching of event data.
header('Cache-Control: no-cache'); 

function send_message($id, $message, $progress) {
    $d = array('message' => $message , 'progress' => $progress); //prepare json

    echo "id: $id" . PHP_EOL;
    echo "data: " . json_encode($d) . PHP_EOL;
    echo PHP_EOL;

   ob_flush();
   flush();
}


//LONG RUNNING TASK
 for($i = 1; $i <= 10; $i++) {
    send_message($i, 'on iteration ' . $i . ' of 10' , $i*10); 

    sleep(1);
 }

send_message('CLOSE', 'Process complete');

Suivez les étapes pour afficher la progression de la requête Ajax:

1. Créez un Spinner en utilisant Html et CSS ou utilisez Bootstrap Spinner.
2. Affichez le Spinner lorsque l'utilisateur final demande les données AJAX pour une boucle infinie ou pour un temps limite de seuil.
3. Ainsi, après un résultat SUCCÈS / ERREUR de la requête AJAX, supprimez le Spinner qui est actuellement affiché et affichez vos résultats.

Pour vous faciliter la tâche, je vous recommande d'utiliser les classes JS pour afficher et masquer dynamiquement le spinner à cet effet.

J'espère que ça aide!