JSON P

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

Padding?

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);
  document.head.appendChild(src);
  src.onload = function () {
    document.head.removeChild(src);
  }
};