Jump to content

XMLHttpRequest: Second send() generates JS error.


Jesdisciple

Recommended Posts

SOLVED: Variable rep was implied global in post(); declaring it with var resolved the issue.EDIT: When I named this topic, it was consistent between GET and POST, but now it's just POST. Also, no error is generated.I'm trying to streamline the use (both sync and async) of XMLHttpRequest objects, so that only one "manager" object is needed for all of a page's requests. But, after the first alert, no browser (FF, OP, IE) does anything.JaxManager.html

<html>	<head>		<title>Titled Document</title>		<script type="text/javascript" src="JaxManager.js"></script>		<script type="text/javascript">			function onload(){				window.jax = new JaxManager();				function callback(readyState, response){					if(readyState == 4){						alert('Response: ' + response.text);					}				}				jax.post('test1.php', 'query=null', callback);				jax.post('test2.php', 'query=null', callback);			}		</script>	</head>	<body>			</body></html>

Both test1.php and test2.php are blank; I just want to know that the request works.JaxManager.js

function JaxManager(){	var manager = this;	function Jax(){		var that = this;		var xmlHttpRequest;		init:{			if(typeof(XMLHttpRequest) != 'undefined'){				xmlHttpRequest = new XMLHttpRequest();				break init;			}						var activeXes = ['Msxml2.XMLHTTP.6.0', 'Msxml2.XMLHTTP.4.0', 'Msxml2.XMLHTTP.3.0', 'Msxml2.XMLHTTP', 'Microsoft.XMLHTTP'];			for(var i = 0; i < activeXes.length; i++){				try{					xmlHttpRequest = new ActiveXObject(activeXes[i]);					break init;				}catch(e){}			}			xmlHttpRequest = null;		}		if(xmlHttpRequest != null){			xmlHttpRequest.onreadystatechange = function(ev){				that.readyState = xmlHttpRequest.readyState;				if(xmlHttpRequest.readyState == 4){					that.responseXML = xmlHttpRequest.responseXML;					that.responseText = xmlHttpRequest.responseText;				}				if(that.onreadystatechange){					that.onreadystatechange(ev);				}			}					this.readyState = 5;			this.onreadystatechange = undefined;			this.responseXML = undefined;			this.responseText = undefined;			this.open = function(method, url, async){				xmlHttpRequest.open(method, url, async);				this.readyState = 0;			}			this.send = function(queryString){				xmlHttpRequest.send(queryString);			}		}	}	var reps = [];	this.get = function(url, query, callback, async){		if(!url || typeof(url) != 'string'){			throw 'A valid URL string must be provided as Parameter #1 "url" for JaxManager.get().';		}		if(!query || typeof(query) != 'string'){			var question = url.indexOf('?');			if(question == -1){				query = '';			}else{				if(question < url.length - 1){					query = url.substring(question + 1);				}				url = url.substring(0, question);			}		}		if(!callback || typeof(callback) != 'function'){			throw 'A non-null function must be provided as Parameter #2 "callback" for JaxManager.get().';		}		if(async === null || async === undefined){			async = true;		}		var rep;		look:{			for(var i0 = 0; i0 < reps.length; i0++){				if(reps[i0].readyState === 5){					rep = reps[i0];					break look;				}			}			rep = reps[reps.length] = new Jax();		}				rep.open('GET', url + '?' + query, async);		rep.onreadystatechange = function(){			callback(rep.readyState, {XML: rep.responseXML, text: rep.responseText});			if(rep.readyState == 4){				rep.readyState = 5; //This Jax is ready to be recycled.				rep.onreadystatechange = undefined;			}		}		return rep.send(null);	}	this.post = function(url, query, callback, async){		if(!url || typeof(url) != 'string'){			throw 'A valid URL string must be provided as Parameter #1 for JaxManager.post().';		}		if(!query || typeof(query) != 'string' || query == ''){			throw 'A valid query string must be provided as Parameter #2 for JaxManager.post().';		}		if(async === null || async === undefined){			async = true;		}		look:{			for(var i0 = 0; i0 < reps.length; i0++){				if(reps[i0].readyState === 5){					rep = reps[i0];					break look;				}			}			rep = reps[reps.length] = new Jax();		}				rep.open('POST', url, async);		rep.onreadystatechange = function(){			if(callback && typeof(callback) == 'function'){				callback(rep.readyState, {XML: rep.responseXML, text: rep.responseText});			}			if(rep.readyState == 4){				rep.readyState = 5; //This Jax is ready to be recycled.				rep.onreadystatechange = undefined;			}		}		return rep.send(query);	}}

Link to comment
Share on other sites

<html>	<head>		<title>Titled Document</title>		<script type="text/javascript" src="JaxManager.js"></script>		<script type="text/javascript">			function onload(){				window.jax = new JaxManager();				function callback(readyState, response){					if(readyState == 4){						alert('Response: ' + response.text);					}				}				jax.post('test1.php', 'query=null', callback);				jax.post('test2.php', 'query=null', callback);			}		</script>	</head>	<body>			</body></html>

Well, I learned something there--you have an onload function, not referenced in your <body> tag, and FireFox recognizes and executes it! IE does not; it needs <body onload="onbodyload()". Furthermore once this is included, that function name must not then be "onload" because if it is, FireFox then executes it recursively and gets an error!So that'll be why your seeing IE et al doing nothing.As to the AJAX error, you've probably noticed that the first call works, and the second is failing? The line that appears to be upsetting it is:
return rep.send(null);

With that line commented out, I'm seeing both calls succeed. I'm guessing you have that line because of the issues reusing the HTTP request object in IE? There is a workaround, isn't there, involving some such call with null or empty string. But Firefox doesn't seem to like it. So I think you may need to include a check to see whether it's IE before doing that. And the IE handling in general may need further work.Hope this moves you along a little.

Link to comment
Share on other sites

Woops, I thought I'd gotten it edited in time. See the top of the first post.Oh, I hadn't tested the onload thing in IE yet... I'll have to investigate that.And I don't know about that bug... I was just following the tutorials' instructions for GET requests. (POST doesn't use that line anyway... And the tutorials don't even mention it. :))Thanks!

Link to comment
Share on other sites

On the onload note, this works...

<html>	<head>		<title>Titled Document</title>		<script type="text/javascript">			var onLoad = function onload(){				alert('');			}		</script>	</head>	<body onload="onLoad();">			</body></html>

This works in FF and OP, but not IE:

<html>	<head>		<title>Titled Document</title>		<script type="text/javascript">			window.onload = function(){				alert('');			}		</script>	</head>	<body onload="onLoad();">			</body></html>

Because of this, I think the fact that the first doesn't work in OP is a bug (especially since the first is still considered to be equivalent to the last if you alert it).

Link to comment
Share on other sites

Well, I learned something there--you have an onload function, not referenced in your <body> tag, and FireFox recognizes and executes it!
That is because onload is technically a property of the window object, which is the default with() parameter (e.g. window.alert() is the same as alert() ). So, Firefox sees onload and automatically changes it to window.onload
Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...