[hire202]

Hello, of all the coding I've done, AJAX has been something that i've never used before because PHP seems to be my first resort.So being new to AJAX I started at the basic level, I wanted for a test to be able to present the readystate change into a loading image, so basically when ready state is 0,1,2,3 it will show a loading image and when the ready state is 4 it won't show the image.

I made a basis script that consists of this code:

function getXmlHttpObject() {
	if (window.XMLHttpRequest) {
	  return new XMLHttpRequest();
	}
	if (window.ActiveXObject) {
	  return new ActiveXObject("Microsoft.XMLHTTP");
	}
	return null;
}

function loading(connection) {
	var timer = setTimeout(function() { loading(connection); }, 1);
	var objLoadingImg = document.getElementById('loading-image');
	if(connection.readyState === 0) {
		objLoadingImg.style.visibility = 'visible';
	}
	else if(connection.readyState == 1) {
		objLoadingImg.style.visibility = 'visible';
	}
	else if(connection.readyState == 2) {
		objLoadingImg.style.visibility = 'visible';
	}
	else if(connection.readyState == 3) {
		objLoadingImg.style.visibility = 'visible';
	}
	else if(connection.readyState == 4) {
		objLoadingImg.style.visibility = 'hidden';
		clearTimeout(timer);
	}
}

function loadConnection() {
	var response = getXmlHttpObject();
	response.onreadystatechange = loading(response);
}

Here is a link to the script in action: Script Example

The problem is the readystate is always returning 0 and nothing else, I don't think it's a syntax error, probably a logic error, pleae help me.

[swg]

I think it's because you're not asking it to do anything.

You've not sent any Ajax request so the state is always 0, i.e. "the request is not initialized"

[hire202]

Oh I see, I will try this, thankyou very much :-).

**EDIT**

Yes Yes thankyou, it now works, I understand now thankyou very much :-)

[ElanMan]

You could also get rid of the else if conditionals. Only when readyState == 4, change the visibility.

function loading(connection) {
        var timer = setTimeout(function() { loading(connection); }, 1);
        var objLoadingImg = document.getElementById('loading-image');
        objLoadingImg.style.visibility = 'visible';
        if(connection.readyState == 4) {
                objLoadingImg.style.visibility = 'hidden';
                clearTimeout(timer);
        }
}