XMLHTTPRequest addEventListener - php

Question

I'm using a JQuery Ajax call to send mails.
The php side of this call send mail, one at a time, in a loop.
When the loop is finished it returns some data (message, some html..) to the js script.
It works fine.
To improve the comfort of the user while waiting, I plan to use a progress bar. So I modify both the php side and the js side.
On the php side I include a "return" statement of a mail counter, inside the loop.
On the js side I added a 'xhr' parameter to my Ajax call to listen the returned value of the counter.
HERE is my problem : Js Debug return :
xhr ​<exception>: TypeError
​​​​message: "xhr.responseText.addEventListener is not a function"
I can't add a listener to the vale returned par the counter,
The same result by changing 'responseText' to 'response'.
Is it about 'responseText' or 'addEventListener' ?
Did someone can help ?
The complete JS code :
function DiffuseOffre(envoi, tab, paquet, dest) {
//$('#cover-spin').show(0);
var server = '/Admin/Offres/DiffuseOffre.php';
$.ajax({
url: server,
type: 'Post',
dataType: 'json',
data: {
envoi: envoi,
tab: tab,
paquet: paquet,
dest: dest
},
xhr: function() {
$("#xhr-rep").show(0);
var xhr = new window.XMLHttpRequest();
xhr.response.addEventListener("progress", function(evt) {
$("#xhr-rep").text(evt.text);
})
},
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();
}
}
}
})
}