非同期応答を待っている間にローダーを表示

Question

私はjavascriptで書かれたfuntionによって応答を待っている間にローダーを表示する方法がわかりません。

私は応答を含む1つ<div>あります

<input type="button" name="btn-s" value="Search"> 
<div align="center" id="div_feed_data"> 
</div> 

を同じページに、私は、その関数を呼び出します。

function get_feed_data(id_feed,not_add) 
{ 
    if (window.XMLHttpRequest) { 
    // code for IE7+, Firefox, Chrome, Opera, Safari 
    var xmlhttp=new XMLHttpRequest(); 
     } 
    else { 
    // code for IE6, IE5 
     var xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
    } 
     xmlhttp.onreadystatechange=function() 
     { if (xmlhttp.readyState==4 && xmlhttp.status==200) 
     { 
    document.getElementById("div_feed_data").innerHTML=xmlhttp.responseText; //NELL' ELEMENTO CON QUESTO ID VIENE MOSTRATO IL RISULTATO MANDATO DAL SERVER 

    } 
    } 
     xmlhttp.open("GET","libraries/show_feed_data.php?id_feed="+id_feed+"&not_add="+not_add,true); 
     xmlhttp.send(); 
} 

今私が代わりにローダGIFを配置したいのですがボタンが応答が準備ができるまで、しかし、私は純粋なajaxコードのためのちょうど方法を見つけたので、私はどのように行うのか分からず、私は英語でjsにうまくいかないので、助けが必要です。

Answer 1

を参照してください：あなたはAjaxリクエストを作成する場合http://fontawesome.io/examples/#animated

function get_feed_data(id_feed,not_add) 
{ 
    $('#myIcon').fadeIn(); 
    ... 
    ... 
    if (xmlhttp.readyState==4 && xmlhttp.status==200) 
    { 
     // request is complete 
     $('#myIcon').fadeOut(); 
    } 
    ... 
    ... 
} 

Answer 2

、それは以下の状態を通過します。

0: request not initialized 
1: server connection established 
2: request received 
3: processing request 
4: request finished and response is ready 

.send（）メソッドをトリガーすると、これらの状態が処理されます。だから、にしようとするとすぐ準備状態は、あなたがローダーを隠すことができる4であるとき、あなたはアヤックスコールとを呼び出すようローダーGIFを示しました。

擬似コード

function yourFunction() { 
    //call the show loader function here 
    if(xmlReq.readyState == 4 && smlReq.status == 200){ 
     //call the hide loader function here 
    } 
} 

注：あなたもreadyStateの値に基づいて、各状態のメッセージを表示することができます。

擬似コード

function yourFunction() { 
    if(xmlReq.readyState == 1){ 
     //call the show loader function here 
     //console.log('connected'); 
    } 

    if(xmlReq.readyState == 2){ 
     //call the show loader function here 
     //console.log('Request Received'); 
    } 

    if(xmlReq.readyState == 3){ 
     //call the show loader function here 
     //console.log('Processing'); 
    } 

    if(xmlReq.readyState == 4 && xmlReq.status == 200){ 
     //call the hide loader function here 
    } 
}