javascript-show loader in ajax呼び出し＆成功後に非表示

Question

私はここでちょっと混乱しています。

私はJavaScriptでフォームを作成し、PHPページ（submit.php）に値を掲示し、PHPページが成功を返した場合、私は別のページにユーザーをリダイレクトしますsuccess.php

var url = 'submit.php'; 
var furl = 'success.php'; 
var formdata = new FormData(); 
formdata.append("name", 'John'); 
formdata.append('staffid',123); 
formdata.append('csrf_test_name',csrf_token); 

var ajax = new XMLHttpRequest(); 
ajax.addEventListener("load", function(event) { 
    uploadcomplete(event,furl); 
}, false); 
ajax.open("POST", url); 
ajax.send(formdata); 

function uploadcomplete(event,furl) { 
    var response = event.target.responseText.trim(); 
    if(response=='Failed') { 
     alert('Failed'); 
    } else { 
     alert('Success'); 
     window.location.replace(furl); 
    } 
} 

function showLoader(){ 
    document.getElementById('loader').style.display = 'block'; 
} 

function hideLoader(){ 
    document.getElementById('loader').style.display = 'none'; 
} 

シングは、Iでいますフォームデータが処理されているときにローダーアイコンを表示し、完了したらフォームデータを非表示にする。そのために、私は2つの関数を作成しましたshowLoader()とhideLoader()

私はこれらの関数をどこに含めるべきですか？

Answer 1

あなたがしてreadyStateでそれを使用することができますonreadystatechangeイベント：

var ajax = new XMLHttpRequest(); 
ajax.onreadystatechange = function(){ 
    if(ajax.readyState === 0){ 
    showLoader(); 
    }else if(ajax.readyState === 4){ 
    hideLoader(); 
    } 
}; 

またはあなたのコード内で、あなたはここでそれらを呼び出すことができます：プレーンJSで

var ajax = new XMLHttpRequest(); 
ajax.addEventListener("load", function(event) { 
    uploadcomplete(event,furl); 
    hideLoader(); //<------------------hide the loader here when done. 
}, false); 
ajax.open("POST", url); 
showLoader(); // <------------------call and show loader here. 
ajax.send(formdata); 

Answer 2

あなたはそうのようにそれを実行します。

要求が進行中：行わロード

ajax.addEventListener("progress", showLoader); 

：

ajax.addEventListener("load", hideLoader); 

Answer 3

を、あなたはこのようにそれを行うことができます：だから

function loadData() { 
    var ajax = new XMLHttpRequest(); 

    ajax.onreadystatechange = function() { 
     if (ajax.readyState === 4) { 
      if (ajax.status === 200) { 
       hideLoader(); 
       //your code after ajax response, use ajax.responseText 
      } 
      else { 
       console.log('Some error...'); 
      } 
     } 
    }; 

    ajax.open("POST", url); 
    ajax.send(formdata); 
    showLoader(); 

}