Please explain JSONP in jQuery

Question

I can't understand the doc of the jQuery.ajax, specifically two options: jsonp and jsonpCallback, so can somebody be so pleasant to explain?

What I do understand is that jsonp is a name of a GET parameter which server expects (usually 'callback') and jsonpCallback is a name of a function to wrap a response. Seems simple.

But the explanation at the jQuery.ajax doc makes this a bit complicated. I would like to cite the complete text for jsonp option here and mark with bold what is obscure to me:

jsonp

Override the callback function name in a jsonp request. This value will be used instead of 'callback' in the 'callback=?' part of the query string in the url. So {jsonp:'onJSONPLoad'} would result in 'onJSONPLoad=?' passed to the server. As of jQuery 1.5, setting the jsonp option to false prevents jQuery from adding the "?callback" string to the URL or attempting to use "=?" for transformation. In this case, you should also explicitly set the jsonpCallback setting. For example, { jsonp: false, jsonpCallback: "callbackName" }

So the questions are:

1.What does it mean "=?" or 'callback=?' (extra question mark)? When I perform a JSONP AJAX-request like here:

 $.ajax('http://fake.com',{
     dataType: 'jsonp',
     success: function(data) {console.log(data);}
 }); 

The URL looks like this, there is no such question mark:

http://fake.com/?callback=jQuery18104830878316494931_1352981996209&_=1352981999411

2.What is the extra parameter (underscore) _=1352981999411?

3.What do the words In this case, you should also explicitly set the jsonpCallback setting mean? I can't see any interrelationship. If I set { jsonp: false, jsonpCallback: "callbackName" }, as it is said in the doc the query will look like this:

http://fake.com/?_=1352981999411

There is no use of the "callbackName" at all so why to specify it?

My appreciation.

Answer 1

The callback name is optional, if you don't supply one it uses a default one. Hence, if you leave out onJsonLoad you just get callback.

What happens is the JSON is wrapped with a function, because JSONP works through the <script> tag, so your normal JSON:

{prop: value}

Becomes:

callback({prop: value});

When the script tag is loaded jQuery can then call this function and get back the JSON data.

The _=123456788 is just a Date.getTime() to stop the request from caching.

Answer 2

The idea behind JSONP is the following:

Because of the Cross domain policy, it is not allowed to request data for an external source. Let's say my server has a function that return the name of a person if you enter his phone number.

YOUR website, which is not on my domain, is not allowed to perform an ajax call to my server and receive the data Flater.

There is one exception to this rule, and that is with using scripts that are externally loaded. I can load a jQuery.js file hosted on another server etc. I cannot request data from an external server, but I can request javascript.

So it would impossible for you to receive this result:

Flater

But it is possible to put this on your page:

<script src="http://externalserver.com/script.js">

and you will receive regular javascript, e.g.

<script>
    function doSomething(value) {
        alert(value);
    }

    doSomething("First");
    doSomething("Second");
</script>

Which means (and here's the important part) that you could also receive the following javascript:

<script>
    doSomething("Flater");
</script>

Suppose you already defined a function doSomething() on your page. This would be perfactly valid javascript because it calls an existing function, event though the server where this snippet originated (http://externalserver.com/script.js) has no clue what happens in the function doSomething.

So technically, you were able to retrieve the data you wanted in the beginning (i used a string as example but JSON would've been just as valid), and the javascript around it is merely used as window dressing (the 'padding').

Now what most JSONP enabled sites let you do is CHOOSE the name of the function. For example:

<script src="http://externalserver.com/script.js?callback=doSomething">
<script src="http://externalserver.com/script.js?callback=banana">
<script src="http://externalserver.com/script.js?callback=Process_Name">

would return

<script>
    doSomething("Flater");
</script>
<script>
    banana("Flater");
</script>
<script>
    Process_Name("Flater");
</script>

Wich means that if you've defined the function name you are using as the callback parameter, you can effectively tell the external server which function it needs to pass the JSON to.

Which is very handy if you have multiple functions that all need to work.

I hope I was able to clear up the intended use of JSONP? If you have questions, just ask :-)

UPDATE

By the way, I used script tags in the example. Like you already mentioned, jQuery has progressed to the point where it basically looks like an ajax call (as it should). However, I assumed it would be easier to explain to you the core principles at play.

Answer 3

callback=?

Jquery will autogenerate the callback name when it sees the ?

In some API's you need to provide a specific callback as outlined by the API.

In most cases server simply uses $_GET['callback'] using php as example. In your case it would send back

jQuery18104830878316494931_1352981996209( /* json string*/)

jQuery18104830878316494931_1352981996209 is the callback.

To better understand, inspect a jsonp request in browser console Net or Network tab. You can see the params that jQuery sends, and see the full response