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/