AJAX get data from large HTML page as the large HTML page loads

Question

Not entirely sure whether this has a name but basically I have a large HTML page that is generated from results in a db.

So viewing the HTML page (which is a report) in a browser directly does not display all contents immediately but displays what it has and additional HTML is added as the results from the DB are retrieved...

Is there a way I can make an AJAX request to this HTML page and as opposed to waiting until the whole page (report) is ready, I can start processing the response as the HTML report is loaded? Or is there another way of doing it?

Atm I make my AJAX response it just sits there for a minute or two until the HTML page is complete...

If context is of any use: The HTML report is generated by a Java servlet and the page making the AJAX call is a JSP page. Unfortunately I can't very easily break the report up because it is generated by BIRT (Eclipse reporting extension).

Thanks in advance.

Answer 1

Yep all works, if anyone's interested:

client.open("GET", reportUrl, true);
client.onreadystatechange = responseListener;
client.send();

var reportContents = document.getElementById("reportContents");
// Since this could considerably slow browsers for large reports,
// don't edit report contents for every readystate equal to 3.
// Do it every 10.
var batchUpdate = 10;
var responsesSinceUpdate = 0;
// Don't update the whole contents, just add the new stuff
// since the last update.
var currentLengthOfReportHtml = 0;
// Have max recommended length of report before showing warning.
var maxRecommendedReportLength = 500000;

function responseListener()
{
    if (this.status == 200)
    {
        var readyState = this.readyState;

        if (readyState == 3 || readyState == 4)
        {
            var updatePage = false;

            if (readyState == 4)
            {
                updatePage = true;
                var loadingDiv = document.getElementById("reportLoading");
                loadingDiv.innerHTML = "";
                toggleLargeReportWarning(false);
            }
            else
            {
                responsesSinceUpdate++;

                if (responsesSinceUpdate > batchUpdate)
                {
                    updatePage = true;
                    responsesSinceUpdate = 0;
                }
            }

            if (updatePage)
            {
                var reportLength = this.responseText.length;
                reportContents.innerHTML += this.responseText.substring(currentLengthOfReportHtml);
                currentLengthOfReportHtml = reportLength;

                if (reportLength > maxRecommendedReportLength && readyState == 3)
                {
                    toggleLargeReportWarning(true);
                }
            }
        }
    }
}