Главная / Прочие материалы > Прогресс выполнения Ajax запроса в jQuery

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

Вторая версия 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.
На этом все :)
1-05-2018, 03:37. Разместил: administrator
Вернуться назад