Show loader while waiting asynchronous response

Question

i don't know how to show a loader while i'm waiting for a response by a funtion written in javascript.

I have one <div> which contain the response:

<input type="button" name="btn-s" value="Search">
<div align="center" id="div_feed_data">
</div>

and in the same page i call that function:

function get_feed_data(id_feed,not_add)
{
     if (window.XMLHttpRequest)    {
    // code for IE7+, Firefox, Chrome, Opera, Safari
     var xmlhttp=new XMLHttpRequest();
       }
     else    {
    // code for IE6, IE5
      var xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
     }
       xmlhttp.onreadystatechange=function()
      {    if (xmlhttp.readyState==4 && xmlhttp.status==200)
       {
     document.getElementById("div_feed_data").innerHTML=xmlhttp.responseText;   //NELL' ELEMENTO CON QUESTO ID VIENE MOSTRATO IL RISULTATO MANDATO DAL SERVER

    }
    }
       xmlhttp.open("GET","libraries/show_feed_data.php?id_feed="+id_feed+"&not_add="+not_add,true);
       xmlhttp.send();
 }

Now i'd like to place a loader gif instead of the button until the response is ready, but i don't know how to do because i've found just method for pure ajax code and i'm not good in js as in english, so i need an help, thank you guys!

Answer 1

When you create an Ajax request, it will go through the following states.

0: request not initialized 
1: server connection established
2: request received 
3: processing request 
4: request finished and response is ready

When you trigger .send() method these states will processed. So you try to show the loader gif as soon as you call the Ajax call and when the ready state is 4 you can hide the loader.

pseudo code

function yourFunction() {
   //call the show loader function here
   if(xmlReq.readyState == 4 && smlReq.status == 200){
        //call the hide loader function here
   }
}

Note : You can even show the messages for each states based on the readystate value.

pseudo code

function yourFunction() {
   if(xmlReq.readyState == 1 ){
        //call the show loader function here
        //console.log('connected');
   }

   if(xmlReq.readyState == 2 ){
        //call the show loader function here
        //console.log('Request Received');
   }

    if(xmlReq.readyState == 3 ){
        //call the show loader function here
        //console.log('Processing');
   }

   if(xmlReq.readyState == 4 && xmlReq.status == 200){
        //call the hide loader function here
   }
}

Answer 2

See: http://fontawesome.io/examples/#animated

function get_feed_data(id_feed,not_add)
{
    $('#myIcon').fadeIn();
    ...
    ...
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
       // request is complete
       $('#myIcon').fadeOut();
    }
    ...
    ...
}