AJAX indicateur de chargement

Question

J'utilise ce code AJAX:

<script language="javascript" type="text/javascript"> 
<!-- 
//Browser Support 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('ajaxDiv'); 
      ajaxDisplay.innerHTML = ajaxRequest.responseText; 
     } 
    } 
    var age = document.getElementById('age').value; 
    var wpm = document.getElementById('wpm').value; 
    var sex = document.getElementById('sex').value; 
    var queryString = "?age=" + age + "&wpm=" + wpm + "&sex=" + sex; 
    ajaxRequest.open("GET", "file.php" + queryString, true); 
    ajaxRequest.send(null); 
} 

//--> 
</script> 

Comment indiquer AJAX chargement?

Answer 1

Le scénario courant consiste à afficher une image gif animée ou à changer le curseur de la souris au début de la requête ajax et à la fin.

Gif est beaucoup plus simple. Quelque chose comme (je suis en utilisant JQuery Syntaxe): Pour commencer:

$("#progressIndicator").show(); 

Dans votre gestionnaire onreadystatechange

$("#progressIndicator").hide(); 

Answer 2

Si votre utilisation de JQuery vous pouvez faire quelque chose comme ceci:

$("#progressIndicator").show(); 

var age = $('#age')[0].value; 
var wpm = $('#wpm')[0].value; 
var sex = $('#sex')[0].value; 
var queryString = "?age=" + age + "&wpm=" + wpm + "&sex=" + sex; 

$.get("file.php" + queryString, function (data) { 
    $("ajaxDiv").html(data); 
    $("#progressIndicator").hide(); 
}) 

vous pouvez en savoir plus sur la méthode get JQuery here

Answer 3

Vous pouvez lier la projection/cacher globalement dans votre application (ou tout simplement dans une partie de celui-ci) avec les événements suivants:

$(document).on({ 
    ajaxStart: function() { $body.addClass("loading"); }, 
    ajaxStop: function() { $body.removeClass("loading"); } 
}); 

Et puis définissez-vous la charge de la classe:

/* Start by setting display:none to make this hidden. 
    Then we position it in relation to the viewport window 
    with position:fixed. Width, height, top and left speak 
    for themselves. Background we set to 80% white with 
    our animation centered, and no-repeating */ 
.modal { 
    display: none; 
    position: fixed; 
    z-index: 1000; 
    top: 0; 
    left: 0; 
    height: 100%; 
    width: 100%; 
    background: rgba(255, 255, 255, .8) url('../Images/Loader.gif') 50% 50% no-repeat; 
} 
/* When the body has the loading class, we turn the scrollbar off with overflow:hidden */ 
body.loading { 
    overflow: hidden; 
} 

/* Anytime the body has the loading class, our modal element will be visible */ 
body.loading .modal { 
    display: block; 
} 

En De cette façon, vous n'avez pas besoin de gérer l'effet de chargement pour chaque appel ajax et vous pouvez conserver un style cohérent dans toute l'application.