XMLHTTPRequest dealing with event

Question

I am performing an Ajax (JQuery) request on a php script which iterates. At each iteration I do an "echo" of the value of the loop counter, encoded in JSon. The goal is to manage the display of a progress bar.

By doing this I hoped to intercept and retrieve each of the counter values in a separate response thanks to the "progress" event. Actually I only have one answer which contains all the counter values. My research always leads me to information about downloading files, which is not my situation.

Maybe I should use the "onreadystatechange" event, but I don't see how to fit it into my code: $ Ajax parameter or separate function? If anyone has an idea to solve my problem.

Here is my JS code

function DiffuseOffre(envoi, tab, paquet, dest) {
//$('#cover-spin').show(0);
$("#xhr-rep").css("display", "block");
var server = '/Admin/Offres/DiffuseOffre.php';
$.ajax({
    url: server,
    type: 'Post',
    dataType: 'json',
    data: {
        envoi: envoi,
        tab: tab,
        paquet: paquet,
        dest: dest
    },
    xhr: function() {
        var xhr = new window.XMLHttpRequest();
        xhr.addEventListener("progress", function(evt) {
            if (evt.lengthComputable) {
                var compteur = evt.text;
                $("#xhr-rep").html(compteur);
            }
        }, false);
        return xhr;
    },
    success: function(msg) {
        //$('#cover-spin').css("display", "none");
        $('#xhr-rep').css("display", "none");
        if (msg.hasOwnProperty('erreur')) {
            $("#dialog-erreur").html(msg.erreur);
            $("#dialog-erreur").dialog("open");
            $("#dialog-erreur").dialog({
                width: '600px',
                title: msg.title
            })
        } else {
            $("#dialog-message").html(msg.message);
            $("#dialog-message").dialog("open");
            $("#dialog-message").dialog({
                width: '600px',
                title: msg.title
            })
            if (paquet == 1) {
                $("#envoi_" + dest).remove();
                $("#diffuser").remove();
            }
            if (msg.hasOwnProperty('encours')) {
                $("#en_cours").html(msg.encours);
            }
            if (msg.hasOwnProperty('fieldset')) {
                $("#" + msg.fieldset).remove();
            }
        }
    }
})

}