PhoneGap ajax call fails everytime - ajax

Question

I am developing a mobile application using PhoneGap, and I have to access some services from another project.
I am using jquery-2.0.0.js and jquery-mobile-1.3.2.js.
$.ajax({
url: 'http://localhost:62465/api/account?email=johndoe#yahoo.com',
dataType: 'json',
success: function (data) {
alert(data.Name);
},
error: function (xhr, type) {
alert("Failed to load data");
alert(xhr + " " + type);
}
});
This ajax call fails everytime. In the config.xml I have the following line: <access origin="*" />
Where I might be going wrong!

Answer 1

The problem is that your phonegap application is requesting a local file from something that isn't a webserver. The local file is delivered with NO HTTP HEADERS - that means no "200 OK" header and no "404 Not Found" errors. So, the status code is assumed to be 0.
Straight javascript XHR will need to ignore status and perform your action on readystate == 4 (finished and ready). Like this:
var myrequest = new XMLHttpRequest();
myrequest.open('GET','localfile.html');
myrequest.onreadystatechange = function(){
if(myrequest.readyState == 4) {
var result = myrequest.responseText;
}
}
myrequest.send();
In MooTools, it's a relatively straightforward task of implementing an altered status test in the Request class - altering the return code test to also accept 0 for true. Like this:
Request.implement({
isSuccess: function(){
var status = this.status;
return ((status >= 200 && status < 300) || status === 0);
}
});
jQuery.... I have some things I'd like to say about jQuery - but I'll hold my tongue because this seems like a classy place.
To prepare jQuery for status == 0, you need to use the always event instead of the success event, you can test the status code there.
$.ajax({
url: '/echo/html/',
type: 'PUT',
data: "email=a#b.com"
}).always(function(data, textStatus, jqXHR){
switch(textStatus) {
case 200:
case 0:
alert('Success.');
break;
case 404:
alert('oops');
break;
}
});
Ajax in Cordova/Phonegap - Yay!

Answer 2

url of your query is localhost, thant means- the same device (android emulator or physical). I'm sure that this is your problem. You should use IP (or domain) of your api json server, maybe 192.168.1.1 (depending on your network configuration)

Answer 3

Are you using a physical device or an emulator ? iOS ? Android ?
I might be wrong, but if you're running your app on a mobile device you can't access to your localhost.

Answer 4

I solved the problem with the "GET" call, but now I am trying to make a "PUT" call and it's the same problem, always fails.
$.ajax({
url: '/echo/html/',
type: 'PUT',
data: "email=a#b.com",
success: function(data) {
alert('Success.');
}
});

Answer 5

If the url: 'http://localhost:62465/api/account?email=johndoe#yahoo.com' is not reachable from your mobile, there's a very useful trick to use.
With www.ngrok.com, you can assign an internet domain to your locally unreachable port.
Just signup, get an access token, and then you can use:
ngrok -authtoken myauthtoken -subdomain=mysubdomainname 62465
And then you can access your computer with the url http://mysubdomainname.ngrok.com/api/account?email=johndoe#yahoo.com

Answer 6

(For people with similiar problems)
Use ajax error to know what is wrong:
error: function(jqXHR, exception){
var msg = '';
if (jqXHR.status === 0) {
msg = 'Not connect.\n Verify Network.';
} else if (jqXHR.status == 404) {
msg = 'Requested page not found. [404]';
} else if (jqXHR.status == 500) {
msg = 'Internal Server Error [500].';
} else if (exception === 'parsererror') {
msg = 'Requested JSON parse failed.';
} else if (exception === 'timeout') {
msg = 'Time out error.';
} else if (exception === 'abort') {
msg = 'Ajax request aborted.';
} else {
msg = 'Uncaught Error.\n' + jqXHR.responseText;
}
console.log(msg);
}