新增一個 AJAX 預載入器

這是一種在執行 AJAX 呼叫時顯示 GIF 預載入器的方法。我們需要準備新增和刪除預載入器功能：

function addPreloader() {
  // if the preloader doesn't already exist, add one to the page
  if(!document.querySelector('#preloader')) {
    var preloaderHTML = '<img id="preloader" src="https://goo.gl/cNhyvX" />';
    document.querySelector('body').innerHTML += preloaderHTML;
  }
}

function removePreloader() {
  // select the preloader element
  var preloader = document.querySelector('#preloader');
  // if it exists, remove it from the page
  if(preloader) {
    preloader.remove();
  }
}

現在我們來看看在哪裡使用這些功能。

var request = new XMLHttpRequest();

在 onreadystatechange 函式中你應該有一個條件為：request.readyState == 4 && request.status == 200 的 if 語句。

如果為 true ：請求已完成且響應準備就緒，我們將使用 removePreloader()。

否則，如果為 false ：請求仍在進行中，在這種情況下，我們將執行 addPreloader() 函式

xmlhttp.onreadystatechange = function() {

  if(request.readyState == 4 && request.status == 200) {
    // the request has come to an end, remove the preloader
    removePreloader();
  } else {
    // the request isn't finished, add the preloader
    addPreloader()
  }

};

xmlhttp.open('GET', your_file.php, true);
xmlhttp.send();