AJAX loading indicator

Question

I use this AJAX code:

    <script language="javascript" type="text/javascript">
<!-- 
//Browser Support Code
function ajaxFunction(){
    var ajaxRequest;  // The variable that makes Ajax possible!

    try{
        // Opera 8.0+, Firefox, Safari
        ajaxRequest = new XMLHttpRequest();
    } catch (e){
        // Internet Explorer Browsers
        try{
            ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            try{
                ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e){
                // Something went wrong
                alert("Your browser broke!");
                return false;
            }
        }
    }
    // Create a function that will receive data sent from the server
    ajaxRequest.onreadystatechange = function(){
        if(ajaxRequest.readyState == 4){
            var ajaxDisplay = document.getElementById('ajaxDiv');
            ajaxDisplay.innerHTML = ajaxRequest.responseText;
        }
    }
    var age = document.getElementById('age').value;
    var wpm = document.getElementById('wpm').value;
    var sex = document.getElementById('sex').value;
    var queryString = "?age=" + age + "&wpm=" + wpm + "&sex=" + sex;
    ajaxRequest.open("GET", "file.php" + queryString, true);
    ajaxRequest.send(null); 
}

//-->
</script>

How to indicate AJAX loading?

Answer 1

Common scenario is to show animated gif image or change mouse cursor on start of ajax request and at end.

Gif is much simpler. Something like (I am using JQuery Syntax): For start:

$("#progressIndicator").show();

In your onreadystatechange handler

$("#progressIndicator").hide();

Answer 2

If your using JQuery you can do something like this:

$("#progressIndicator").show();

var age = $('#age')[0].value;
var wpm = $('#wpm')[0].value;
var sex = $('#sex')[0].value;
var queryString = "?age=" + age + "&wpm=" + wpm + "&sex=" + sex;

$.get("file.php" + queryString, function (data) {
    $("ajaxDiv").html(data);
    $("#progressIndicator").hide();
})

you can see more about the JQuery get method here