Получите прогресс & ldquo; get & rdquo; ajax request [duplicate]

Я пробовал три разных способа перехвата конструкции объекта 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) {
            // Download progress
            xmlHttpReq.addEventListener('progress', function download_progress(evt) {
                // window.console.debug( "download_progress", evt );
                handler.apply(this, [evt]);
            }, false);

            // Upload progress
            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 для достижения прогресса, который вы ищете

Что-то вроде этого для $.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

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