How to show progress when issuing AJAX request?

Question

I am new to AJAX. The script is working fine but what I want is when I click the "Enter" button

I want to show some sort of loading animation:

and hide it when the request comes through.

Markup:

<div id="loading" align="center" >
    <img src="../dist/img/ajax-loader.gif" display="none" />  
</div>

And also:

<script language="javascript" type="text/javascript">
    <!-- 
    //Browser Support Code
    function product() {
        if(document.getElementById('privilege').value.length == 0) {
            alert("Please choose privilege");
            document.getElementById('privilege').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('get');
            ajaxDisplay.innerHTML = ajaxRequest.responseText;
        }
    }
    var privilege = document.getElementById('privilege').value; 
    var queryString = "?privilege=" + privilege;
    ajaxRequest.open("GET", "ajax_get.php" + queryString, true);
    ajaxRequest.send(null); 
    //document.getElementById('Submit').disabled=false;
}
//-->
</script>

Answer 1

here's an example: http://www.dave-bond.com/blog/2010/01/JQuery-ajax-progress-HMTL5/

$.ajax({
  type: 'POST',
  url: "/",
  data: {},
  beforeSend: function(XMLHttpRequest)
  {
    //Upload progress
    XMLHttpRequest.upload.addEventListener("progress", function(evt){
      if (evt.lengthComputable) {  
        var percentComplete = evt.loaded / evt.total;
        //Do something with upload progress
      }
    }, false); 
    //Download progress
    XMLHttpRequest.addEventListener("progress", function(evt){
      if (evt.lengthComputable) {  
        var percentComplete = evt.loaded / evt.total;
        //Do something with download progress
      }
    }, false); 
  },
  success: function(data){
    //Do something success-ish
  }
});

just update "upload" with "process" or "query" and you should be good. the addEventListener tracks progress in either direction, and you can use the percentComplete to change the progress bar's current value.

Answer 2

assuming that you know what to do to show display:none elements, see the comments:

<script language="javascript" type="text/javascript">
    <!-- 
    //Browser Support Code
    function product() {
        if(document.getElementById('privilege').value.length == 0) {
            alert("Please choose privilege");
            document.getElementById('privilege').focus();
            return false;
        }
        /*
        HERE YOU WILL SHOW THE DIV THAT ARE HOLDING THE LOADING ANIMATION
        */
        var ajaxRequest;
        try {
            ajaxRequest = new XMLHttpRequest();
        } catch (e) {
        try{
            ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            try {
                ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e) {
                alert("Your browser broke!");
                return false;
            }
        }
    }
    ajaxRequest.onreadystatechange = function() {
        if(ajaxRequest.readyState == 4) {
            /*
            HERE YOU WILL HIDE THE DIV THAT ARE HOLDING THE LOADING ANIMATION
            */
            var ajaxDisplay = document.getElementById('get');
            ajaxDisplay.innerHTML = ajaxRequest.responseText;
        }
    }
    var privilege = document.getElementById('privilege').value; 
    var queryString = "?privilege=" + privilege;
    ajaxRequest.open("GET", "ajax_get.php" + queryString, true);
    ajaxRequest.send(null); 
    //document.getElementById('Submit').disabled=false;
}
//-->
</script>

EDIT

or, if not, too:

<script language="javascript" type="text/javascript">
    <!-- 
    //Browser Support Code
    function product() {
        if(document.getElementById('privilege').value.length == 0) {
            alert("Please choose privilege");
            document.getElementById('privilege').focus();
            return false;
        }
        // here we will show
        document.getElementById('loading').style.display='block';
        var ajaxRequest;
        try {
            ajaxRequest = new XMLHttpRequest();
        } catch (e) {
        try{
            ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            try {
                ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e) {
                alert("Your browser broke!");
                return false;
            }
        }
    }
    ajaxRequest.onreadystatechange = function() {
        if(ajaxRequest.readyState == 4) {
            // here we will hide
            document.getElementById('loading').style.display='none';
            var ajaxDisplay = document.getElementById('get');
            ajaxDisplay.innerHTML = ajaxRequest.responseText;
        }
    }
    var privilege = document.getElementById('privilege').value; 
    var queryString = "?privilege=" + privilege;
    ajaxRequest.open("GET", "ajax_get.php" + queryString, true);
    ajaxRequest.send(null); 
    //document.getElementById('Submit').disabled=false;
}
//-->
</script>