Channels ▼
RSS

Mobile

JSONP In Action



For security reasons, most browsers block any outbound calls placed through XMLHttpRequest and embedded frames that trespass the boundaries of the local server. In other words, most today's browsers just don't allow cross-domain calls operated via script. Frankly, this is not a feature that many developers perceive as particularly limiting, until it hits them directly! So a school of thought has emerged in the past few years that claim the overall safety of making JSON-based calls -- even across distinct sites.

Quite curiously, while browsers prevent cross-site calls via scripting they are much more forgiving when it comes to the src attribute of the <script> tag regardless of whether you create it statically or dynamically. It turns out, in fact, that you can create a <script> tag on-the-fly and make it point to just any URL you know regardless of the location.

Currently there's no standardized way to run JSON calls via script in a way that is reckoned safe; so it is all about creating a de facto standard solution that using some effective tricks could make the magic of letting you grab JSON data via script from a remote site. JSONP (short for "JSON with Padding") is just the name of this approach.

In a nutshell, JSONP is a convention through which you ask the target server to return any response wrapped up in a local JavaScript function call. For example, suppose you intend to place a call to the URL below which is expected to return some JSON data:


http://someserver/order/list

If you arrange a direct call using XMLHttpRequest (or an alternate Ajax API) you'll get a cross-site scripting error, as expected. If you simply point the URL from a <script> tag, however, you correctly download the response but won't get it processed in any way. Worse yet, you don't even have a way to cache the response for reusing it later.

The JSONP convention suggests you append a custom segment to the URL that is understood and processed properly on the server side. Here's you could transform the previous URL to make it JSONP compliant:


http://someserver/order/list?callback=xxx 

The xxx placeholder is the name of a script function that belongs to the caller page. The query string parameter appended to the URL tells the JSONP-enabled server that you want any response for the URL to be returned in the form of executable script. More specifically, you want it to be as below:


xxx(response)

In this way, what you receive is a piece of executable script that runs and processes any remote data. Note this machinery is expected to work only if you place a call to the URL via a <script> tag, either statically defined or dynamically created. At the end of the day, executing a successful JSONP call is equivalent to having the following markup in the caller page:


<script src=" http://someserver/order/list?callback=xxx" />

It goes without saying that some agreement has to be reached between the JSONP-enabled Web server and its potential callers about the name of the query string parameter to use to indicate the wrapper JavaScript function.

How would go placing JSONP calls from within a client? Does it really mean you have to use a <script> tag and manage to create it on the fly yourself? Well, the jQuery library contains a handy function that does it all behind the façade of a plain script call. The function is $.ajax that supports jsonp as a feasible value for the datatype parameter. You can also use the getJSON function, as shown below:


jQuery.getJSON("http://someserver/order/list?callback=?", 
    function(data) {alert(data);});

In this case, jQuery will replace the ? in the URL with the dynamic name of the anonymous function listed in the call. The code snippet assumes that the server will recognize the "callback" parameter. Internally, jQuery creates a <script> tag and downloads the response through it. The response is a JavaScript call to the anonymous function which receives the actual response from the URL. Finally, notice that the jQuery getJSON method is smart enough to recognize whether the URL being used is local or remote. If it is local, a plain (and quicker) API call is used instead.


Related Reading


More Insights






Currently we allow the following HTML tags in comments:

Single tags

These tags can be used alone and don't need an ending tag.

<br> Defines a single line break

<hr> Defines a horizontal line

Matching tags

These require an ending tag - e.g. <i>italic text</i>

<a> Defines an anchor

<b> Defines bold text

<big> Defines big text

<blockquote> Defines a long quotation

<caption> Defines a table caption

<cite> Defines a citation

<code> Defines computer code text

<em> Defines emphasized text

<fieldset> Defines a border around elements in a form

<h1> This is heading 1

<h2> This is heading 2

<h3> This is heading 3

<h4> This is heading 4

<h5> This is heading 5

<h6> This is heading 6

<i> Defines italic text

<p> Defines a paragraph

<pre> Defines preformatted text

<q> Defines a short quotation

<samp> Defines sample computer code text

<small> Defines small text

<span> Defines a section in a document

<s> Defines strikethrough text

<strike> Defines strikethrough text

<strong> Defines strong text

<sub> Defines subscripted text

<sup> Defines superscripted text

<u> Defines underlined text

Dr. Dobb's encourages readers to engage in spirited, healthy debate, including taking us to task. However, Dr. Dobb's moderates all comments posted to our site, and reserves the right to modify or remove any content that it determines to be derogatory, offensive, inflammatory, vulgar, irrelevant/off-topic, racist or obvious marketing or spam. Dr. Dobb's further reserves the right to disable the profile of any commenter participating in said activities.

 
Disqus Tips To upload an avatar photo, first complete your Disqus profile. | View the list of supported HTML tags you can use to style comments. | Please read our commenting policy.
 

Video