Question

我已经做了很多寻找这个问题，但我找不到具体的答案。

我正在使用以下代码执行查询。查询需要1-6秒或更长时间才能处理。在等待结果的同时，我希望用户知道某些内容正在发挥作用：

<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>

我试图将代码与ajax加载图像一起放在查询php上，但在内容完全加载之前，这些都不会显示。

感谢。

编辑：

根据以下链接更改了部分代码，仍然无法获得任何牵引力......

<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>

这是我第一次使用javascript / ajax搞错了。第一个代码示例是我在网上找到的。

再次感谢。

Answer 1

<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>

Answer 2

我没有看到您的代码显示加载图片。我通常不会像你所做的那样从头开始编写ajax调用的代码，因为很多js框架都支持这个。 ajax调用是异步调用的，所以它不应该影响你的加载图像，只要你在onreadystatechange时没有显示图像，它应该没问题。只需在执行ajax调用之前或之后将其放在某处。

Answer 3

你把它标记为jQuery所以：

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

AJAX - 显示加载图像直到数据库查询加载

3 个答案: