XMLHttpRequest status 0 error in Mozilla and Chrome

Question

I'm trying to make cross-domain cross-browser .js request (without any libs).

var isIE8 = window.XDomainRequest ? true : false;
var invocation = createCrossDomainRequest();
var url = 'http://someserver.com/cgi-bin/targets.cgi?sid=';

function createCrossDomainRequest(url, handler)
{
    var request;
    if (isIE8)
    {
        request = new window.XDomainRequest();
    }
    else
    {
        request = new XMLHttpRequest();
    }
    return request;
}

function sendTarget(sid,target)
{
    if (invocation)
    {              
        var phone_id = getCookie('phone_cookie');
        url = url + sid +'&target='+target+'&phone_id='+phone_id+'&url='+encodeURIComponent(document.URL);
        if(isIE8)
        {
            invocation.onload = outputResult;
            invocation.open("GET", url, true);
            invocation.send();
        }
        else
        {
            invocation.open('GET', url, true);
            invocation.onreadystatechange = handler;
            invocation.send();
        }
    }
    else
    {
        var text = "No Invocation TookPlace At All";
    }
}

function handler(evtXHR)
{
    if (invocation.readyState == 4)
    {
        if (invocation.status == 200)
        {
            outputResult();
        }
        else
        {
            var text = "Invocation Errors Occured";
        }
    }
}

function outputResult()
{
    var response = invocation.responseText;
}

It works in IE, but not Mozilla and Chrome. These browsers are getting the error "Invocation Errors Occurred". invocation.status is zero. Access-Control-Allow-Origin set to *.

What I need to do to solve this problem?

I cant use any libraries, just clean JS (tech issues). No JQuery! This code need to be on many client web-sites (not one or two). I don't need to get an response, just need to send the request. And I'm not looped on XMLHttpRequest - any ideas?

Answer 1

I've taken the code you supplied above and modified it slightly to be a bit more generic. However, you should be able to change it back to suit. The following code works in Chrome and Firefox:

var isIE8 = window.XDomainRequest ? true : false;
var url = 'http://www.phobos7.co.uk/research/xss/simple.php';
var resultText = '';
var invocation = createCrossDomainRequest();
makeRequest();

function createCrossDomainRequest(url, handler) {
    var request;
    if (isIE8) {
        request = new window.XDomainRequest();
    } else {
        request = new XMLHttpRequest();
    }
    return request;
}

function makeRequest() {
    if (invocation) {
        if (isIE8) {
            invocation.onload = requestSucceeded;
            invocation.open("GET", url, true);
            invocation.send();
        } else {
            invocation.open('GET', url, true);
            invocation.onreadystatechange = handler;
            invocation.send();
        }
    } else {
        resultText = "No Invocation TookPlace At All";
    }
}

function handler(evtXHR) {
    if (invocation.readyState == 4) {
        if (invocation.status == 200) {
            requestSucceeded();
        } else {
            resultText = "Invocation Errors Occured";
        }
    }
}

function requestSucceeded() {
    resultText = invocation.responseText;
    outputResult();
}

function outputResult() {
    document.getElementById( 'output' ).innerHTML = resultText;
}

You can test this here: http://jsfiddle.net/leggetter/3QfQe/

The response headers from this site - which allows the CORS - is:

Access-Control-Allow-Origin:*
Connection:Keep-Alive
Content-Type:text/html
Date:Wed, 12 Feb 2014 22:48:37 GMT
Keep-Alive:timeout=5, max=100
Server:Apache
Transfer-Encoding:chunked
X-Powered-By:PHP/5.3.24

Only the Access-Control-Allow-Origin:* is required.

If you use the JavaScript above and you ensure that the Access-Control-Allow-Origin:* header is set you will be able to make a cross domain request from JavaScript.