zoukankan      html  css  js  c++  java
  • [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.

  • 相关阅读:
    Spring Data框架
    Flutter入门坑一Could not resolve com.android.tools.build:gradle:3.2.1.
    圆形图像
    MissingPluginException(No implementation found for method getDatabasesPath on channel com.tekartik.sqflite)
    flutter应用打包、修改图标、启动页和app名字
    sqflite常用操作
    Flutter解决神奇的ListView顶部多一段空白高度的问题
    Flutter-CircleAvatar圆形和圆角图片
    flutter 报错 DioError [DioErrorType.DEFAULT]: Bad state: Insecure HTTP is not allowed by platform
    【flutter 溢出BUG】 bottom overflowed by xxx PIXELS
  • 原文地址:https://www.cnblogs.com/Answer1215/p/5770772.html
Copyright © 2011-2022 走看看