Який найчистіший спосіб досягти прогресу запиту JQuery ajax?

У звичайному javascript дуже просто: потрібно просто прикріпити зворотний дзвінок до {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);

але я роблю сайт ajax, який завантажує HTML-дані за допомогою JQuery ( $.get()або $.ajax()), і мені було цікаво, який найкращий спосіб отримати хід запиту, щоб відобразити його з невеликою смугою прогресу, але цікаво, я не знайти що-небудь корисне в документації JQuery ...

Щось подібне для $.ajax(лише 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 вже реалізував обіцянки, тому краще використовувати цю технологію, а не переміщувати логіку подій до optionsпараметра. Я створив плагін jQuery, який додає обіцянку прогрес, і тепер його легко використовувати так само, як і інші обіцянки:

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

Перевірте це в github

Я спробував про три різні способи перехоплення конструкції об'єкта Ajax:

1. Моя перша спроба, що використовується xhrFields, але це дозволяє лише одному слухачеві, додає лише для завантаження (не завантаження) прогрес і вимагає того, що здається непотрібним копіювати та вставляти.
2. Моя друга спроба додала: progress функцію до повернутої обіцянки, але мені довелося підтримувати власний масив обробників. Я не зміг знайти хороший об’єкт, щоб приєднати обробники, тому що одне місце я отримав би доступ до XHR, а інше я отримав би доступ до jQuery XHR, але я ніколи не мав доступу до відкладеного об'єкта (лише його обіцянка).
3. Моя третя спроба дала мені прямий доступ до XHR для приєднання обробників, але знову вимагало багато копіювати та вставляти код.
4. Я завершив свою третю спробу і замінив jQuery на ajaxсвою. Єдиний потенційний недолік - ви більше не можете використовувати власні xhr()налаштування. Ви можете дозволити це, перевіривши, чи options.xhrє функцією.

Я фактично називаю свою promise.progressфункцію, xhrProgressщоб потім її легко було знайти. Ви можете назвати щось інше, щоб розділити слухачів, які завантажують і завантажують. Я сподіваюся, що це допоможе комусь, навіть якщо оригінальний афіша вже отримав те, що йому потрібно.

(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 має AjaxSetup()функцію, яка дозволяє реєструвати глобальні обробники ajax, такі як beforeSendі completeдля всіх дзвінків ajax, а також дозволяє вам отримати доступ до xhrоб'єкта, щоб досягти прогресу, який ви шукаєте

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

Я шукав подібне рішення і знайшов це повне використання.

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

}

і ваші серверні виходи

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

Виконайте кроки, щоб відобразити хід запиту на Ajax:

1. Створіть Spinner за допомогою Html & CSS або використовуйте Sputner Bootstrap.
2. Відобразить Spinner, коли кінцевий користувач запитує дані AJAX для нескінченного циклу або для граничного граничного часу.
3. Отже, після результату ЗАВДАННЯ / ПОМИЛКИ запиту AJAX, видаліть Spinner, який наразі відображається, та покажіть свої результати.

Для зручності я рекомендую для цього використовувати класи JS для динамічного відображення та приховування прядильника.

Сподіваюся, це допомагає!