AJAX trouble in internet explorer! (code currently works for firefox and chrome)

Question

So I've got an AJAX project which uses the XmlHttpRequest object to dynamically retrieve data from the server-side (in my case, I use JSON with PHP/MySQL in case that's relevant). Pretty much all my HTML elements are created dynamically via the javascript DOM, so it's the .js files doing the work.

Here's a typical .js file I use to get server-side info from PHP and then build the html:

var xmlHttp = createXmlHttpRequestObject(); 

function createXmlHttpRequestObject() {
    var xmlHttp; 
    try {
        xmlHttp = new XMLHttpRequest(); 
    } catch(e) {
        var XmlHttpVersions = new Array("MSXML2.XMLHTTP.6.0",
                            "MSXML2.XMLHTTP.5.0",
                            "MSXML2.XMLHTTP.4.0",
                            "MSXML2.XMLHTTP.3.0",
                            "MSXML2.XMLHTTP", 
                            "Microsoft.XMLHTTP"); 
        for(var i = 0; i < XmlHttpVersions.length && !xmlHttp; i++) {
            try {
                xmlHttp = new ActiveXObject(XmlHttpVersions[i]); 
            } catch(e) {} 
        }
    }
    if (!xmlHttp) alert("Error creating XmlHttpRequest object."); 
    else { return xmlHttp; } 
} 

function initialize_main() {
    if (xmlHttp) {
        try {

            xmlHttp.open("GET", "main_php.php", true); 
            xmlHttp.onreadystatechange = handleMainStateChange; //call a function when the state changes
            xmlHttp.send(null); 
        } catch(e) {
            alert("Can't connect to server: " + e.toString());
        } 
    }
}

function handleMainStateChange() {
    if (xmlHttp.readyState==4) {
        if (xmlHttp.status==200) {  
            try {
                init_main(); 
            } catch(e) {
                alert("Error reading the response: " + e.toString()); 
            }
        } else {
            alert("There was a problem retrieving data: " + xmlHttp.statusText); 
        }
    }
}

function init_main() {

var data = JSON.parse(xmlHttp.responseText); 

//now do stuff with the DOM or w/e 

}

So as I said everything is cool in firefox and chrome. But internet explorer tells me: "Error reading the response: TypeError: Object doesn't support this property or method". I'm a bit new to AJAX as you might guess, so thanks for any help!

Answer 1

I would highly recommend that you use JQuery so that you can write Javascript that doesn't care about the type of browser (JQuery does this for you): http://jquery.com/

Answer 2

Try using this function, for me it works for all browser

function getXMLHTTP()
{
    var xmlhttp = false;
    try
    {
        xmlhttp = new XMLHttpRequest();
    }
    catch(e)
    {
        try
        {
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        catch(e)
        {
            try
            {
                xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
            }
            catch(e1)
            {
                xmlhttp = false;
            }
        }
    }
    return xmlhttp;
}