XMLHttpRequest won't work in IE 7/8 but works in other browsers

Question

I've developed a web application that works well on chrome and firefox. However when it came to testing time and it doesn't work properly in IE. It just doesn't seem to actually get the request?

here's the Javascript code:

function createXMLHttpRequest() {
    var xmlhttp = false;
    if (window.XMLHttpRequest) {
        xmlhttp = new XMLHttpRequest();
    } else if(window.ActiveXObject) {
        try {
            xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            try {
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e) {
                xmlhttp = false;
            }
        }
    }
    return xmlhttp;
};




function checkForData(){

    var target = document.getElementById('accordion');
    var loading = document.getElementById('controls');

    var xhr = createXMLHttpRequest();


    loading.innerHTML = '<img src="../images/loading.gif" width=20 height=20 />Querying the Database';

    xhr.open('GET','getData.php',true);
    xhr.send(null); 

    xhr.onload = function(){
        loading.innerHTML = '<a href="../classes/php/print.php" />Print Report</a><br/><br/><a href="../index.php" />HomePage</a><br/><a href="../classes/php/actionedClass.php" />Refresh</a><br/><a href="../classes/php/logout.php" />Logout</a><br/>';

        target.innerHTML = xhr.responseText;
//      addPrettyness();

    };
    xhr.onerror = function (){
        target.innerHTML = 'Failed :(';
    };

}

function addPrettyness(){
    $(function() {
                    var stop = false;
                    $( "#accordion h3" ).click(function( event ) {
                        if ( stop ) {
                            event.stopImmediatePropagation();
                            event.preventDefault();
                            stop = false;
                        }
                    });
                    $( "#accordion" )
                            .accordion({
                                collapsible: true,
                                header: "> div > h3"});
    });
}

function checkAgain(){
    setInterval('checkForData()',30000);            //Every 30 seconds run the check for new data script

}


function changeAction(action, actionChangeId){

    xhr = new XMLHttpRequest();

    if(action == 0){


        var loading = document.getElementById('controls');
        loading.innerHTML = '<img src="../images/loading.gif" width=20 height=20 />Sending to the Database';        

        xhr.open('GET','../classes/php/actionNo.php?actionChangeId='+actionChangeId,true);
        xhr.send();

        xhr.onload = function(){
            checkForData();
        };

        xhr.onerror = function(){
            alert('Failed to change action... Try again please!');
        };

    }else if(action == 1){
        xhr = new XMLHttpRequest();

        var loading = document.getElementById('controls');
        loading.innerHTML = '<img src="../images/loading.gif" width=20 height=20 />Sending to the Database';        


        xhr.open('GET','../classes/php/actionYes.php?actionChangeId='+actionChangeId,true);
        xhr.send();

        xhr.onload = function(){
            checkForData();
        };

        xhr.onerror = function(){
            alert('Failed to change action... Try again please!');
        };
    }
}

function startEngine(){
    checkForData();
    //checkAgain();

}


window.onload = startEngine;

and the .php file it requests from echos back a string result to the javascript.

Answer 1

As mentioned here, Internet Explorer supports the onload event of the XMLHttpRequest object only since version 9.

So, for IE 8 and below, you can do it in the old fashioned way:

xhr.onreadystatechange = function()
{
    //ready?
    if (xhr.readyState != 4)
        return false;

    //get status:
    var status = xhr.status;

    //maybe not successful?
    if (status != 200) {
        alert("AJAX: server status " + status);
        return false;
    }

    //Got result. All is good.
    loading.innerHTML = '<a href="../classes/php/print.php" />Print Report</a>' + 
        '<br/><br/><a href="../index.php" />HomePage</a><br/>' + 
        '<a href="../classes/php/actionedClass.php" />Refresh</a><br/>' + 
        '<a href="../classes/php/logout.php" />Logout</a><br/>';
    target.innerHTML = xhr.responseText;

    return true;
}

Answer 2

From Wikipedia:

if (typeof XMLHttpRequest == "undefined")
  XMLHttpRequest = function () {
    try { return new ActiveXObject("Msxml2.XMLHTTP.6.0"); }
      catch (e) {}
    try { return new ActiveXObject("Msxml2.XMLHTTP.3.0"); }
      catch (e) {}
    try { return new ActiveXObject("Msxml2.XMLHTTP"); }
      catch (e) {}
    //Microsoft.XMLHTTP points to Msxml2.XMLHTTP.3.0 and is redundant
    throw new Error("This browser does not support XMLHttpRequest.");
  };