jQuery’s JSONP Explained with Examples

If you're developing a web-based aplication and are trying to load data from a domain which is not under your control, the chances are that you've seen the following message in your browser's console:

XMLHttpRequest cannot load http://external-domain/service. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://my-domain' is therefore not allowed access.

In this article, we'll look at what causes this error and how we can get around it by using jQuery and JSONP to make a cross-domain Ajax call.

Same-origin Policy

Regular web pages can use the XMLHttpRequest object to send and receive data from remote servers, however they're restricted in what they can do by the same origin-policy. This is an important concept in the browser security model and dictates that a web browser may only allow scripts on page A to access data on page B if these two pages have the same origin. The origin of a page is defined by its protocol, host and port number. For example the origin of this page is 'https', 'www.sitepoint.com', '80'.

The same-origin policy is a saftey mechanism. It prevents scripts from reading data from your domain and sending it to their servers. If we didn't have this, it would be easy for a malicious website to grab your session information to another site (such as Gmail or Twitter) and execute actions on your behalf. Unfortunately, it also causes the error we see above and often poses a headache for developers trying to accomplish a legitimate task.

A failing example

Let's look at what doesn't work. Here's a JSON file residing on a different domain which we would like to load using jQuery's getJSON method.

$.getJSON(
  "http://ift.tt/28QMNn0",
  function(json) { console.log(json); }
);

If you try that out in your browser with an open console, you will see a message similar to the one above. So what can we do?

A Possible Workaround

Luckily, not everything is affected by the same-origin policy. For example, it is quite possible to load an image or a script from a different domain into your page—this is exactly what you are doing when you include jQuery (for example) from a CDN.

This means that we are able to create a <script> tag, set the src attribute to that of our JSON file and inject it into the page.

var script = $("<script />", {
    src: "http://ift.tt/28QMNn0",
    type: "application/json"
  }
);

$("head").append(script);

Although that works, it doesn't help us much, as we have no way of getting at the data it contains.

Enter JSONP

JSONP (which stands for JSON with Padding) builds on this technique and provides us with a way to access the returned data. It does this by having the server return JSON data wrapped in a function call (the "padding") which can then be interpreted by the browser. This function must be defined in the page evaluating the JSONP response.

Continue reading %jQuery’s JSONP Explained with Examples%

by James Hibbard via SitePoint