title: Javascript XMLHttpRequest won't send with IE 8 or 9 but works with IE 10
body: <p>I am currently having a lot of troubles making ajax works with IE versions inferior to 10 while I have no problem with Firefox, Chrome, Safari, Opera and even IE 10. My website just shows 3 select menus linked together, 2 of which get filled with data coming from a mysql database whenever something is selected in the first one and then in the second one. Apache logs don't show any POST request being done when using IE 8 or 9 and my select menus won't get filled with data.</p>
  
  <p>This is my javascript code:</p>
  
  <pre><code>function getXMLHttpRequest() {
  
     var xhr = null;
  
     if (window.XMLHttpRequest || window.ActiveXObject) {
        if (window.ActiveXObject) {
           try {
              xhr = new ActiveXObject("Msxml2.XMLHTTP");
           } catch(e) {
              xhr = new ActiveXObject("Microsoft.XMLHTTP");
           }
        } else {
           xhr = new XMLHttpRequest();
        }
     } else {
        alert("Your browser doesn't support XMLHTTPRequest...");
        return null;
     }
  
     return xhr;
  
  }
  
  function request(oSelect) {
  
     var value = oSelect.options[oSelect.selectedIndex].value;
  
     var xhr = getXMLHttpRequest();
  
     xhr.onreadystatechange = function() {
        if(xhr.readyState == 4 &amp;&amp; (xhr.status == 200 || xhr.status == 0)) {
           displayOptions(xhr.responseText, oSelect);
        }
     }
  
     xhr.open("POST", "ajax.pl", true);
     xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
     xhr.send(oSelect.name + "=" + value);
  
  }
  
  function displayOptions(oData, oSelect) {
  
     if (oSelect.name == "genus") {
        document.getElementsByName("species")[0].disabled = false;
        document.getElementsByName("species")[0].innerHTML = oData;
        document.getElementsByName("subspecies")[0].disabled = true;
        document.getElementsByName("subspecies")[0].innerHTML = "";
     }
     if (oSelect.name == "species") {
        document.getElementsByName("subspecies")[0].disabled = false;
        document.getElementsByName("subspecies")[0].innerHTML = oData;
     }
  
  }
  </code></pre>
  
  <p>So far I have tried to change the xhr.open command from POST to GET, but without any luck. I also tried to put the absolute path to the perl cgi in the xhr.send command, but without any effect on IE 8 at all.</p>
  
  <p>I have also tried the following thing:</p>
  
  <pre><code>xhr.onreadystatechange = function() {
     if(xhr.readyState == 0) {
        alert("zero");
     }
     if(xhr.readyState == 1) {
        alert("one");
     }
     if(xhr.readyState == 2) {
        alert("two");
     }
     if(xhr.readyState == 3) {
        alert("three");
     }
     if(xhr.readyState == 4 &amp;&amp; (xhr.status == 200 || xhr.status == 0)) {
        alert("four");
        displayOptions(xhr.responseText, oSelect);
     }
  }
  </code></pre>
  
  <p>This gives me the following output with Chrome:</p>
  
  <pre><code>one
  two
  three
  four
  </code></pre>
  
  <p>While I have this one with IE 8:</p>
  
  <pre><code>one
  one
  four
  </code></pre>
  
  <p>Since I'm a newbie I fail to find what could cause this problem. I've been wandering the web for answers but still haven't found one.</p>
  
  <p>Any would then be much much appreciated as I start to be desperate.</p>