How to use AJAX to show progress of a PHP script without polling

Stratos Provatopoulos

I am currently working as a web developer in Greece for an advertising agency but I consider myself to be an all around technology enthusiast. I like working both front end and back end, so I guess that makes me a full stack developer. You can find me at , Twitter, Linkedin and Facebook

You may also like...

12 Responses

  1. Rolla says:

    thanks for script :)

  2. Hector says:

    You made my day.

  3. That’s nice approach, but you may find useful to see my blog post on how to display task progress using the HTML progress element and ProgressEvent W3C recommendation:

  4. Dustin says:

    This looks like a good idea, but your example keeps throwing an error when parsing the JSON saying: Unexpected token ‘<'.

  5. FlashT says:

    Does not work on Chrome, neither Opera.

  6. fdfds says:

    your exemple breaks with some error

    [XHR STATECHANGE] Exception: SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data

    [XHR] Done

  7. fdfds says:

    and why maintaining variables you dont use, nor send to the client ?

  8. Great post…
    very helpful… thanx.

  9. Justin Mierzejewski says:

    I’ve been searching quite a bit on how to get status updates during an AJAX request. You are one of the very few that suggest utilizing the built-in AJAX states. Why does nobody else suggest using those?

    • Stratos Provatopoulos says:

      Well, the AJAX states are not always respected by web servers, you have to setup apache in a specific way in order to get this to work. In the meanwhile better techniques have emerged so it is not very well known

  10. Pascal Roget says:

    on my test server, you need to flush the buffer manually after each “echo” for this to work.

  11. BilliAlpha says:

    Thanks,great article !
    But beware, sometimes the content sent by the server isn’t a complete line of JSON. It may just be part of it. It also happend’s that there are multiple lines.
    So I used the following code to make sure the content is valid.

    var new_lines = xhr.responseText.split(‘\n’).slice(xhr.next_line);
    for (var lineID in new_lines) {
    var line = new_lines[lineID];
    if (line!=”” && line.endsWith(“}”)) {

    The handleNewResponse function does excatly the same things :

    function handleNewresponse(new_response,xhr) {
    console.log(“[XHR] Content => “+new_response);
    var result = JSON.parse( new_response );

    document.getElementById(“divProgress”).innerHTML = result.lines;
    document.getElementById(‘progressor’).style.width = ((result.lines/8000)*100) + “%”;

    I also added a variable to follow at which line we should start considering the data as new.
    xhr.next_line = 0;

    I hope this code can help some of you.

Leave a Reply

Your email address will not be published. Required fields are marked *