javascript- show loader в ajax call & hide after success

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'; 
} 

Вещь, я хочу показать значок загрузчика, когда данные формы получат процесс и скрыть его, когда он будет завершен. Для этого я создал две функции: showLoader() и hideLoader()

Мой вопрос: где я должен включать эти функции?

Answer 1

Вы можете использовать его с readyState с onreadystatechange события:

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

Или в вашем коде вы можете назвать их здесь:

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

С Plain JS, вы можете сделать это следующим образом:

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

}