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.

The object doesn't work the same in every browser. If you want to support you should really use a library like jQuery. — benvds, Mar 24 '11 at 11:35
I have used it but i would rather create my own set of small libraries to learn more, also this is pretty much the same as jQuery libraries but in a smaller file as this is specified to my need only. Ive probably missed a comma or forgot to put a null in somewhere i just need a fresh pair of eyes on it cus mine hurt :( lol. Thanks for the reply though bud :) — Ash, Mar 24 '11 at 11:35
Also the object has been around since the 1990's in IE6, it does work in every browser :/ — Ash, Mar 24 '11 at 11:36
@Ash While the object *has* been around, it's still different across browsers -- as you can tell from your createXMLHttpRequest function, which tries to create it in three different ways, each of which could succeed, depending on the browser that's running the code! — Matt Gibson, Mar 24 '11 at 11:48
I didnt say it wasnt different but all 'modern browsers' will use the XMLHttpRequest object and all browsers DO support it. That was my arguement. Id rather build it myself than use someone elses libraries that 1 give me too much extra that i dont need and 2 wont really help me become a software engineer is all i was saying... — Ash, Mar 24 '11 at 12:01
P.s. Im not trying to argue with anyone i just need to understand this from the ground up... Thank you guys for pointing out jQuery to me and thank you for your responces :) i apologise for seeming so negative! — Ash, Mar 24 '11 at 12:09

Shadow The GPT Wizard · Accepted Answer · 2016-12-14T06:49:18.187

14

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;
}

edited Dec 14 '16 at 06:49

answered Mar 24 '11 at 11:37

Shadow The GPT Wizard

66,030
26
140
208

Hm, yeah, I guess this is the real reason. – Ionuț G. Stan Mar 24 '11 at 11:41
1

AHH! Fantastic, i see what you mean. I was being lazy using the onload method andd.....Shadow Wizard - You Rock. Thank you so much everyone that helped!!!!! – Ash Mar 24 '11 at 11:53
Cheers @Ash, I'm glad I could dig my ancient AJAX code to come with the exact code. :) (No pressure, but feel free to upvote if you're **so** happy about it :p) – Shadow The GPT Wizard Mar 24 '11 at 11:55
Wheeey ahead of ya buddy thank you so much! 2 days of brick wall head banging, youve saved me from an IE related terminal recluse! :D – Ash Mar 24 '11 at 11:59
@Ash glad to be your saviour... for the record, I do recommend you to use jQuery as you'll surely stumble into such cross browser problems in the future, and jQuery solve most, if not all, of those problems for you. :) (Although I won't mind getting more points if you prefer to stick with pure JS and use this place to climb the walls you face) – Shadow The GPT Wizard Mar 24 '11 at 12:04
I have used jQuery quite a bit and it is great for what it does BUT im a student at university and would have no idea of how the web worked if all i do is use the even higher level libraries other people have made. I understand the why re invent the wheel but why not if you dont understand what the wheel is and is made of first? – Ash Mar 24 '11 at 12:06
1

P.s. Im not trying to argue with anyone i just need to understand this from the ground up... Thank you guys for pointing out jQuery to me and thank you for your responces :) i apologise for seeming so negative! – Ash Mar 24 '11 at 12:10
@Ash I'm totally with you.... for years I also avoided any libraries for those exact reasons you state. But when you need something to be done and have a time limit such things become crucial.. doing it yourself might take one or two full *days* while libraries give you the tools to do the same thing in one or two *hours*. But in general, you're correct to get your own hands dirty. :-) – Shadow The GPT Wizard Mar 24 '11 at 12:18
Yup, looks like it's only on the xhr object for [IE9 and up](http://help.dottoro.com/ljspgwvf.php) – Hashbrown Dec 14 '16 at 02:40
@Hashbrown thanks for the link, I didn't research back then. – Shadow The GPT Wizard Dec 14 '16 at 06:52

score 1 · Answer 2 · answered Mar 24 '11 at 11:38

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.");
  };

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

2 Answers2

Linked