ajax php javascript : error when using POST method

Question

I searched on google, and there are so much question about this topic on stackoverflow. Such as 'data not being sent on post method', etc. But seem not asnwer my question

The case is almost the same with other questions. These are the error msg:

Firefox (v21) :

InvalidStateError: An attempt was made to use an object that is not, or is no longer, usable.
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');

Chrome (v27) :

Uncaught Error: InvalidStateError: DOM Exception 11

When the request is sent by GET, there is no error. And all GET data received well.

But when sent by POST + setRequestHeader, itu occurs error like above. When setRequestHeader removed, the error is gone. No error, but the POST data is not received. i print_r($_POST); then the array is empty

Question Updated. Here is the caller:

goServer({
    url     : 'users/sign-in.php',
    method  : 'POST',
    data    : 'randomId=' + randomId + '&name=' + name + '&password=' + password,
    done    : function(response) {
        alert(response);
    },
    fail    : function(response) {
        alert(response);
    }
});

And here is the functions (sorry, long lines ):

function randomString() {
    var str = new Date().getTime(),
    str2    = Math.random();

    str     = str.toString();
    str2    = str2.toString();
    str2    = str2.substring(2,7);
    str     += str2;

    return str;
}



function goServer(opts) {
    var xhr    = new XMLHttpRequest();
    xhr.onreadystatechange = requestComplete;

    function requestComplete() {
        if ( xhr.readyState === 4 ) {
            if ( xhr.status === 200 ) {
                opts.done(xhr.responseText);
            } else {
                opts.fail(xhr.responseText);
            }
        }
    }

    if ( !opts.method || opts.method === undefined ) {
        opts.method    = "GET";
    }

    if ( !opts.cache || opts.cache === undefined ) {
        opts.cache    = false;
    }

    if ( opts.cache === false ) {
        opts.url    += '?nocache=' + randomString();
    } else {
        opts.url    += '?nocache=false';
    }

    if ( opts.method === "GET" ) {
        if ( opts.data !== '' && opts.data !== undefined ) {
            opts.url    += '&' + opts.data;
        }
        opts.data    = '';
    } else {
        xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
    }

    xhr.open(opts.method, opts.url, true);
    xhr.send(opts.data);

}

Note, the data parameter (opts.data) is set to the url when it sent by GET. When sent by POST, the paramater is set to the xhr.send(opts.data);

Question : How to get the POST data correctly?

Thank you

Answer 1

Call xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded'); after you call xhr.open

Also opts.data should be a string containing key/value pairs. e.g. key=value&method=post