Link to home
Create AccountLog in
Avatar of andrewthecoder
andrewthecoderFlag for United Kingdom of Great Britain and Northern Ireland

asked on

AJAX onReadyStatechange not functioning as expected

Sorry, haven't got time to provide much background information - the URL provided is the finished product, but it is not finished as I am stuck with AJAX troubles.
I just can't see what I'm doing wrong...
The attached code snippet should, as far as I understand, produce a javascript alert box with each number from 1 to 4 whilst the request loads...
But it only shows 1, therefore I have no way of knowing when the result has loaded, therefore my full code fails.

Please, check my code snippet and tell me what is wrong :)

~Andrew
<html>
<head>
<script type="text/javascript">
				function ajaxsignupformsubmit() {
					var url = "mailinglist.php";
					var email = document.getElementsByName("email")[0].value;
					var params = "action=signup&email="+email;
					ajaxGET(url,params);
				}
				function getHTTPObject() {
					var http = false;
					//Use IEs ActiveX items to load the file.
					if(typeof ActiveXObject != "undefined") {
						try {http = new ActiveXObject("Msxml2.XMLHTTP");}
						catch (e) {
							try {http = new ActiveXObject("Microsoft.XMLHTTP");}
							catch (E) {http = false;}
						}
					//If ActiveX is not available, use the XMLHttpRequest of Firefox/Mozilla etc. to load the document.
					} else if (XMLHttpRequest) {
						try {http = new XMLHttpRequest();}
						catch (e) {http = false;}
					}
					return http;
				}
				var http = getHTTPObject();
				
				function handler(type) {
					//Call a function when the state changes.
					alert(http.readyState);
				}
				
				function ajaxGET(url,params) {
					http.open("GET", url+"?"+params, true);
					http.onreadystatechange = handler();
					http.send(null);
				}
				function ajaxPOST(url,params) {
					http.open("POST", url, true);
					
					//Send the proper header infomation along with the request
					http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
					http.setRequestHeader("Content-length", params.length);
					http.setRequestHeader("Connection", "close");
					http.onreadystatechange = handler();
					http.send(params);
				}
</script>
</head>
<body>
<form>
Email Address:
<input type="text" name="email" />
<input value="Go" onclick="ajaxsignupformsubmit()" type="button">
</form>
</body>
</html>

Open in new window

Avatar of third
third
Flag of Philippines image

you can check when the result has loaded when the state is equal to 4. instead of alerting use something like,

function ajaxGET(url,params) {
            http.open("GET", url+"?"+params, true);
            http.onreadystatechange = function(){
              if (http.readyState==4){ //response has been received
                  alert(http.responseText)
              }
            }
            http.send(null);
}
ASKER CERTIFIED SOLUTION
Avatar of LordOfPorts
LordOfPorts
Flag of United States of America image

Link to home
membership
Create an account to see this answer
Signing up is free. No credit card required.
Create Account
Avatar of andrewthecoder

ASKER

Sorry, but I am a little disappointed.
Neither of the above comments really addressed the problem...
@ third - Either you didn't read my question very fully, or I didn't explain very well. I know that - I am very familiar with javascript and AJAX is just a small extension in my eyes. I understand how to use it, as far as I know. My actual code is far more complicated than the code snippet above - that was just my means of testing the basics of AJAX as I was having problems. Using a javascript alert, if you re-read my question, was only a means of showing which status codes were actually being returned. As far as I understand AJAX, each status code from 1 to 4 should have generated it's own alert box as the request loaded.
Naturally, if this was working successfully, I would use an if statement to check for status 4 and then carry on with making use of the returned data, as you have shown.

My problem is, the only status code being returned is 1!
I cannot understand why, so please, try again to figure out my problem :)

As for the second comment, thanks for the suggestion, but I had already checked that.

Thanks again,
~Andrew
SOLUTION
Link to home
membership
Create an account to see this answer
Signing up is free. No credit card required.
Create Account
Ah.
Thankyou very much LordOfPorts - it was your first comment that was the issues here, and although I had checked that, my handler function had an unwanted argument (type) which I simply hadn't noticed.
So, I am going to give you full marks, as technically you solved my problem :)
(although, really, it was just a silly mistake of not noticing that argument)

The only thing that still has me a little stumped is
a) why was the handler function called at all if my syntax was incorrect (your first comment)
b) why did the alert box show "1"? surely if the alert box was showing the contents of the http.readyState variable, it should still have worked correctly? hmmm maybe it's just cause I'm too used to PHP, and not used to the very loosely-typed "qualities" of javascript. ;)

Anyway here is the final code snippet showing the solution, of sorts.
(can be seen at http://www.andrewbeveridge.co.uk/ajaxtest.html )

~Andrew

P.S - thanks for being so polite
<html>
<head>
<script type="text/javascript">
    function ajaxsignupformsubmit() {
       var url = "mailinglist.php";
       var email = document.getElementsByName("email")[0].value;
       var params = "action=signup&email="+email;
       ajaxGET(url,params);
    }
    function getHTTPObject() {
        var http = false;
        if(typeof ActiveXObject != "undefined") {
            try {http = new ActiveXObject("Msxml2.XMLHTTP");}
            catch (e) {
                try {http = new ActiveXObject("Microsoft.XMLHTTP");}
                    catch (E) {http = false;}
            }
        } else if (XMLHttpRequest) {
            try {
				http = new XMLHttpRequest();
			} catch (e) {
				http = false;
			}
        }
        return http;
    }
    var http = getHTTPObject();
	
	function handler() {
		alert(http.readyState);
	};
	
    function ajaxGET(url,params) {
        http.open("GET", url+"?"+params, true);
        http.onreadystatechange = handler;
        http.send(null);
    }
</script>
</head>
<body>
<form>
Email Address:
<input type="text" name="email" />
<input value="Go" onclick="ajaxsignupformsubmit()" type="button">
</form>
</body>
</html>

Open in new window

Thanks :)