Question

I have the following headers set on the server

response.addHeader("Access-Control-Allow-Origin", "*");
response.addHeader("Access-Control-Allow-Methods", "GET, POST, PUT");
response.addHeader("Access-Control-Allow-Headers","X-Custom-Header");

And i want to use the POST method to access a web service and send data to it but the problem is my setting up with the server is causing problems

I used the following method

function createCORSRequest(method, url) {
    var xhr = new XMLHttpRequest();
    if ("withCredentials" in xhr) {
        // XHR for Chrome/Safari/Firefox.
        xhr.open(method, url, true);
    }
    else if (typeof XDomainRequest != "undefined") {
        // XDomainRequest for IE.
        xhr = new XDomainRequest();
        xhr.open(method, url);
    } else {
        // CORS not supported.
        xhr = null;
    }
    return xhr;
}

and based on this object

url = "http://myurl.do";
var xhr = createCORSRequest('POST', url);
if (!xhr) {
    alert('CORS not supported');
    return;
}
var params = "name=pari123&action=initaction&gameId=slotreel3";
xhr.setRequestHeader('Content-Type', 'application/text/plain'); 
if(xhr.readyState == 4 && xhr.status == 200) 
{
    alert('Tested OK')
    xhr.send(params);
}
else
{
    alert('status not 200 or xhr is not ready');
}

// Response handlers.
xhr.onload = function() {
    var text = xhr.responseText;
    alert('Response from CORS request to ' + url + ': ' + text);
};

xhr.onerror = function() {
    alert('Woops, there was an error making the request.');
};

But always it alerts a message saying ‘status not 200 or xhr is not ready’ i am not able to proceed any one if you know please kindly help!

when i print the xhr.readyState its printing a value of 1

Answer 1

if(xhr.readyState == 4 && xhr.status == 200) 

This check must be placed in the onreadystatechange event handler. You obviously cannot have a 200 status code or a “finished” request before actually sending it.

What you wanted is probably this:

xhr.onreadystatechange = function() {
    if(xhr.readyState == 4 && xhr.status == 200) {
        alert('Tested OK');
        var text = xhr.responseText;
        alert('Response from CORS request to ' + url + ': ' + text);
    }
};
xhr.send(params);

If you want an else case to check for errors remember that you still need to check for xhr.readyState == 4. You don’t want your error-handling code to run for other readyStates.

There is no need for the onload event – when you get readyState == 4 you know the request has finished.