Ajax loading graphic

Question

所以我不是JavaScript的天才，但我可以按照教程就好。我有我的Ajax JavaScript請求。我如何做到這一點，以便我可以在請求信息時進行.gif動畫展示？以下是代碼：

function ajaxFunction(){ 
    var ajaxRequest; // The variable that makes Ajax possible! 

    try{ 
     // Opera 8.0+, Firefox, Safari 
     ajaxRequest = new XMLHttpRequest(); 
    } catch (e){ 
     // Internet Explorer Browsers 
     try{ 
      ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP"); 
     } catch (e) { 
      try{ 
       ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP"); 
      } catch (e){ 
       // Something went wrong 
       alert("Your browser broke!"); 
       return false; 
      } 
     } 
    } 
    // Create a function that will receive data sent from the server 
    ajaxRequest.onreadystatechange = function(){ 
     if(ajaxRequest.readyState == 4){ 
      var ajaxDisplay = document.getElementById('confirm'); 
      ajaxDisplay.innerHTML = ajaxRequest.responseText; 
     } 
    } 
    var number = document.getElementById('number').value; 
    var message = document.getElementById('message').value; 
    var queryString = "?number=" + number + "&message=" + message; 
    ajaxRequest.open("GET", "sms.php" + queryString, true); 
    ajaxRequest.send(null); 
} 

GIF文件的名稱是ajax-loader.gif。

我知道這可以用jQuery輕鬆完成，但我只能使用直接的原始JavaScript代碼，而不是額外的庫。

Answer 1

當您啓動AJAX請求，添加img元素：

var image=document.createElement('img'); 
image.setAttribute('src', 'ajax-loader.gif'); 
document.getElementsByTagName('body')[0].appendChild(image); 

當AJAX請求完成後，將其刪除。 （此代碼假定image仍然在範圍內）

image.parentNode.removeChild(image); 

Answer 2

如果可以的話，我會避免使用這種方法爲您XHR請求。我會使用jQuery或其他框架。它們爲您提供了許多更多的測試選項，您可以在任何合理的時間內對自己進行編碼。 http://api.jquery.com/jQuery.ajax/是一個很好的開始。您可以使用beforeSend和afterSend事件。