Accessing remote data through cross-domain ajax call in jquery

While developing a mobile app using phonegap ( or otherwise also 🙂 ), we can access remotely hosted mysql database using jquery ajax calls. But this interaction between jquery and mysql database cannot happen directly. We will need to specify a server side script (in PHP terminology) or a controller action (in Grails Terminology) that will fetch data from the mysql database and serve it to the jquery call. Jquery will simply make a cross-domain ajax request to the server side script and the script will send requested data as response.

For a successful cross-domain communication, we need to use dataType “jsonp” in jquery ajax call.

JSONP or “JSON with padding” is a complement to the base JSON data format which provides a method to request data from a server in a different domain, something prohibited by typical web browsers.

When we specify dataType as jsonp, a “callback” parameter is appended to the request url and jquery creates a function whose name is the value of callback parameter. On server side, the script receives the “callback” parameter value(which is name of the function) and sends the data as argument to that function. Alternatively, that data is also available in the success function of jquery.

Jquery Code :

[javascript]
function crossDomainCall(url,data,fnSuccess,fnError){
$.ajax({
type:’POST’,
url:url,
contentType:"application/json",
dataType:’jsonp’,
crossDomain:true,
data:data,
success:fnSuccess,
error: fnError
});
}

function authenticateUser(username, password) {
var url = ‘http://www.example.com/user/authenticate’;
var data={username:username, password:password};
var fnSuccess=function (dataReceived) {
if(dataReceived) {
alert("Welcome "+dataReceived.name);
}else{
alert("Authentication failed")
}
};

var fnError=function (e) {
alert(e);
};
crossDomainCall(url,data,fnSuccess,fnError);
}
[/javascript]

Server side code :
[java]
def authenticate(String username, String password){
User user=User.findByNameAndPassword(username,password)
if (user) {
render "${params.callback}(${user as JSON})"
}else{
render "${params.callback}(null)"
}
}
[/java]

Here, the function name is received from params.callback and data is sent in json form as an argument to the function.

Hope it helps.