What are the differences between JSON and JSONP?

json jsonp javascript
Mohammad picture Mohammad · May 22, 2010 · Viewed 204k times · Source

Format wise, file type wise and practical use wise?

Answer

Marius picture Marius · May 22, 2010

JSONP is JSON with padding. That is, you put a string at the beginning and a pair of parentheses around it. For example:

//JSON
{"name":"stackoverflow","id":5}
//JSONP
func({"name":"stackoverflow","id":5});

The result is that you can load the JSON as a script file. If you previously set up a function called func, then that function will be called with one argument, which is the JSON data, when the script file is done loading. This is usually used to allow for cross-site AJAX with JSON data. If you know that example.com is serving JSON files that look like the JSONP example given above, then you can use code like this to retrieve it, even if you are not on the example.com domain:

function func(json){
  alert(json.name);
}
var elm = document.createElement("script");
elm.setAttribute("type", "text/javascript");
elm.src = "http://example.com/jsonp";
document.body.appendChild(elm);

Related questions

What is JSONP, and why was it created?

I understand JSON, but not JSONP. Wikipedia's document on JSON is (was) the top search result for JSONP. It says this: JSONP or "JSON with padding" is a JSON extension wherein a prefix is specified as an input argument of …

Read More
JSON string to JS object

I am using a JS object to create graphs with Google visualization. I am trying to design the data source. At first, I created a JS object client-side. var JSONObject = { cols: [{ id: 'date', label: 'Date', type: 'date' }, { id: 'soldpencils', label: …

Read More
Javascript search inside a JSON object

I had a JSON string / object in my application. {"list": [ {"name":"my Name","id":12,"type":"car owner"}, {"name":"my Name2","id":13,"type":"car owner2"}, {"name":"my Name4","id":14,"type":"car owner3"}, {"name":"my Name4","id":15,"type":"car owner5"} ]} I had …

Read More