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

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> 

我试图沿着放码与在查询PHP中的AJAX加载图片，但没有将显示，直到内容完全加载。

谢谢。

编辑：

改变了一些基于下面的链接代码，仍然不能得到任何牵引...

<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(); } 
});