Was ist der sauberste Weg, um den Fortschritt der JQuery Ajax-Anfrage zu erhalten?

Im Klartext ist Javascript sehr einfach: Sie müssen nur den Rückruf anhängen {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);

Aber ich mache eine Ajax-Site, die HTML-Daten mit JQuery ( $.get()oder $.ajax()) herunterlädt, und ich habe mich gefragt, wie ich den Fortschritt einer Anfrage am besten abrufen kann, um sie mit einem kleinen Fortschrittsbalken anzuzeigen, aber seltsamerweise nicht in der JQuery-Dokumentation etwas Nützliches finden ...

So etwas für $.ajax(allerdings nur 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 hat bereits Versprechen implementiert, daher ist es besser, diese Technologie zu verwenden und die Ereignislogik nicht in optionsParameter zu verschieben. Ich habe ein jQuery-Plugin erstellt, das Fortschrittsversprechen hinzufügt, und jetzt ist es einfach zu verwenden, genau wie andere Versprechen:

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

Schau es dir bei Github an

Ich habe drei verschiedene Möglichkeiten ausprobiert, um die Konstruktion des Ajax-Objekts abzufangen:

1. Mein erster Versuch verwendet xhrFields, aber das erlaubt nur einen Listener, hängt nur an den Download-Fortschritt (nicht an den Upload) und erfordert scheinbar unnötiges Kopieren und Einfügen.
2. Mein zweiter Versuch fügte progressdem zurückgegebenen Versprechen eine Funktion hinzu, aber ich musste meine eigene Reihe von Handlern warten. Ich konnte kein gutes Objekt zum Anhängen der Handler finden, da ich an einem Ort auf das XHR und an einem anderen auf das jQuery XHR zugreifen würde, aber ich hatte nie Zugriff auf das zurückgestellte Objekt (nur dessen Versprechen).
3. Bei meinem dritten Versuch hatte ich direkten Zugriff auf das XHR zum Anhängen von Handlern, musste aber erneut viel Code kopieren und einfügen.
4. Ich habe meinen dritten Versuch abgeschlossen und jQuery's ajaxdurch meinen eigenen ersetzt. Das einzige mögliche Manko ist, dass Sie Ihre eigene xhr()Einstellung nicht mehr verwenden können . Sie können dies berücksichtigen, indem Sie überprüfen, ob options.xhres sich um eine Funktion handelt.

Ich rufe meine promise.progressFunktion tatsächlich auf, xhrProgressdamit ich sie später leicht finden kann. Vielleicht möchten Sie es anders benennen, um Ihre Upload- und Download-Listener zu trennen. Ich hoffe, das hilft jemandem, auch wenn das Originalplakat bereits das bekommen hat, was er brauchte.

(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 verfügt über eine AjaxSetup()Funktion, mit der Sie globale Ajax-Handler wie beforeSendund completefür alle Ajax-Aufrufe registrieren und auf das xhrObjekt zugreifen können, um den gewünschten Fortschritt zu erzielen

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

Ich suchte nach einer ähnlichen Lösung und fand diese voll ausnutzen.

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

}}

und Ihre Serverausgaben

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

Befolgen Sie die Schritte, um den Fortschritt der Ajax-Anforderung anzuzeigen:

1. Erstellen Sie einen Spinner mit HTML und CSS oder verwenden Sie Bootstrap Spinner.
2. Zeigen Sie den Spinner an, wenn der Endbenutzer die AJAX-Daten für die Endlosschleife oder für die Schwellenbegrenzungszeit anfordert.
3. Entfernen Sie nach einem SUCCESS / ERROR-Ergebnis der AJAX-Anfrage den aktuell angezeigten Spinner und zeigen Sie Ihre Ergebnisse an.

Zur Vereinfachung empfehle ich die Verwendung von JS-Klassen zum dynamischen Anzeigen und Ausblenden des Spinners für diesen Zweck.

Ich hoffe das hilft!