JSONP is a way of getting around the browser's same-origin policy. How? Like this:
The goal here is to make a request to otherdomain.com
and alert
the name in the response. Normally we'd make an AJAX request:
$.get('otherdomain.com', function (response) {
var name = response.name;
alert(name);
});
However, since the request is going out to a different domain, it won't work.
We can make the request using a
tag though. Both
and $.get('otherdomain.com')
will result in the same request being made:
GET otherdomain.com
Q: But if we use the
tag, how could we access the response? We need to access it if we want to alert
it.
A: Uh, we can't. But here's what we could do - define a function that uses the response, and then tell the server to respond with JavaScript that calls our function with the response as its argument.
Q: But what if the server won't do this for us, and is only willing to return JSON to us?
A: Then we won't be able to use it. JSONP requires the server to cooperate.
Q: Having to use a
tag is ugly.
A: Libraries like jQuery make it nicer. Ex:
$.ajax({
url: "http://otherdomain.com",
jsonp: "callback",
dataType: "jsonp",
success: function( response ) {
console.log( response );
}
});
It works by dynamically creating the
tag DOM element.
Q:
tags only make GET requests - what if we want to make a POST request?
A: Then JSONP won't work for us.
Q: That's ok, I just want to make a GET request. JSONP is awesome and I'm going to go use it - thanks!
A: Actually, it isn't that awesome. It's really just a hack. And it isn't the safest thing to use. Now that CORS is available, you should use it whenever possible.