AJAX

<!-- **************************************************************************** -->
<!-- The HTML -->
<p>
<button name='getdata' id='getdata' 
        onclick=getData('display','throbber','./showData.cgi')>Get Data</button>
<span id='throbber' style='display: none;'><img src='throbber.gif'
                                                height='20px' alt='wait...' /></span>
</p>
<div id='display' style='background: #cccccc; padding: 1em; margin:1em;'>
</div>


<!-- **************************************************************************** -->
<!-- The CGI script -->


#!/usr/bin/python3
from time import sleep
sleep(5)

print('''Content-Type: text/html

<p>Welcome to AJAX!</p>
''')


// ******************************************************************************
// The JavaScript
var gRequest    = null;
var gDataid     = null;
var gThrobberid = null;

// ------------------------------------------------------------------------------
// Input: dataid      The ID of the div where data are to be displayed
//        throbberid  The ID of the span where the throbber is to be displayed
//        url         The URL of the slow-running CGI script
//
// The main AJAX routine that is called on a button press. Sets up the request,
// sets global variables, sets the function to be called when the request
// completes and sends the request
function getData(dataid, throbberid, url)
{
    gDataid     = dataid;
    gThrobberid = throbberid;
    gRequest    = createRequest();
    if(gRequest == null) {
        alert("Error creating request object");
        return;
    }

    activateThrobber(throbberid);
    gRequest.open("GET", url, true);          // true = asynchronous
    gRequest.onreadystatechange = updateData; // Call this when we get something back
    gRequest.send(null);                      // Send the request with no post data
}

// ------------------------------------------------------------------------------
// Boilerplate code to create an AJAX request object
function createRequest() {
    var req = null;
    try {
        req = new XMLHttpRequest();
    } catch (trymicrosoft) {
        try {
            req = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (othermicrosoft) {
            try {
                req = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (failed) {
                req = null;
            }
        }
    }
    
    return(req);
}

// ------------------------------------------------------------------------------
// Input: throbberid   The ID of the span containing the throbber
//
// Shows the span containing the throbber
function activateThrobber(throbberid)
{
    document.getElementById(throbberid).style.display = 'inline';
}

// ------------------------------------------------------------------------------
// When the AJAX returns, checks everything OK, displays the data that came
// back from the AJAX request and deactivates the throbber
function updateData()
{
    if((gRequest.readyState == 4) ||
       (gRequest.readyState == "complete")) {
        var data = gRequest.responseText;   // Get data from the sever
        displayData(gDataid, data);
        deactivateThrobber(gThrobberid);
    }
}

// ------------------------------------------------------------------------------
// Input: dataid    The ID of the data div
//        data      The HTML to be displayed in that div
//
// Sets the HTML within the specified div to the data that came back from the
// AJAX request
function displayData(dataid, data)
{
    document.getElementById(dataid).innerHTML = data;
}

// ------------------------------------------------------------------------------
// Input: throbberid   The ID of the span containing the throbber
//
// Hides the span containing the throbber
function deactivateThrobber(throbberid)
{
    document.getElementById(throbberid).style.display = 'none';
}

[Download JavaScript]