Ajax loader question

[emhmk1]

Hi everyone,
I'm very new to this whole ajax / javascript thing and i have a question regarding the image loader.
Basically i want to add the image when the ajax is doing its stuff but i can't figure out where i need to put the code. As a matter of fact i dont even know what code i should be writing.
Please can someone assist me, google was not very helpful this morning!!

function ajaxFunction(){
	var ajaxRequest;  
	
	try{
		
		ajaxRequest = new XMLHttpRequest();
	} catch (e){
		
		try{
			ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
		} catch (e) {
			try{
				ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
			} catch (e){
				
				alert("Your browser broke!");
				return false;
			}
		}
	}
	
	ajaxRequest.onreadystatechange = function(){
		if(ajaxRequest.readyState == 4){
			var ajaxDisplay = document.getElementById('ajaxDiv');
			ajaxDisplay.innerHTML = ajaxRequest.responseText;
		}
	}
	var pet = document.getElementById('animals').value;
	var queryString = "?id=" + pet;
	ajaxRequest.open("GET", "view.php" + queryString, true);
	ajaxRequest.send(null); 
}

cheers...

[emhmk1]

I should expand slightly on my previous post.

i have the image

<img src="images/loader.gif" />

That i would like people to see whilst the ajax is executing but i dont know where to add the code in my code posted previously.

Thanks.

[vsmash]

I'd recommend for starters that you use jquery. You can download it at jquery.com
Your code would then look something like this...

function ajaxfunction(){
	var pet=document.getElementById('animals').value;
	$("#ajaxDiv").html('Loading...');
	$.ajax({
	url: 'view.php',
	data: 'id='+pet+'',
	type: 'get',
	cache: false,
	dataType: 'html',
	complete: function (xhr) {
	//when its done with no error print this:
	$("#ajaxDiv").html(xhr.responseText);
	}
	});	
}