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

Hi Paul, please read up on JSONP

Brian
– Brian

2013-09-25 13:49:51 +00:00
Commented Sep 25, 2013 at 13:49 — Brian
– Brian, Commented Sep 25, 2013 at 13:49

Community · Accepted Answer · 2020-06-20 09:12:55Z

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

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Sep 25, 2013 at 13:52

user2736012

3,54318 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

James Montagne · Accepted Answer · 2013-09-25 13:52:45Z

0

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.

answered Sep 25, 2013 at 13:52

James Montagne

78.9k14 gold badges115 silver badges132 bronze badges

Collectives™ on Stack Overflow

Trouble understanding JSONP with jQuery

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related