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.

  • 相关阅读:
    ABP 框架第一篇 ABP框架入门
    SpringBoot+mybatis plus 框架搭建
    诺依框架 第一章 springboot+vue前后端分离版本部署
    常用Web Service汇总网页
    Singleton单例模式
    告别无止境的增删改查Java代码生成器
    Builder生成器模式
    细说Java IO相关
    AbstractFactory抽象工厂模式
    设计模式关于模式的一些很基本的知识点
  • 原文地址:https://www.cnblogs.com/Answer1215/p/5770772.html
Copyright © 2011-2022 走看看