How do I call a server api from my phonegap app?

Question

I'm struggling to understand something that i'm sure is pretty basic. I've searched around everywhere and can't find a solution to my problem.

The most related stackoverflow question I found was this one: How do I call remote API using Phonegap for Android?

That post looked promising, but still doesn't work for me. I'm building my first PhoneGap app and trying to use the Grouped api.

I don't understand conceptually how to send and receive data from PhoneGap. I'm building everything locally, so I suppose this isn't technically PhoneGap related.

Here is my api call:

http://grouped.com/api?f=user_exists&email=ryan@ensomniac.com

Should return

{"msg": true}

But all I ever get when testing locally is "Error 200" with empty data. I feel like this guy:

http://www.youtube.com/watch?list=UU4_bwov47DseacR1-ttTdOg&feature=player_detailpage&v=GsqUZkmO-zk

I'm testing inside firefox 10.0.1 on Linux from 'localhost'. I assume running locally is as similar to PhoneGap as possible but could be wrong.

Here's the code I have now that I assume should work (but obviously doesn't):

function makeRequest() {
    var request = new XMLHttpRequest();
    request.open("GET", "http://www.grouped.com/api?f=user_exists&email=ryan@ensomniac.com", true);
    request.onreadystatechange = function() {
        if (request.readyState == 4) {
            if (request.status == 200 || request.status == 0) {
                console.log(request);
            }
        }
    }
    request.send();
}
makeRequest();

What am I doing wrong?

Thanks for the help, always.

score 2 · Accepted Answer · answered May 22 '12 at 13:05

2

The problem is you are testing from the file protocol in FireFox. FireFox is keeping your request from working because it is a Cross-site XMLHttpRequest. Some version of FireFox will allow you to enable cross site XHR's but I'm pretty sure this won't work for 10.0.1.

If it is possible for you to modify the server so that it allows requests from your domain that would be one solution.

If you don't have access to the server then you should switch to using Chrome for you development. If you start Chrome like:

chrome.exe --disable-web-security

you will be able to do cross site AJAX requests. As well Chrome is based off webkit so behaviour there will be closer to what you will see on Android, iOS and BB which all deploy webkit based browsers.

answered May 22 '12 at 13:05

Simon MacDonald

23,253
5
58
74

You're absolutely right. This was my problem. I found that I am able to simple use $.post() with phoneGap, and that makes my life very easy. Thanks! – Ryan Martin May 22 '12 at 19:58
Cool, you should accept the answer so folks will be able to find the correct answer easier. – Simon MacDonald May 23 '12 at 01:11
Oops sorry I could have sworn I had. – Ryan Martin May 23 '12 at 18:34

score 0 · Answer 2 · answered May 22 '12 at 01:33

0

I just ran

http://www.grouped.com/api?f=user_exists&email=ryan@ensomniac.com

via my web browser and got the correct JSON response. Your localhost must have problems communicating with the real world wide web, or something in your code is preventing the response. I didn't really look over the code to check for errors though.

answered May 22 '12 at 01:33

Connor Tumbleson

3,270
2
25
37

Thanks for your response. I am aware that the link works, I'm not sure why the code I posted below the api call doesn't work. – Ryan Martin May 22 '12 at 01:42
Well that is a JSON response and your using an XMLHttpRequest. Not sure if thats the problem. Something to look into. Your request might be expecting XML, but its getting JSON. – Connor Tumbleson May 22 '12 at 01:54

score 0 · Answer 3 · answered May 22 '12 at 12:50

You probably ran into a cross-domain restriction. Which platform are you developing on? On iOS you might have to add something like that to your Cordova.plist:

<key>ExternalHosts</key>
<array>
    <key>grouped</key>
    <string>www.grouped.com</string>
</array>

For Android it's buggy, and your best bet is to use jQuery and JSONP.

score 0 · Answer 4 · edited Aug 13 '13 at 10:39

0

You should use request.responseText to get the response body from the server.

edited Aug 13 '13 at 10:39

kleopatra

51,061
28
99
211

answered Aug 13 '13 at 10:32

user2678179

1

How do I call a server api from my phonegap app?

4 Answers4