Главная страница » Прочие материалы » Прогресс выполнения Ajax запроса в jQuery
Опрос
Вы занимаетесь разработкой сайтов?
Выделенные и виртуальные серверы в Европе

Прогресс выполнения Ajax запроса в jQuery

Автор: administrator Дата: 1-05-2018, 03:37 Категория: Прочие материалы
Вторая версия XMLHttpRequest (XMLHttpRequest2) поддерживает события прогресса… для загрузки или скачивания!
Это очень просто реализовать если вам знаком jQuery, пример кода ниже:
$.ajax({
    type: 'POST',
    url: "/",
    dаta: {},
    beforeSend: function(XMLHttpRequest)
    {
        // прогресс загрузки на сервер
        XMLHttpRequest.upload.addEventListener("progress", function(evt){
            if (evt.lengthComputable) {  
                var percentComplete = evt.loaded / evt.total;
                // делать что-то...
            }
        }, false);
        // прогресс скачивания с сервера
        XMLHttpRequest.addEventListener("progress", function(evt){
            if (evt.lengthComputable) {  
                var percentComplete = evt.loaded / evt.total;
                // делать что-то...
            }
        }, false);
    },
    success: function(data){
        // делать что-то при успешном завершении...
    }
});

Для jQuery > 1.5.1
$.ajax({
    xhr: function()
    {
        var xhr = new window.XMLHttpRequest();
        // прогресс загрузки на сервер
        xhr.upload.addEventListener("progress", function(evt){
            if (evt.lengthComputable) {
                var percentComplete = evt.loaded / evt.total;
                // делать что-то...
                console.log(percentComplete);
            }
        }, false);
        // прогресс скачивания с сервера
        xhr.addEventListener("progress", function(evt){
            if (evt.lengthComputable) {
                var percentComplete = evt.loaded / evt.total;
                // делать что-то...
                console.log(percentComplete);
            }
        }, false);
        return xhr;
    },
    type: 'POST',
    url: "/",
    dаta: {},
    success: function(data){
        // делать что-то при успешном завершении...
    }
});


Конечно же никто не мешает использовать чистый XMLHttpRequest, без лишнего jQuery.
На этом все :)
  • Не нравится
  • 0
  • Нравится
Просмотров: 1 763 Напечатать Жалоба
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь. Мы рекомендуем Вам зарегистрироваться либо зайти на сайт под своим именем.
Написать комментарий
Ваше Имя:
Ваш E-Mail:
  • bowtiesmilelaughingblushsmileyrelaxedsmirk
    heart_eyeskissing_heartkissing_closed_eyesflushedrelievedsatisfiedgrin
    winkstuck_out_tongue_winking_eyestuck_out_tongue_closed_eyesgrinningkissingstuck_out_tonguesleeping
    worriedfrowninganguishedopen_mouthgrimacingconfusedhushed
    expressionlessunamusedsweat_smilesweatdisappointed_relievedwearypensive
    disappointedconfoundedfearfulcold_sweatperseverecrysob
    joyastonishedscreamtired_faceangryragetriumph
    sleepyyummasksunglassesdizzy_faceimpsmiling_imp
    neutral_faceno_mouthinnocent
Код: Кликните на изображение чтобы обновить код, если он неразборчив
Введите код: