JSONP (JSON with Padding)

JSONP is a technique to (legimately) fetch data from server on a different origin.
This works due to the fact that content fetched through the <script> src tag attribute will be executed.

JSONP is callback based.
When the request to a JSONP endpoint is made, a function name that exists client-side is passed (i.e. as a parameter).
The server will then perform the request, and return the response.
The response is crafted in a way that the supplied callback function will be executed with the response as an argument.

i.e

1
2
3
4
5
6
<script>
function receivedData(responseData) {
  alert("Received data: " + JSON.stringify(responseData));
}

<script src="https://api.myserver.com/jsonp?callbackFn=receivedData&data=5"></script>

The server's response to the request will look similar to the following

1
receivedData({"value": 5, "is-even": false})

Some websites allow a ?callback parameter to be passed in the GET request to make the results wrapped in a JSON function.