JSONP Callback function

Question

I was looking into the concept of JSONP callback function. I read some articles regarding that and wanted to get a good grasp of the concept of JSONP.

So, I uploaded one json file to the server - json file

And here is the js code which I wrote to retrieve the data. The call is made from localhost to the abhishekprakash.com.

var xhr;
var dataList;
xhr = new XMLHttpRequest();

xhr.open('GET', 'http://abhishekprakash.com/script/example.json?callback=func_callbk',  true);
xhr.send();

func_callback = function(data){
    alert(data.data.people[0].id);
}

xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
            console.log(dataList);
    }
};

And this is the response that I get in the console:

snap shot of console

The callback function is called but it does not contain the Json data. What am I missing?

Any help is appreciated.

Thanks

Which callback is called? The onreadystatechange or the func_callback? Seems that your response is JSON, not JSONP, so I can't see how the func_callback would be invoked. — user1106925
– user1106925, Commented Apr 19, 2013 at 5:29
That service does not return a proper JSONP response. Is it supposed to explicitly support JSONP calls? — deceze
– deceze ♦, Commented Apr 19, 2013 at 5:29
@deceze Since the call is cross domain it should be a JSONP. This is thee criteria for JSONP, right? — Abhishek Prakash
– Abhishek Prakash, Commented Apr 19, 2013 at 5:41
Either set cors headers or use jsonp. There is a good article on on wikipedia about same origin policy and you're completely misunderstanding the difference between JSON and JSONP. JSON is "{\"message\":\"hello world\"}" JSONP is callback({message:"hello world"}). JSON can be retreived with xhr and jsonp should be retreived by adding a srcipt element and setting it's src attribute to the url where jsonp comes from. Then in your code you need to provide a function for the callback — HMR
– HMR, Commented Apr 19, 2013 at 5:44

deceze · Accepted Answer · 2013-04-19 05:34:33Z

16

That example service returns JSON, not JSONP.

The point of JSONP is that due to Same Origin Policy security restrictions, Javascript from domain A cannot make a GET request to resources on domain B; in other words a script cannot retrieve data cross-domain.

JSONP solves this by making domain B explicitly cooperate in the cross-domain data sharing. The script from domain A specifies the name of a callback function and embeds the URL of domain B in the document as if it were including a regular external Javascript file. Domain B then outputs data like this:

callbackFuncName({ data : foo, ... });

That means domain B explicitly outputs a Javascript snippet which calls the specified callback function with the data.

So, unless domain B explicitly cooperates in this, you cannot simply get a JSONP response from it.

answered Apr 19, 2013 at 5:34

deceze♦

525k89 gold badges806 silver badges954 bronze badges

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

4 Comments

Ja͢ck Over a year ago

+1. Doh, completely read past the part where OP says they uploaded a json file =/

Abhishek Prakash Over a year ago

So, is it like I have to make some adjustments in my domain where the json file lies, to make it co operate with the domain which needs the data?

deceze Over a year ago

@user Yes. You need a server-side script to return the JSON data wrapped in the specified callback function. Also see Jack's answer for how to properly make the call from Javascript.

haxpor Over a year ago

+1 I like that you clearly say the other end needs to collaborate in sending proper data back too. Not just one end, it needs both.

Community · Accepted Answer · 2017-05-23 12:33:34Z

7

The XHR is constrained by cross-domain rules; to use JSONP you need to add a script element:

function func_callbk()
{
    console.log(arguments);
}

var s = document.createElement('script');
s.type = 'text/javascript';
s.src = 'http://abhishekprakash.com/script/example.json?callback=func_callbk';
var h = document.getElementsByTagName('script')[0];
h.parentNode.insertBefore(s, h);

As pointed out by Ian in the comments, the proper response of your server should be something like this:

func_callbk('hello world')

Update

If you wish to make this work without JSONP (e.g. if the response should always be JSON), you need to look into CORS as explained in this answer.

edited May 23, 2017 at 12:33

CommunityBot

11 silver badge

answered Apr 19, 2013 at 5:31

Ja͢ck

174k39 gold badges269 silver badges317 bronze badges

3 Comments

Ian Over a year ago

And just so the OP understands, the response should look like func_callbk(JSON_OBJECT);

Kedar Mhaswade Over a year ago

@Ja͢ck Can you add the script element more directly? I picked the github api example demoing their jsonp and modified it slightly and it seems to work. It's not necessary that you modify the DOM to add the script tag, right?

Ja͢ck Over a year ago

@KedarMhaswade It's not necessary if the script is already included in the document.

Collectives™ on Stack Overflow

JSONP Callback function

2 Answers 2

4 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related