How to show Please wait or .gif animation while ajax still calls

this code is working fine, all i want is to show "please wait.. or .gif animation while ajax still calls for information. Below is my code:




function products(){

if (document.getElementById('date').value.length == 0) {
alert("Please Pick Date");
document.getElementById('date').focus();
return false;
}

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('sum');
ajaxDisplay.innerHTML = ajaxRequest.responseText;
}
}
var usr = document.getElementById('usr').value;
var date = document.getElementById('date').value;
var queryString = "?usr=" + usr + "&date=" + date;
ajaxRequest.open("GET", "ajax_prom.php" + queryString, true);
ajaxRequest.send(null);

}