Using XHR's progress events to monitor PHP/MySQL query

I have made a progress bar to show how much 'progress' an XHR request has made, but it only seems to work with the testing method I used which got a URL's content then JSON encoded it - this was a 'GET' method.

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);
    开发者_Python百科    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);
}

However when I use the method I wanted to originally use - which got a Facebook users albums, photos and tags from a URL paramter then inserted them into 3 tables using PHP/MySQL - all that happens is that readystate 1 is fired, then 2, 3 and 4 is fired at the end, after the xhr has happened.

Is there a reason for this? Are there any solutions?

Thanks, Adam C.