It just takes 15 seconds. Send your
details and we’ll get back to you soon.

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 :

	    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);
        }

Server side code :

 
	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)"
		    }
    	}

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.
Have Fun :)


Posted in Database, Grails, Javascript/Ajax/JQuery | Tagged , , , , , .

5 Responses to Accessing remote data through cross-domain ajax call in jquery

  1. Nadeem says:

    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.

  2. Bulks with the advertisers are primarily private house owners,
    letting managers and property agents. Businesses will
    heavily dependant upon customers for survival, without customers an enterprise would cease
    to exist. ” Employees at Nike are encouraged to get curious and offered to new ideas, whatever their source.

    Visit my blog … http://www.auto-oc.com.pl

  3. Using ingenious technology and innovation the Romans made an Empire that
    withstood the test of energy. This business will likely be operated in the
    owner’s home and will probably be done entirely about the internet.
    Donnie Jonston may be the author of this information about
    how to make money on Ebay Donnie has a lot of work experience being a writer as well
    as working with drop shippers in the variety
    of entrepreneurial ventures.

    my blog post … http://www.intersad.pl

  4. It does take time to come up having a website that gives you the much needed results hence the web developer must be ready to help you along the
    route. The cost of starting a baby planning business is very low.
    In most cases building and starting a business means taking many
    risks, which is exactly why many people don’t go into business.

    my web blog: Jak skutecznie przygotować się do targów.

  5. Business cards are pretty much one of the standard commercial printing products that practically every business and professional avails
    of. Visually-compelling, interactive dashboards, reports,
    and data mashups deliver insights and empower users, resulting
    in greater adoption. Business loans tend to carry
    a high rate of interest.

    Visit my weblog – Oferty noclegowe w naszym kraju

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>