AJAX - Show Loading Image Until Database Query Loads

Question

I've done a lot of searching for this question, but I can't find the particular answer.

I'm using the below code to perform a query. The query takes from 1-6 seconds or more to process. While waiting for the results I want the user to know that something is working:

<script language="javascript">
function ajaxRequest(){
var activexmodes=["Msxml2.XMLHTTP", "Microsoft.XMLHTTP"] //activeX versions to check for in IE
if (window.ActiveXObject){ //Test for support for ActiveXObject in IE first (as XMLHttpRequest in IE7 is broken)
  for (var i=0; i<activexmodes.length; i++){
   try{
    return new ActiveXObject(activexmodes[i])
   }
   catch(e){
    //suppress error
   }
 }
}
 else if (window.XMLHttpRequest) // if Mozilla, Safari etc
  return new XMLHttpRequest()
 else
  return false
}
</script>


<script language="javascript">
function ajaxget(){
var mygetrequest=new ajaxRequest()
mygetrequest.onreadystatechange=function(){
 if (mygetrequest.readyState==4){
  if (mygetrequest.status==200 || window.location.href.indexOf("http")==-1){
   document.getElementById("result").innerHTML=mygetrequest.responseText
  }
 else{
  alert("An error has occured making the request")
   }
 }
}
var namevalue=encodeURIComponent(document.getElementById("name").value)
mygetrequest.open("GET", "findclosestcityresults.php?location="+namevalue, true)
mygetrequest.send(null)
}
</script>

I've tried to put code in along with a ajax loading image on the query php, but none of that will display until the content loads completely.

Thanks.

Edit:

Changed some of the code based on the link below, still can't get any traction...

<script language="javascript">
function ajaxget(){
var mygetrequest=new ajaxRequest()
mygetrequest.onreadystatechange=function(){
 if (mygetrequest.readyState==0){
  document.getElementById('result').innerHTML = '<img src="images/ajax_loader.gif" />';
 }
 if (mygetrequest.readyState==1){
  document.getElementById('result').innerHTML = '<img src="images/ajax_loader.gif" />';
 }
 if (mygetrequest.readyState==2){
  document.getElementById('result').innerHTML = '<img src="images/ajax_loader.gif" />';
 }
 if (mygetrequest.readyState==3){
  document.getElementById('result').innerHTML = '<img src="images/ajax_loader.gif" />';
 }
 if (mygetrequest.readyState==4){
  if (mygetrequest.status==200 || window.location.href.indexOf("http")==-1){
   document.getElementById("result").innerHTML=mygetrequest.responseText
  }
  else{
   alert("An error has occured making the request")
  }
 }
}


var namevalue=encodeURIComponent(document.getElementById("name").value)
mygetrequest.open("GET", "findclosestcityresults.php?location="+namevalue, true)
mygetrequest.send(null)
}
</script>

This is really my first time fooling around with javascript / ajax. The first code example was something I found online.

Thanks again.

developer.mozilla.org/en/AJAX/Getting_Started - Read this. The answer to your question is in step 2. — Dan
– Dan, Commented Oct 23, 2011 at 14:47
@Dan Thanks for the heads up. I edited the code above, but I guess I'm not doing it right. — Go3Team
– Go3Team, Commented Oct 23, 2011 at 15:14

Mike · Accepted Answer · 2011-10-23 15:21:04Z

<script language="javascript">
function ajaxRequest(){
var activexmodes=["Msxml2.XMLHTTP", "Microsoft.XMLHTTP"] //activeX versions to check for in IE
if (window.ActiveXObject){ //Test for support for ActiveXObject in IE first (as XMLHttpRequest in IE7 is broken)
  for (var i=0; i<activexmodes.length; i++){
    try{
      return new ActiveXObject(activexmodes[i])
  }
  catch(e){
    //suppress error
  }
  }
}
else if (window.XMLHttpRequest) // if Mozilla, Safari etc
return new XMLHttpRequest()
else
 return false
}
</script>


<script language="javascript">
function ajaxget(){
  var mygetrequest=new ajaxRequest()
  mygetrequest.onreadystatechange=function(){
  if (mygetrequest.readyState==4){
    if (mygetrequest.status==200 || window.location.href.indexOf("http")==-1){
      document.getElementById("result").innerHTML=mygetrequest.responseText
    }
    else{
      alert("An error has occured making the request")
    }
  }
}
var namevalue=encodeURIComponent(document.getElementById("name").value)
//new code here!
document.getElementById("result").innerHTML="<img src='path-to-ajax-loader-moving.gif' />";
mygetrequest.open("GET", "findclosestcityresults.php?location="+namevalue, true)
mygetrequest.send(null)
}
</script>

Bao Nhan · Accepted Answer · 2011-10-23 14:52:51Z

0

I don't see your code to display the loading image. I don't usually write the code for ajax call from scratch as what you did because a lot of js framework has support for this. The ajax call is called asynchronously so it shouldn't affect your loading image as long as you you don't display the image when you are in onreadystatechange, it should be fine. Just put it somewhere before or after you execute the ajax call.

answered Oct 23, 2011 at 14:52

Bao Nhan

1807 bronze badges

Comments

Royi Namir · Accepted Answer · 2011-10-23 15:23:06Z

0

you tagged it as jQuery so:

$("#loading_animation").bind({
    ajaxStart: function() { $(this).show(); },
    ajaxStop: function() { $(this).hide(); }
});

answered Oct 23, 2011 at 15:23

Royi Namir

149k145 gold badges502 silver badges833 bronze badges

Collectives™ on Stack Overflow

AJAX - Show Loading Image Until Database Query Loads

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related