L'objet XMLHttpRequest n'est pas instancié?

Question

Je suis nouveau à Ajax et cela m'a bloqué. C'est relativement simple mais ça marche sur le gestionnaire onclick avec le premier xhr.open(). Firebug dit que ce n'est pas une fonction, je suppose que l'objet XMLHttpRequest n'est pas créé, mais je ne suis pas sûr. Quelqu'un a des idées?

Merci d'avance.

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

Le problème avec votre code est la fonction onclick. Vous avez mis le xhr dans la liste des arguments à la fonction. Rappelez-vous que lorsqu'une fonction est appelée, la valeur de cette variable est définie par l'appelant. Dans ce cas, il s'agirait du répartiteur d'événements, et il définirait probablement la variable xhr sur un objet événement, qui n'a pas de fonction ouverte. Si vous supprimez la variable xhr de la liste d'arguments de la fonction onclick, alors elle recherchera la variable xhr dans la portée parent, la portée globale, et elle la trouvera là, et cela devrait fonctionner. Je ne l'ai pas testé cependant. Je suppose que vous utilisez aussi une sorte de framework (à en juger par l'utilisation fréquente de $, et la référence à mootools). Ce cadre a probablement une fonction ajax intégrée, ainsi qu'un modèle d'événement cross-browser. Essayez de l'utiliser à la place, vous rencontrerez beaucoup moins de problèmes.

Answer 2

Lors de l'attribution du gestionnaire onclick vous créez une nouvelle fonction qui prend un paramètre appelé xhr:

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

Le clic sur le bouton ne passera pas un XMLHttpRequest objet le gestionnaire, alors xhr aura pas un open() méthode. La définition globale de xhr n'a pas d'importance car elle est masquée par la définition du paramètre local.

Généralement, vous devriez simplement générer un nouvel objet XMLHttpRequest local quand vous en avez besoin, sans essayer d'en utiliser un global. Par exemple, utilisez une fonction onclick qui crée une nouvelle XMLHttpRequest locale:

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