I don't want to create a new ajax object every time I press a button, because it's bad programming practice. (Slower + Memory Usage) (Or do I have to do that?)

So I have this init function:
Code:
function initAJAX()
{
	
	var ajaxRequest;  // magic variable
	
	try{
		// Opera 8.0+, Firefox, Safari
		ajaxRequest = new XMLHttpRequest();
	} catch (e){
		// Internet Explorer Browsers
		try{
			ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
		} catch (e) {
			
			try{
				ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
			} catch (e){
				// Something went wrong
				alert("Your browser broke!");
				return false;
			}
		}
	}
	
	return ajaxRequest;
}
It returns the ajaxRequest object, or whatever it is.

In my html header source it looks like this:
Code:
<script src="ajaxinit.js">
ajaxRequest=initAJAX();
</script>
(maybe this should be in the body?)


Code:
<form name="testform">
   <input name="test_button" type="button" FISHY="ajaxFunction(ajaxRequest);" value="Test" />
   
   <input name="testbox" type="text" id="testboxid"/>
</form>
ajaxFunction handles the Ajax update of a text field displaying the time, and takes ajaxRequest as a param.

But this doesn't seem to work. Does the scope of the ajaxRequest variable end after </script>?


How can I debug the code line by line?