XMLHttpRequest object not being instantiated?

Question

I'm new to Ajax and this has me stumped. It's relatively simple but trips up on the onclick handler with the first xhr.open(). Firebug says it's not a function, my guess is the XMLHttpRequest object isn't being created, but I'm not sure. Anyone have any ideas?

Thanks in advance.

function init(){

function getXMLHTTP(){
 var xhr = false;
 if (window.XMLHttpRequest) {
  xhr = new XMLHttpRequest();
 }
 else if (window.ActiveXObject) {
   xhr = new ActiveXObject("Microsoft.XMLHTTP");
 }
 return xhr;
}

function updatePage(theData){
 $('results').innerHTML = theData;  //TODO: pretty this up with mootools
}

var xhr = getXMLHTTP();

if (xhr) {
 xhr.onreadystatechange = function(){
  if (xhr.readyState == 4) {
   if (xhr.status == 200) {
    var theData = xhr.responseText;
    updatePage(theData);   
   }
   else{
    alert("Error communicating to web service!");
   }
  }
 }

 $('submit_btn').onclick = function(xhr){
  if ($('state').value != "") {
   var theValue = $('state').value;
   xhr.open("GET", "/inc/calc.php?state="+theValue, true); //Ajax 101: 3rd argument marks object as asynchronous
   xhr.send(NULL);
  }
  else if ($('city').value != "") {
   xhr.open("GET", "/inc/calc.php?city="+$('city').value, true);
   xhr.send(NULL);   
  }
  else if ($('county').value != "") {
   xhr.open("GET", "/inc/calc.php?county="+$('county').value, true);
   xhr.send(NULL);   
  }
  else {
   //the form is empty, or just down payment is filled. returns whole freakin' table.
   xhr.open("GET", "/inc/calc.php", true);
   xhr.send(NULL);    
  }
 } 
}

}

Answer 1

The problem with your code is the onclick function. You have put the xhr in the argument list to the function. Remember that when a function is called, the value of this variable is set by the caller. In this case it would be the event dispatcher, and it would probably set the xhr variable to an event object, which does not have an open function.

If you remove the xhr variable from the argument list of the onclick function, then it will look for the xhr variable in the parent scope, the global scope, and it will find it there, and it should work. I haven't tested it though.

I'm assuming you are using some kind of framework as well (judging by the frequent use of $, and the reference to mootools). This framework probably has an ajax function built in, as well as a cross browser event model. Try using it instead, you will run into a lot less problems.

Answer 2

When assigning the onclick handler you create a new function that takes a parameter called xhr:

$('submit_btn').onclick = function(xhr){
   ...
   xhr.open("GET", "/inc/calc.php?state="+theValue, true);
   ...
}

The click on the button won't pass a XMLHttpRequest object the the handler, so xhr will not have an open() method. The global definition of xhr doesn't matter because it's shadowed by the local parameter definition.

Generally you should just generate a new local XMLHttpRequest object when you need it, not try to use a global one. For example use an onclick function that creates a new local XMLHttpRequest:

$('submit_btn').onclick = function(){
   var xhr = getXMLHTTP();
   xhr.open("GET", "/inc/calc.php?state="+theValue, true);
   ...
}