Get Progress of PHP Script using jQuery.ajax - php

Question

I am using jQuery's ajax to run a php script with the below:
jQuery.ajax({
type: "POST",
url: "my_php_script.php",
success: function( response ) {
console.log(response);
},
error: function(){
console.log('error is...');
}
});
my_php_script.php loops through an array and on each product runs a function:
$count = count($array);
$i = 0;
foreach ($array as $item) {
myFunction($item);
$i++;
if($i == $count){
echo json_encode('all done and a success');
}
}
This all works but the script can generally take around 2-3 minutes to finish so I need to show the progress for the viewer whilst it runs. How can i do this?
I can get the percent of the loop by adding
$percent = intval($i/$count * 100)."%";
echo json_encode($percent);
into my php loop as so:
$count = count($array);
$i = 0;
foreach ($array as $item) {
myFunction($item);
$percent = intval($i/$count * 100)."%";
echo json_encode($percent);
$i++;
if($i == $count){
echo json_encode('all done and a success');
}
}
But how can i get this value in my jQuery ajax call?

Answer 1

$.ajax({
url: path,
xhrFields: {
onprogress: function (e) {
}
},
success: function (response) {
}
});
Found this example hope it helps.

Answer 2

Got this working in the end by writing the percentage in a uniquely named text file as so in my array loop:
$percent = intval($i/$count * 100)."%";
$_text = file_get_contents($_file);
$_text = $percent;
file_put_contents($_file, $_text);
And then in my html page i check the contents of the file every 2 seconds by:
jQuery.get('file.txt?'+new Date(), function(data) {
console.log(data);
}, 'text');
I'm sure this isn't the best way of doing so but to get this working in a limited time period it's all i could come up with. Hope it helps anyone else