Skip to main content


That sounds like a rapper. It's not though, the p stands for padding. Sometimes the "p" has been interpreted to mean "prefix".


Padding is the term used because the requested JSON data is "wrapped" in a function.

A bit of foundation first though. What happens if you load data from somewhere using AJAX is that behind the scenes a <script src="..." is embedded in the page. jQuery it removes that tag once the file has been downloaded, in and out like a thief in the night. So, because the JSON file is just an object it doesn't really do anything once it is downloaded.

Instead, with jsonp, you create a callback function to handle the response, and then pass the name of that function to your API call with something like ?callback=yourFunctionName. Obviously the API needs to understand what is going on and do what we want, so most modern ones do.

Here is a crude example of what a client side JSON P handler might look like:

var jsonpRequest = function(url, callback) {

  var alphabet = "abcdefghijklmnopqrstuvwxyz";
  var uniqueCallback = "";
  var src = document.createElement("script");

  for (var i = 0; i < 20; i++) {
    uniqueCallback += alphabet[Math.floor(Math.random() * 26)];

  window[uniqueCallback] = callback;
  src.setAttribute("id", uniqueCallback);
  src.setAttribute("src", url + "?callback=" + uniqueCallback);

  src.onload = function () {