Qual é a maneira mais limpa de obter o progresso da solicitação JQuery ajax?

Em javascript puro é muito simples: basta anexar o retorno de chamada para {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);

mas estou fazendo um site ajax que baixa dados html com JQuery ( $.get()ou $.ajax()) e queria saber qual é a melhor maneira de obter o andamento de uma solicitação para exibi-la com uma pequena barra de progresso, mas curiosamente, não estou encontrando algo útil na documentação JQuery ...

Algo assim para $.ajax(embora apenas HTML5):

$.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 já implementou promessas, então é melhor usar essa tecnologia e não mover a lógica de eventos para optionsparâmetro. Fiz um plugin jQuery que adiciona promessa de progresso e agora é fácil de usar, assim como outras promessas:

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

Confira no github

Tentei três maneiras diferentes de interceptar a construção do objeto Ajax:

1. Minha primeira tentativa usada xhrFields, mas que permite apenas para um ouvinte, apenas anexa para download (não upload) progresso e requer o que parece ser copiar e colar desnecessário.
2. Minha segunda tentativa anexou uma progressfunção à promessa retornada, mas tive que manter minha própria matriz de manipuladores. Não consegui encontrar um bom objeto para anexar os manipuladores porque um lugar teria acesso ao XHR e outro ao jQuery XHR, mas nunca tive acesso ao objeto adiado (apenas sua promessa).
3. Minha terceira tentativa me deu acesso direto ao XHR para anexar manipuladores, mas novamente exigiu muito código de copiar e colar.
4. Concluí minha terceira tentativa e substituí a do jQuery pela ajaxminha. A única deficiência potencial é que você não pode mais usar sua própria xhr()configuração. Você pode permitir isso verificando se options.xhré uma função.

Na verdade, chamo minha promise.progressfunção xhrProgresspara que possa encontrá-la facilmente mais tarde. Você pode querer dar outro nome para separar seus ouvintes de upload e download. Espero que isso ajude alguém, mesmo que o autor da postagem original já tenha o que precisava.

(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 tem uma AjaxSetup()função que permite registrar manipuladores globais de ajax, como beforeSende completepara todas as chamadas de ajax, bem como permite que você acesse o xhrobjeto para fazer o progresso que você está procurando

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

Eu estava procurando por uma solução semelhante e encontrei este uso 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 as saídas do seu servidor

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

Siga as etapas para exibir o andamento da solicitação Ajax:

1. Crie um Spinner usando Html e CSS ou use Bootstrap Spinner.
2. Exibe o Spinner quando o usuário final está solicitando os Dados AJAX para loop infinito ou para limite de tempo.
3. Portanto, após um resultado de SUCCESS / ERROR de AJAX Request, remova o Spinner que está sendo exibido no momento e mostre seus resultados.

Para facilitar, eu recomendo que você use classes JS para exibir e ocultar dinamicamente o botão giratório para essa finalidade.

Eu espero que isso ajude!