Accessing remote data through cross-domain ajax call in jquery

24 / Sep / 2012 by raj 5 comments

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.

FOUND THIS USEFUL? SHARE IT

comments (5)

  1. rick

    You can side-step CORS by using a proxy and get non-JSONP data. Yahoo has one (YQL). Here’s an implementation using jQuery.ajax(), it works for both XML and HTML: gist.github.com/rickdog/d66a03d1e1e5959aa9b68869807791d5

    Reply
  2. Asop Nat

    Nice article. I have found something for apache end need to be configured for cross domain ajax. Here is the URL techflirt.com/cross-domain-ajax-request

    Reply
  3. html unordered

    Hi colleagues, how is the whole thing, and what you desire to say on the topic of this article, in my view its genuinely awesome in support of me.

    Reply
  4. Amazon Dealkiller

    Thznks for aany other informative web site. The place else could I get that kind of info written inn such an ideal way?
    I’ve a project that I am simply noow working on, and I’ve been on the glance out for such info.

    Reply
  5. Nadeem

    Hello Raj,

    I works upon grails and if i have to access grails service through a PhoneGap application than whats the configuration i have to do at the grails app end.

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *