[Web] What Is JSONP?

JSONP—or JSON with padding—is a sneaky technique that web developers came up with to work around the browser restrictions when requesting data from third-party domains.

 

It bypasses these restrictions by loading external content using script tags instead of the usual XMLHttpRequest. Adding a script tag to the DOM loads and executes its content directly, and the security restrictions are not applied. The remote request’s content is then normal JSON wrapped in a function call (the P in JSONP). It looks like this: 

callbackFn({ a: 1, b: 2, c: 3})

 

JSONP URLs usually accept a query string parameter so that the caller can specify the name of the callback. The developer then has to define a function in her code that has the same name as the callback in the server response, and when the script tag is added to the document, that function will be called with the JSON data as the first parameter. Libraries like jQuery automate this process by internally creating the global function to handle the JSONP call, and tidying up afterward to avoid polluting the global namespace.

 

Example:

JSONP data:

eqfeed_callback({
  "type": "FeatureCollection",
  "metadata": {
    "generated": 1408030886000,
    "url": "http://earthquake.usgs.gov/earthquakes/...",
    "title": "USGS All Earthquakes, Past Day",
    "status": 200, "api": "1.0.13", "count": 134
  },
  "features": [
    {
      "type": "Feature",
      "properties": {
        "mag": 0.82,
        "title": "M 0.8 - 3km WSW of Idyllwild-Pine Cove, California",
        "place": "3km WSW of Idyllwild-Pine Cove, California",
        "time": 1408030368460,
        ...
      },
      "geometry": {
        "type": "Point",
        "coordinates": [ -116.7636667, 33.7303333, 17.33 ]
      },
      "id": "ci15538377"
    },
    ...
  ]
})

So 'eqfeed_callback' is the callback we will call.

 

Load JSONP data to the script tag:

    function loadJSONP(url) { /* (2)  */
        var script = document.createElement('script');
        script.src = url;

        var head = document.getElementsByTagName('head')[0];
        head.appendChild(script);
    }

var quakes = Rx.Observable.create(function(observer){
    window.eqfeed_callback = function(response){
        var quakes = response.features;
        console.log("quakes:", JSON.stringify(quakes, null, 2));
        quakes.forEach(function(quake){
            observer.onNext(quake)
        })
    }

    loadJSONP(QUAKE_URL);
});

quakes.subscribe(function(quake){
    var coords = quake.geometry.coordinates;
    var size = quake.properties.mag * 1000;

    L.circle([coords[1], coords[0]], size).addTo(map)
});

We create the callback or let's say the logic to handle the JSONP data, here using RxJS, after subscribe, then we can get the data stream.