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

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.

+1. Doh, completely read past the part where OP says they uploaded a json file =/
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?
@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.
+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

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.

And just so the OP understands, the response should look like func_callbk(JSON_OBJECT);
@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?
@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

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

3 Comments

Linked

Related