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); document.head.appendChild(src);

src.onload = function () { document.head.removeChild(src); }