Question

I am calling a script using ajax. I want to show the progress of script execution on the page.

I mean I want to display the following messages in a div progressively:

//after execution of section 1
Section 1 of script executed successfully.
//after execution of section 2
Section 2 of script executed successfully. 
//after execution of last section
Script execution complete.

The method I am using is displaying all the 3 messages only after the complete execution of the script.

var script1_ajax = new XMLHttpRequest();

    script1_ajax.onreadystatechange=function() {            
        if (script1_ajax.readyState==4 && script1_ajax.status==200) {

            document.getElementById('result').innerHTML = script1_ajax.responseText;

        }
    }

I don’t want to break my script into multiple scripts.

Please suggest how to do this.

Answer 1

There are various techniques for keeping a connection to the server open and getting interim updates from that connection, which take the collective term “comet,” which is described here. Long-polling, hidden iframes with chunked blocks, XHR on some browsers, etc. One or more of those may be useful to you. Note that different techniques work with different browsers, and each has upsides and downsides.

The situation will be rather better in a few years, when we can rely on web sockets, but for now that’s not an option unless you can restrict use of your site/application to the few browsers that currently support them.