Qual è il modo più pulito per ottenere lo stato di avanzamento della richiesta ajax di JQuery?

In chiaro javascript è molto semplice: basta allegare il callback a {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);

ma sto facendo un sito ajax che scarica dati html con JQuery ( $.get()o $.ajax()) e mi chiedevo quale sia il modo migliore per ottenere lo stato di avanzamento di una richiesta in modo da visualizzarlo con una piccola barra di avanzamento ma curiosamente non lo sono trovare qualcosa di utile nella documentazione di JQuery ...

Qualcosa di simile per $.ajax(solo HTML5 però):

$.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 ha già implementato le promesse, quindi è meglio usare questa tecnologia e non spostare la logica degli eventi sul optionsparametro. Ho creato un plugin jQuery che aggiunge promesse di progresso e ora è facile da usare proprio come altre promesse:

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

Dai un'occhiata su GitHub

Ho provato tre diversi modi per intercettare la costruzione dell'oggetto Ajax:

1. Il mio primo tentativo è stato utilizzato xhrFields, ma questo consente solo un ascoltatore, si collega solo all'avanzamento del download (non del caricamento) e richiede ciò che sembra non necessario copia e incolla.
2. Il mio secondo tentativo ha associato una progressfunzione alla promessa restituita, ma ho dovuto mantenere il mio array di gestori. Non sono riuscito a trovare un buon oggetto per collegare i gestori perché un posto avrei accesso a XHR e un altro avrei avuto accesso a jQuery XHR, ma non ho mai avuto accesso all'oggetto differito (solo la sua promessa).
3. Il mio terzo tentativo mi ha dato accesso diretto all'XHR per collegare i gestori, ma ancora una volta ho richiesto molto codice di copia e incolla.
4. Ho concluso il mio terzo tentativo e ho sostituito jQuery ajaxcon il mio. L'unico potenziale difetto è che non puoi più utilizzare le tue xhr()impostazioni. Puoi permetterlo controllando se options.xhrè una funzione.

In realtà chiamo la mia promise.progressfunzione in xhrProgressmodo da poterla trovare facilmente in seguito. Potresti dargli un altro nome per separare i tuoi listener di upload e download. Spero che questo aiuti qualcuno anche se il poster originale ha già ottenuto ciò di cui aveva bisogno.

(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 ha una AjaxSetup()funzione che ti consente di registrare gestori ajax globali come beforeSende completeper tutte le chiamate ajax e ti consente di accedere xhrall'oggetto per fare i progressi che stai cercando

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

Stavo cercando una soluzione simile e ho trovato questo completo.

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

}

e gli output del tuo server

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');

Segui i passaggi per visualizzare lo stato di avanzamento della richiesta Ajax:

1. Crea uno Spinner usando Html e CSS o usa Bootstrap Spinner.
2. Visualizza lo Spinner quando l'utente finale richiede i dati AJAX per il ciclo infinito o per il tempo limite di soglia.
3. Quindi, dopo un risultato SUCCESS / ERROR della richiesta AJAX, rimuovere lo Spinner attualmente visualizzato e mostrare i risultati.

Per semplificare, ti consiglio di utilizzare le classi JS per visualizzare e nascondere dinamicamente lo spinner a questo scopo.

Spero che aiuti!