Let’s say you serve up a page to the client and, in addition to the data your server generates, you want to include some data from weather.com. Weather.com has an API limit, though, so your server can’t request that data more than a handful of times in a given period. To get around that limitation, you offload the task to the client; it (attempts) to issue an AJAX request to the weather.com API and now (you hope) you have a million clients hitting the weather.com API with a couple of requests, rather than one server hitting weather.com with two million requests.
Frustratingly, you’re going to bump into a major browser limitation that is the result of an ill-conceived security measure: your browser isn’t allowed to access resources from outside of the domain you’re currently visiting. This is called the same origin policy. Your AJAX request won’t work.
Rather than issues an AJAX request, the client dynamically generates a script tag and appends it to the DOM. The script tag has a callback parameter, specified in the querystring at the end of the url. Your script tag will look something like:
There are a few more things to do here: you should remove the script tag after your data is loaded and run whatever callback was passed into your JSONP function. But beyond that, you’ve basically gotten the gist of implementing JSONP.: Add a script tag, load your data, and get around the (ineffective) security policies the browser tries to implement.