Индикатор загрузки AJAX

Question

Я использую этот код 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>

Как указать загрузку AJAX?

Answer 1

Вы можете связать показ / скрытие глобально в вашем приложении (или просто в некоторой его части) со следующими событиями:

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

И затем вы определяете загрузку класса:

/* 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;
}

Таким образом, вам не нужно управлять эффектом загрузки для каждого вызова ajax, и вы можете поддерживать согласованный стиль для всего приложения.

Answer 2

Обычный сценарий - показать анимированное GIF-изображение или изменить курсор мыши в начале запроса ajax и в конце.

Gif намного проще. Что-то вроде (я использую синтаксис JQuery): Для начала:

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

В вашем обработчике onreadystatechange

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

Answer 3

Если вы используете JQuery, вы можете сделать что-то вроде этого:

$("#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();
})

, вы можете узнать больше о методе получения JQuery здесь