Criar uma imagem de carregamento enquanto o ajax é carregado

Este é o código que tenho. Estou tentando inserir uma imagem para mostrar que o ajax está carregando, mas simplesmente não consigo fazer isso direito; Eu tentei de várias maneiras possíveis, mas simplesmente não está funcionando. Alguma sugestão sobre o que fazer

ajaxRequest.onreadystatechange = function(){
    if(ajaxRequest.readyState == 4){
        var ajaxDisplay = document.getElementById('main_result');
        ajaxDisplay.innerHTML = ajaxRequest.responseText;
    }
}
$("#main_result").empty().html('<img src="loading.gif" />');

var category = document.getElementById('category').value;
var brand = document.getElementById('brand').value;
var item = document.getElementById('item').value;
var queryString = "&category=" + category + "&brand="+ brand +"&item="+ item;
ajaxRequest.open("GET", "main_search_special.php?section=special" + queryString, true);
ajaxRequest.send(null);

questionAnswers(8)

yourAnswerToTheQuestion