Использование событий выполнения XHR для мониторинга запроса PHP / MySQL

#php #mysql #ajax #progress #xmlhttprequest

#php #mysql #ajax #прогресс #xmlhttprequest

Вопрос:

Я создал индикатор выполнения, чтобы показать, насколько «продвинулся» запрос XHR, но, похоже, он работает только с методом тестирования, который я использовал, который получал содержимое URL, а затем кодировал его в JSON — это был метод ‘GET’.

 function get_album_percent(token) {
var loadingDlg = document.getElementById('loadingDlg'),
    loadingDlg_title = document.getElementById('loadingDlg_title'),
    loadingDlg_bar = document.getElementById('loadingDlg_bar'),
    xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
    console.log(xhr.readyState);
    if (xhr.readyState == 1) {
        if (!loadingDlg.classList.contains('open')) {
            loadingDlg.classList.add('open');
            loadingDlg.classList.remove('close');
        } else {
            loadingDlg.classList.add('close');
            loadingDlg.classList.remove('open');
        }
        loadingDlg_title.innerHTML = 'Getting Facebook albums...';
    }
    if (xhr.readyState == 3) {
        console.log('3', xhr);
        xhr.onprogress = function(event) {
            console.log('onloadstart, response', event);
            var percent = Math.round((event.loaded/event.total) * 100)   '%';
            loadingDlg_bar.style.width = percent;
        }
    }
}
xhr.open('POST', 'http://mydomain.co.uk/api/facebook/get/userinfo.php?token='   token);
xhr.send(null);
}
  

Однако, когда я использую метод, который я хотел изначально использовать — который получал альбомы Facebook, фотографии и теги пользователей из параметра URL, а затем вставлял их в 3 таблицы с использованием PHP / MySQL — все, что происходит, это запуск readystate 1, затем 2, 3 и 4 запускаются в конце, после того, как произошел xhr.

Есть ли причина для этого? Есть ли какие-либо решения?

Спасибо, Адам С.

Комментарии:

1. Спасибо за отзыв, только что загрузил функцию запроса xhr выше…

2. */ РЕДАКТИРОВАТЬ */ Я думаю, что это как-то связано с тем, когда он получает заголовок, потому что после вызова readystate 2 сразу запускается reaystate 3.