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.

  • 相关阅读:
    原来生成函数这么简单
    p1919 A*B Problem升级版
    线性基初步
    高斯消元详解
    FFT模板
    BSGS(大小步)算法
    p1516&poj1061&bzoj1477 青蛙的约会
    p1082 同余方程
    qboimathtest1 t1 魔法串
    qboimathtest1 t2 配对
  • 原文地址:https://www.cnblogs.com/Answer1215/p/5770772.html
Copyright © 2011-2022 走看看