Show progress of a script called through ajax in a div

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.

What are you using on the server? AJAX typically will only return responesText when the page/script has finished loading (you cannot usually do what you are proposing). — Josh Mc
– Josh Mc, Commented May 23, 2012 at 7:55
Really! I apologize, I was under the impression that long polling just mean't the server held an ajax connection open until it had completed its request, but apon further reading I better understand it, cheers! — Josh Mc
– Josh Mc, Commented May 23, 2012 at 9:38

T.J. Crowder · Accepted Answer · 2012-05-23 07:57:53Z

3

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.

answered May 23, 2012 at 7:57

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Show progress of a script called through ajax in a div

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related