{Carrer web log} ←

About JSONP in JavaScript

Thursday, November 04, 2010 { 4 Comments }

Many people are confused about the use of JSONP. I want to explain the difference between JSON and JSONP in JavaScript.

JSON (JavaScript Object Notation) is a lightweight data-interchange format.
Example of JSON:
{
"firstName": "Vladimir",
"lastName": "Carrer",
"age": 32
}

JSON works well with XmlHttpRequest (AJAJ/AJAX) but the main problem with XmlHttpRequest that is limited with same-domain browser policy. Meaning that you can’t use JSON for remote requests.

For that we have JSONP or "JSON with padding" or remote JSON.

JSONP is a "hack" of JSON in order to make remote request from different domain servers.

Example of JSONP:

AnyNameYouLike ({
"firstName": "Vladimir",
"lastName": "Carrer",
"age": 32
});

In this format(JSONP) can be injected like Script Tag Injection.

<script type="text/javascript"
src="http://someremoteserver.com/jsonp.js">
</script>

Then you call JSONP like this

function AnyNameYouLike (data) {
alert(data.firstName);
}

In order to parse AnyNameYouLike JSONP we have to have function named AnyNameYouLike.

JSON(P) web service usually provide callback parameter. So it looks like this:

http://someremoteserver.com/jsonp.php?callback=AnyNameYouLike

Meaning that the function name should match with the callback parameter.

It is important to remember that JSONP is not AJAX and doesn’t use XmlHttpRequest but the script tag.

JSONP is faster than JSON.

Because JSONP is actually hack to bypass browser security issues is considered not safe.

In the future will probably have something like Cross-Origin Resource Sharing (CORS) that hopefully will provide more safety.

But for now JSONP remains fastest and easiest way to obtain JSON from remote servers with JavaScript.

Let’s build some practical example.

We will use Yahoo YQL to parse reddit.com RSS. YQL will help us to convert RSS to JSONP.

The working Demo. Look at the code.

Did I miss something?

4 Responses to “About JSONP in JavaScript”

1. //  Josh Peters // 11/04/2010

   I think the most confusing part of JSONP is the name. It's really just executing arbitrary javascript. The issue is that there is no way to enforce constraints on the resource being fetched.
   
   The solution (imo) is that we need additional MIME types that user agents care about. JSONP should be its own MIME type that allows a very specific subset of Javascript. User agents have to be the ones to enforce this, since the script element just allows execution without any other parsing.
   
   Trusting any third-party host (especially one that is not HTTPS) to interact well within my window is just not sane. Having a JSONP MIME type enforced by the user agent would at least allow developers to rest assured that the script they're using conforms to the JSONP format.
   
   Sadly, we'll never, ever see such a thing happen. Otherwise we'd all be seeing AdSafe Javascript everywhere too. http://www.adsafe.org/
   
   Otherwise, JSONP kicks butt and is a really fun way to get things done. I just wish it were safer.  

2. //  Beben Koben // 11/06/2010

   this is using YQL from yahoo
   its a great...thanks :D  

3. //  Anonymous // 1/10/2011

   i could not get the link to the example. can u post it again?? I really need to see the example.  

4. //  Vladimir // 1/10/2011

   @Anonymous: Did you mean this example http://www.allapis.com/JSONP.html ? There is also another working example on this post http://www.vcarrer.com/2010/11/hacker-news-mobile-front-page-reader.html  

Post a Comment

<< Home