Question

I’m sending a POST from a chrome extension content script to a server I control. I setup the permissions in the manifest ok. Here is my XHR code. (I want to avoid jQuery for this). Its sending an empty responseText

var xhr = new XMLHttpRequest();
    xhr.open("POST",'http://mysite.com/make',true);
        xhr.onreadystatechange=function() {
            if (xhr.readyState == 4) {
                var res = JSON.parse(xhr.responseText);
                console.log(res);
            }
    }

    xhr.send({'textbox':data[0].user,'from':'extension'});

data[0].user is an object I got directly from the Twitter API

in my CI controller I have

$user = $this->input->get_post('textbox', TRUE);
$from = $this->input->get_post('from', TRUE);

$fullURL = 'http://www.google.com'; //example of a URL from code.

$json = $this->output->set_content_type('application/json');
$json->set_output(json_encode(array('URL' => $fullURL)));

The response text is empty

a jquery call on the other hand works fine

$.post("http://mysite.com/make", { 'textbox': data[0].user, 'from':'jquery' },
  function(data) {
    console.log(data);
});

Answer 1

Reason is simple, JQuery post method can accept JSON and then convert it to string and send to the server.

What you are trying to do is to directly send JSON here :

xhr.send({'textbox':data[0].user,'from':'extension'}) // Incorrect way

send method should either accept NULL or a string which is generally made up of QueryString Parameters like.

xhr.send("textbox="+ data[0].user + "&from=extension"); // Correct way

This will ensure that your data goes to the appropriate URL with textbox and from as post request parameters.
and queryString will be generated like textbox=username1234&from=extension in the packet’s body unlike one goes in Get with the headers along side the URL.

jQuery’s post method makes it simpler for you to format data you send using JSON and then internally it converts that to a queryString to send parameters.
You can’t directly send Javascript object like that with an XHR object!

Also checkout this example:

http://beradrian.wordpress.com/2007/07/19/passing-post-parameters-with-ajax/