AJAX - データベースクエリの読み込みまで画像をロードする

Question

私はこの質問をたくさん検索しましたが、特に答えは見つかりません。

私は以下のコードを使用してクエリを実行しています。クエリーには1〜6秒かそれ以上の時間がかかります。私は、クエリPHPでのAjaxのローディング画像と一緒にして、コードを入れてみました

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

、それのどれもがするまで表示されません。結果を待っている間、私は、ユーザーが何かが動作していることを知ってほしいですコンテンツが完全に読み込まれます。

ありがとうございました。

編集：

は、下記のリンクに基づいてコードの一部を変更し、まだ任意のトラクションを得ることができません...

<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

読み込み中の画像を表示するコードが表示されません。私は通常、jsフレームワークの多くがこれをサポートしているため、何をしたかのように、最初からajax呼び出しのコードを書くことはありません。 onreadystatechangeのときに画像を表示しない限り、ajax呼び出しは非同期的に呼び出されるため、読み込み画像には影響しないはずです。 ajax呼び出しを実行する前後にどこかに置くだけです。

Answer 3

そうjQueryのようにそれをタグ付け：

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