Cross-domain AJAX requests with JSONP

AJAX requests are very common nowadays, because it can improve user experience on your application, and also boost it’s usability. Asynchronous requests can be used for instance, to invoke an URI in order to process some logic without committing the browser on waiting until the end of the request. So, the user can still use the page, even if the logic hasn’t finished yet.

Cross-domain AJAX call, what is the matter?

However, there is a scenario where an application A, at http://www.applicationA.com needs to do an AJAX request to an URI at application B, let’s say http://www.applicationB.com/aGivenURI.

When this request is done, you’ll be faced with the nice and meaningful message “Access to restricted URI denied.“, or some variation on this message. But, what the heck is happening here? Why I can’t do a request to this other site?

The problem is…. the application B is at other domain, and browsers, for security reasons, don’t allow one to make request for a domain which isn’t your own domain (or a sub-domain of your domain).

And now, what do I do, if I can’t do an AJAX request to MY application whose domain isn’t the same as the application B? You could possibly do a server side request to that URI, and it would work, however, this is not AJAX.

JSONP to the rescue

If we pay carefully attention, we CAN do cross-domain request on our HTML sources. If you add the following snippet to your code, at the application A:

<script src="http://www.applicationB.com/aGivenURI" type="text/javascript"></script>

This code DOES a call to the application B, so, now we are doing a cross-domain request. So, if we can make a cross domain request this way, what if we instead of doing and XMLHttpRequest for doing AJAX request, we just created these <script> blocks on the fly, dynamically, thus, having “almost” the same behavior from the AJAX request.

Why almost? What will the given URI give to us? Ok, it’ll give us back the JSON we needed, probably, simple as the following:

{message: 'New car added successfully', model: 'Ferrari'}

But, if it’s being added at our code, there’s just no way to retrieve this JSON. Because, it’s a javascript file that’s being imported to my page, dynamically. But this is easy, what if we just wrap this JSON under a function and just make the function return this JSON, that way, we could make a call to that function, and it’ll return the JSON we need. So, now, the javascript code retrieved from the application B will be:

saveInformations({message: 'New car added successfully', model: 'Ferrari'});

And now, all we need to do to retrieve this JSON is a call to the saveInformations function. It works as a callback function.

Generally, these javascripts are generated dynamically, and so, you would also might be able to choose the name of you callback function, most of the times, passing a parameter to the requested URI.

This technique that just consists on exploring the use of the <script> tag, and adding it dynamically to your page, making it possible to do cross-domain requests, and retrieve the value by defining callback functions, is called JSONP (JSON Padding).

Simplifying it with JQuery

JQuery makes it very transparent to use JSONP, it does all the boilerplate code to create the script tag dynamically and invoke the callback function. All you have to do is to define the parameter callback=?, and if the parameter is present, JQuery will do all the needed to do JSONP, otherwise, it’ll do a normal AJAX request.

$.getJSON("www.applicationB.com/aGivenURI?callback=?", function(data) {
    alert(data.model + " - - " + data.message);
});

Pretty simple.

Seguir

Obtenha todo post novo entregue na sua caixa de entrada.