Вывод в div через jquery.ajax постепенно, по мере загрузки

#jquery #ajax

Задача - при jquery.ajax-запросе выводить результат в div не тогда, когда он полностью
получен браузером, а по мере его загрузки. Нужно, если данные достаточно объёмные.
Событие success или complete не подходят, т.к. срабатывают уже после полной загрузки
данных.

Собственно, вопрос в том, есть ли вариант реализации? Деление данных на сервере на
части и пулинг - не рассматриваются.

Благодаря ответам (всем спасибо!) разобрался. Решение есть, основано на использовании
объекта jqXHR. Детали - по ссылке http://incode.pro/jquery/ajax-na-praktike-progress-bar-indikator-protsessa-zagruzki.html.
Прогресс-бар меня не интересовал, т.к. было невозможно рассчитать % загрузки, а вот
вывод данных возможен, если использовать свойство target.response объекта, возвращаемого
установленным обработчиком подгрузки. По ходу загрузки нужно лишь выводить в нужный
DOM-элемент тело ответа, которое имеется в target.response, причём целиком, не частями!.
Типа так:

$('#ResultBox').html(evt.target.response)
    

Ответы

Ответ 1

С частью html - всё достаточно просто, хотя и не так безоблачно. Для прогрессбара
используют или тег  (реже ), или создают кастомный из любого понравившегося html-элемента.
Первые два не очень кроссбраузерны, но предусмотренный в них альтернативный текст,
который можно использовать для показа процентов выполнения загрузки, немного исправляет
положение. Со вторым вариантом - приходится повозится в CSS, но это не проблема для
людей знающих. Мы остановимся на первом, т.к. у нас сейчас основная цель - разобраться
с механизмом на JavaScript.

Итак, создадим простую форму для загрузки файла и после поля файла, разместим прогресс-бар,
в котором нас интересуют два атрибута: value - текущее значение и max - максимальное
значение. Так как мы будем использовать проценты, значения будут колебатся от нуля
до ста. Соответственно стартовое значение (value) должно быть "0", а максимальное (max)
- "100":


  

    Файл:
    
    
  
  



В JS пишем код $.ajax запроса и добавляем к параметрам xhr, в callback-функции которого,
мы можем работать с объектом XMLHttpRequest, изменяя или дополняя его поведение, получать
доступ его свойствам и методам, устанавливать свои обработчики событий и т.д.:

$(function(){
    var progressBar = $('#progressbar');
    $('#my_form').on('submit', function(e){
        e.preventDefault();
        var $this = $(this),
            formData = new FormData($this.get(0));
        $.ajax({
            url: $this.attr('action'),  
            type: $this.attr('method'),
            contentType: false,
            processData: false,
            data: formData,
            dataType: 'json',
            xhr: function(){
                // получаем объект XMLHttpRequest
                var xhr = $.ajaxSettings.xhr();
                // добавляем обработчик события progress (onprogress)
                xhr.upload.addEventListener('progress', function(evt){
                    // если известно количество байт
                    if(evt.lengthComputable) { 
                        // высчитываем процент загруженного
                        var percentComplete = Math.ceil(evt.loaded / evt.total * 100);
                        // устанавливаем значение в атрибут value тега 
                        // и это же значение альтернативным текстом для браузеров,
не поддерживающих 
                        progressBar.val(percentComplete).text('Загружено ' + percentComplete
+ '%');
                    }
                }, false);
                return xhr;
            },
            success: function(json){
                if(json){
                    $this.after(json);
                }
            }
        });
    });
});


Что касается серверной части, то там работаем с файлом/файлами, как если бы вы их
загружали обычным способом.

Готово! Теперь, чтобы протестировать на локальной машине, нужно выбрать файл побольше,
иначе загрузка будет происходить практически моментально и работу прогрессбара, вы
попросту не заметите. Что будет в обработчике в этом случае - не важно, главное, чтоб
он был. И не забудьте перед тестированием, установить значение директивы upload_max_filesize
чуть больше, чем загружаемый файл. Для временого изменения - это проще всего сделать
в файле .htaccess, прописав строку:

php_value upload_max_filesize 1000M # вместо 1000 - своё значение


Источник: http://incode.pro/jquery/ajax-na-praktike-progress-bar-indikator-protsessa-zagruzki.html