PhoneGap - Sending JSON encoding data error

Question

I am using Phonegap to connect to a server to authenticate a user. The server expects the data to be Json encoded, and I will get the response back from the server.

var serviceURL = "http://appdev/PEPS-CS-Services/";

The serviceURL (APPDEV) is hosted on our network within the office.

var loginData = {
    'strUniqueID' : '123',
    'UserName' : 'User123',
    'Password' : 'Password123'
};

I have checked the login credentials and they are fine. When I try the following:

$.ajax({
    type: "POST",
    url: serviceURL + "services/AuthenticationServices/authenticateUser",
    data: loginData,
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function(data) {
        alert(data);
    },
    failure: function(errMsg) {
        alert(errMsg);
    }
});

I get the Access-Control-Allow-Origin error in my console.

XMLHttpRequest cannot load http://appdev/PEPS-CS-Services/services/AuthenticationServices/authenticateUser. 
No 'Access-Control-Allow-Origin' header is present on the requested resource. 
Origin 'http://localhost' is therefore not allowed access.

I had a look around, and I was suggested to use Jsonp as the dataType in the ajax request, which does give me back the response I was looking for. However, it isn't alerted out as it should be, the console shows the url with the parameters used in the loginData variable, as below

Resource interpreted as Script but transferred with MIME type application/xml:
http://appdev/PEPS-CS-Services/services/AuthenticationServices/authenticateUser?callback=jQuery164017807046906091273_1396515434941&strUniqueID=123&UserName=Mark&Password=Password1&_=1396515434963"

When I open the link in a browser i get the correct response, as below

<ns:authenticateUserResponse xmlns:ns="http://services">
    <ns:return>SESSION ID HERE</ns:return>
</ns:authenticateUserResponse>

However, I also get the Uncaught SyntaxError: Unexpected token < error below it.

I have tried to change to data: loginData to data: {'data':$.toJSON(loginData)}, but still the same error.

My questions are the following:

Am I sending the data over correctly? Why does the jQuery164017807046906091273_1396515434941 get added to the URL before the parameters?

And why am I getting the Uncaught SyntaxError too?

Is this because the server is sending back the incorrect format of the data? It is currently sending back XML

Any help would be greatly appreciated, thanks

Answer 1

This is a familiar cross context issue, you are not allowed to request resource from another domain with simple ajax call and expect a result.

Instead, use a jsonp call and regiter a callback function to call when return result:

var success = function(data){
    /* parse JSON */
    data = $.parseJSON(data);
    /* show json parsed data */
    alert(data);
};

$.ajax({
  url: serviceURL + "services/AuthenticationServices/authenticateUser",
  dataType: 'jsonp',  //use jsonp data type in order to perform cross domain ajax
  crossDomain: true,
  data: loginData,
  success: success,
  error: function(errMsg) {
    alert(errMsg);
  }
});