XHR in Chrome Extension with CI

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);
});

Are you using FireBug/ Chrome-Dev tools ? Checkout what response the server is sending ? and go one step back.. try logging what JSOn string is PHP generating ? — Amogh Talpallikar, May 07 '12 at 07:00
I installed [chromePHP](http://www.chromephp.com/). will try to debug. — Chamilyan, May 07 '12 at 07:21
but before that just try xhr.post("textbox="+ data[0].user + "&from=extension"); instead of what you have done. I think it should work. — Amogh Talpallikar, May 07 '12 at 07:24
didn't work :/ , `Uncaught SyntaxError: Unexpected end of input xhr.onreadystatechange` , an API call from Twitter works though with extension XHR. It uses GET with query strings and callback=? though. — Chamilyan, May 07 '12 at 07:27
Just make sure data[0].user is a string and not json. If it is JSOn extract userId out of it. — Amogh Talpallikar, May 07 '12 at 07:29
hmm interesting idea, it actually was an object. I guess like you said jQuery has built in methods to handle it. — Chamilyan, May 07 '12 at 07:29
Hey By Mistake I said xhr.post(), try xhr.send but parameter should be queryString. xhr.send("textbox="+ data[0].user + "&from=extension"); and data[0].user should be a string as I said and not json . — Amogh Talpallikar, May 07 '12 at 07:34
yeah I figured it was send :). I tried it too. I think the problem is in fact the object vs string. It was interesting that jQuery just handles this scenario. I'll try it out and report back. — Chamilyan, May 07 '12 at 07:35
Did it work [then please accept my answer :)]? Actually a lot of Rest APIs : facebook,twitter etc will never send user data just as plain Id. They will send a full object with all his/her basic info including the userId. Just give me the link of your extension when its ready ! all the best ! — Amogh Talpallikar, May 07 '12 at 07:46
There could be something weird with CodeIgniter here. Here is another example of a question with a person integrating vanilla XHR with CI. Only jQuery seemed to work. I'm going to go deconstruct jQuery now to see why it works. http://stackoverflow.com/questions/308054/learning-how-to-use-ajax-with-codeigniter — Chamilyan, May 07 '12 at 23:35

Amogh Talpallikar · Accepted Answer · 2012-05-07T09:29:10.210

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/

edited May 07 '12 at 09:29

answered May 07 '12 at 07:07

Amogh Talpallikar

12,084
13
79
135

my server code doesn't accept query strings. Anyway to do this without adding query strings to the request? – Chamilyan May 07 '12 at 07:17
your server code accepts post parameters only. CodeIgniter's $this->input->get_post('textbox', TRUE) will get you textbox parameter from post request to that controller. but it ensures security and other aspects. Just try adding the change I told you to your AJAX code for send(). – Amogh Talpallikar May 07 '12 at 07:22
didn't work. It doesn't send the variables to the server script. I can echo out a static string from the server to the XHR responseText and that works. Keep in mind that I don't have query strings enabled. And I can't enable them. – Chamilyan May 07 '12 at 23:03
It seems, your problem is slowly slowly unfolding like a mystery novel with new new problem in the way :P – Amogh Talpallikar May 08 '12 at 05:20
Trap HTTP request, and try to find out what parameters does jQuery post sends and what does your standard xhr code is sending. Because if CI doesn't accept queryStrings then how is jquery's post doing it ? – Amogh Talpallikar May 08 '12 at 05:23
I actually suspect that the problem may be on the receiving end. Maybe I should echo out a JSON string instead or even change the mime type to .json – Chamilyan May 08 '12 at 06:13
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/10995/discussion-between-amogh-talpallikar-and-chamilyan) – Amogh Talpallikar May 08 '12 at 06:20
I Just checked, parameters with normal simple ajax code are goin as request payload and jquery sends them as form data. May be that is making the difference. – Amogh Talpallikar May 08 '12 at 07:44
good investigation. For now, I'm using jQuery. I just can't seem to make it read as a var in CI using `XMLHttpRequest`. Google recommends normal Javascript XMLHttpRequest but maybe jQuery being more error free is worth it? – Chamilyan May 08 '12 at 07:54
May be in some configuration in CI , normal post data params are rejected and since jQuery is sending it as multipart form data or something else, digging out the source code of that function might help. – Amogh Talpallikar May 08 '12 at 07:57
Check this out. http://stackoverflow.com/questions/10494574/what-is-the-difference-between-form-data-and-request-payload/ – Amogh Talpallikar May 08 '12 at 10:12
yeah, unfortunately I tried to set the request headers too. I'll have another look at it though, thanks for that. – Chamilyan May 08 '12 at 19:09

XHR in Chrome Extension with CI

1 Answers1