Trouble understanding JSONP with jQuery

Question

If I wish to fetch data from a remote server, then JSONP is the tool of choice I believe. But I am confused by an example I have seen:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script type="text/javascript">

    $(document).ready(function() {

        $.ajax({
            dataType: 'jsonp',
            data: 'p3=c',
            jsonp: 'callback',
            url: 'http://someserver.com/app?p1=a&p2=b',
            success: function (data) {
                console.log("data="+data);

                $.each(data, function (i, r) {
                    console.log("i="+i);
                    console.log("r="+r);
                });
            },
        });
    });

</script>

I can see that in the request, a callback parameter has been added with value in the format jQuery1234567890. When I look at the app that processes that request, it extracts the callback parameter from the request and wraps the json data to be returned with that and relevant brackets, so it ends up returning something like this:

jQuery1234567890([{"x":"100","y":"101"},{"x":"200","y":"201"}])

So my first questions are:

(1) Is the app correct to have done what it has?

(2) What has jQuery / JSONP actually done for us?

I was assuming that jQuery would see the dataType of "jsonp", insert a script tag into the DOM, the browser would then download and execute the script. If that's right, has jQuery created the function jQuery1234567890, the implementation of which is to pass the parameter on to the success function?

(3) Is my understanding correct (I don't think it is)?

Thank you,

Paul

Answer 1

(1) Is the app correct to have done what it has?

Yes, that's a correct JSONP format

(2) What has jQuery / JSONP actually done for us?

Notified the server application that JSONP is desired by placing a &callback=jQuery1234567890 in the request

I was assuming that jQuery would see the dataType of "jsonp", insert a script tag into the DOM, the browser would then download and execute the script. If that's right, has jQuery created the function jQuery1234567890, the implementation of which is to pass the parameter on to the success function?

(3) Is my understanding correct (I don't think it is)?

Yes, your understanding is correct. It has created a script with a jQuery1234567890 function which is invoked when the requested scripted is loaded. And as you stated the parameter receives the data and passes it on to the $.ajax internals, which invokes the success callback

Answer 2

From the ajax docs for the jsonp option:

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.

So using jsonp: 'callback' overrides callback with callback , essentially doing nothing.

The other stuff you're seeing is generated by jQuery so that you don't have to do it yourself. You get to simply treat this request like any other ajax request in jquery and not worry about the implementation of the jsonp.