Ajax loading graphic

Question

Donc, je ne suis pas un génie JavaScript, mais je peux très bien suivre un tutoriel. J'ai ma requête JavaScript Ajax. Comment puis-je faire en sorte que je puisse faire une animation .gif pendant que l'information est demandée? Voici le code:

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

Le nom du fichier GIF est ajax-loader.gif. Je sais que cela peut être fait facilement avec jQuery, mais je ne peux utiliser que du code JavaScript direct et original pour cela, pas des bibliothèques supplémentaires.

Answer 1

Lorsque vous démarrez la requête AJAX, ajoutez un élément img:

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

Lorsque la requête AJAX est fait, retirez-le. (Ce code suppose image est toujours portée)

image.parentNode.removeChild(image); 

Answer 2

Si vous le pouvez, j'éviter d'utiliser cette méthode pour vos demandes de XHR. J'utiliserais jQuery ou un autre framework. Ils vous fournissent beaucoup plus d'options testées que vous pouvez coder vous-même dans un laps de temps raisonnable. http://api.jquery.com/jQuery.ajax/ est un bon endroit pour commencer. Vous pouvez utiliser les événements beforeSend et afterSend.