I am trying to make an XHR with JavaScript, but I can't get it to work correctly.

When I see the right requests in the "Network" tab of the Chrome developer tools I see that they have a "Form Data" section where are listed all the informations sent with the request, like this:

Now, I've tried making my XMLHttpRequest in any way I know, but I can't get that result.

I have tried this:

var xhr = new XMLHttpRequest(),

    form_data = "data%5Btumblelog%5D=drunknight&data%5Bsource%5D=FOLLOW_SOURCE_REBLOG";

    // this is uri encoded: %5b = [ and %5D = ]



xhr.open('POST','https://www.somesite.com/page?' + form_data, false);

xhr.send();

But I got this "Query String Parameters" instead of "Form Data":

I have also tried this:

var xhr = new XMLHttpRequest(),

    formData = new FormData();



formData.append("data[tumblelog]", "drunknight");

formData.append("data[source]", "FOLLOW_SOURCE_REBLOG");

xhr.open('POST','https://www.somesite.com/page', false);

xhr.send(formData);

But I got this "Request Payload" instead of "Form Data":

And, finally, I have tried this:

var xhr = new XMLHttpRequest(),

    formData = {

        "data[tumblelog]": "drunknight",

        "data[source]": "FOLLOW_SOURCE_REBLOG"

    };



xhr.open('POST','https://www.somesite.com/page', false);

xhr.send(JSON.stringify(formData));

But I got another "Request Payload" instead of "Form Data":

Now, my question is: how can I send my XMLHttpRequest in order to obtain the same result as shown in the FIRST image?