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