What is JSONP?

In order to make use of JSONP in your page, you need to dynamically inject a script element whose src attribute is pointing toward the JSONP endpoint. You also add the name of a function that will be included in the script that loads (notice the query string variable):

 

$('body').append('<script src="http://somurl/?x=someFunction"></script>');

 

When the script loads it will include some JSON data, but it will be wrapped as a parameter in a call to the function that you sent to the endpoint:

// when the script loads, it will look like this
someFunction({json data will be here});

 

The trick here is that someFunction() must already be defined on your page. So the call to the JSONP endpoint simply invokes the function and passes a JSON object in as a param.