Jsonp-or JSON with Padding-is a sneaky technique, web developers came up with to work around the browser restrictions When the 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 is not applied. The remote request's content is then normal JSON wrapped in a function call (the P in JSONP). It looks like this:
1 2 3})
JSONP URLs usually accept a query string parameter so, the caller can specify the name of the callback. The developer then have to define a function in she code that have the same name as the callback in the server response, and When the script tag was added to the document, that function would 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 Tidyi Ng 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": $, "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'll call.
Load JSONP data to the script tag:
function /* (2) */ var script = document.createelement (' script '); = URL; var head = document.getElementsByTagName (' head ') [0]; Head.appendchild (script); }
varQuakes = Rx.Observable.create (function(Observer) {Window.eqfeed_callback=function(response) {varQuakes =Response.features; Console.log ("Quakes:", json.stringify (Quakes,NULL, 2)); Quakes.foreach (function(Quake) {Observer.onnext (Quake)})} Loadjsonp (Quake_url);}); Quakes.subscribe (function(quake) {varcoords =quake.geometry.coordinates; varSize = 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, where using RxJS, after subscribe, then we can get The data stream.
[Web] What is JSONP?