jQuery $.ajax & PHP Email Progress Indicator

Question

I am developing a custom emailing system for one of my clients as an add on for the CMS I built that I give to my clients. I am using jQuery Ajax to send all the information to a PHP file that formats the email, sends a query to MySQL to get all the email address from the database, and the sends the emails using the mail(). This takes some time to do, and I am wanting the jQuery ajax to display a progress bar for each time the PHP script sends an email. I have searched for something that is similar to success: function() that receives data from the PHP script through JSON allowing jquery to update the progress of the emailing.

Does anyone have a suggestion for this? Something like this is preferable:

 $.ajax({
      type: "POST",
      url: "example.com",
      data: {"test":"test","tester":"tester"},
      PROGRESS: function(data){
        $("div").html(data);
      },
      success: function(r){
        alert(r);
      }
    });

});

Answer 1

You can use the xhr object and attach an event listener to the progress event

$.ajax({
    //...
    xhr: function() {
        var xhr = new window.XMLHttpRequest();
        xhr.addEventListener("progress", function(e) {
            var p = e.loaded / e.total;
            // update your progress bar here..
        });
        return xhr;
    }
})

Answer 2

You will need to wrap this inside of a setInterval() function. You can search for AJAX Polling. But the idea here is that you cannot send information back periodically from the same PHP script while it is running, the success callback is only triggered ONCE, after the script has finished.