Ajax загрузка графики

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.