Frage Worum geht es bei JSONP?


Ich verstehe JSON, aber nicht JSONP. Wikipedia-Dokument zu JSON ist (war) das oberste Suchergebnis für JSONP. Es sagt das:

JSONP oder "JSON with padding" ist eine JSON-Erweiterung, bei der ein Präfix als Eingabeargument des Aufrufs angegeben wird.

Hä? Welcher Anruf? Das ergibt für mich keinen Sinn. JSON ist ein Datenformat. Es gibt keinen Anruf.

Das 2. Suchergebnis ist von einem Typen namens RemyWer schreibt das über JSONP:

JSONP ist eine Skript-Tag-Injektion, bei der die Antwort vom Server an eine vom Benutzer angegebene Funktion übergeben wird.

Ich kann das irgendwie verstehen, aber es macht immer noch keinen Sinn.


Was ist JSONP? Warum wurde es erstellt (welches Problem löst es)? Und warum sollte ich es benutzen?


Nachtrag: Ich habe gerade erstellt eine neue Seite für JSONP auf Wikipedia; Es hat jetzt eine klare und gründliche Beschreibung von JSONP, basierend auf Jvenema's Antwort.


1833
2018-01-14 20:53


Ursprung


Antworten:


Es ist eigentlich nicht zu kompliziert ...

Angenommen, Sie befinden sich in der Domain example.com und möchten eine Anfrage an die Domain example.net stellen. Um dies zu tun, müssen Sie Domänengrenzen überschreiten, ein No-No in den meisten Browserland.

Das einzige Element, das diese Einschränkung umgeht, sind <script> -Tags. Wenn Sie ein Skript-Tag verwenden, wird die Domänenbeschränkung ignoriert, aber unter normalen Umständen können Sie nicht wirklich machen Alles mit den Ergebnissen, das Skript wird nur ausgewertet.

Geben Sie JSONP ein. Wenn Sie Ihre Anfrage an einen Server richten, der JSONP aktiviert hat, übergeben Sie einen speziellen Parameter, der dem Server ein wenig über Ihre Seite sagt. Auf diese Weise kann der Server seine Antwort auf eine Art und Weise abschließen, die Ihre Seite verarbeiten kann.

Angenommen, der Server erwartet einen Parameter namens "Rückruf", um seine JSONP-Funktionen zu aktivieren. Dann würde Ihre Anfrage wie folgt aussehen:

http://www.example.net/sample.aspx?callback=mycallback

Ohne JSONP könnte dies ein grundlegendes JavaScript-Objekt wie folgt zurückgeben:

{ foo: 'bar' }

Wenn JSONP jedoch den Parameter "Callback" empfängt, wird das Ergebnis etwas anders dargestellt.

mycallback({ foo: 'bar' });

Wie Sie sehen, wird jetzt die von Ihnen angegebene Methode aufgerufen. Auf Ihrer Seite definieren Sie die Callback-Funktion:

mycallback = function(data){
  alert(data.foo);
};

Und jetzt, wenn das Skript geladen ist, wird es ausgewertet und Ihre Funktion wird ausgeführt. Voila, domainübergreifende Anfragen!

Es ist auch erwähnenswert, das eine wichtige Problem mit JSONP: Sie verlieren eine Menge Kontrolle über die Anfrage. Zum Beispiel gibt es keine "nette" Möglichkeit, richtige Fehlercodes zurück zu bekommen. Als Ergebnis verwenden Sie Timer, um die Anfrage usw. zu überwachen, die immer etwas verdächtig ist. Der Vorschlag für JSONAnfrage ist eine großartige Lösung, um Cross-Domain-Scripting zu ermöglichen, die Sicherheit zu wahren und eine ordnungsgemäße Kontrolle der Anfrage zu ermöglichen.

In diesen Tagen (2015), CORS ist der empfohlene Ansatz gegenüber JSONRequest. JSONP ist immer noch nützlich für ältere Browser-Unterstützung, aber angesichts der Sicherheitsimplikationen ist CORS die bessere Wahl, es sei denn, Sie haben keine Wahl.


1795
2018-01-14 21:08



JSONP ist wirklich ein einfacher Trick, um das zu überwinden XMLHttpRequest gleiche Domänenrichtlinie. (Wie Sie wissen, kann man nicht senden AJAX (XMLHttpRequest) Anfrage an eine andere Domain.)

Also - anstatt zu verwenden XMLHttpRequest wir müssen verwenden Skript HTML-Tags, die Sie normalerweise zum Laden von js-Dateien verwenden, damit js Daten aus einer anderen Domäne abrufen kann. Klingt komisch?

Ding ist - stellt sich heraus Skript Tags können auf ähnliche Weise verwendet werden XMLHttpRequest! Sieh dir das an:

script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'http://www.someWebApiServer.com/some-data';

Sie werden mit einem enden Skript Segment, das nach dem Laden der Daten so aussieht:

<script>
{['some string 1', 'some data', 'whatever data']}
</script>

Dies ist jedoch etwas unpraktisch, da wir dieses Array abholen müssen Skript Etikett. Damit JSONP Schöpfer entschieden, dass dies besser funktionieren wird (und es ist):

script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'http://www.someWebApiServer.com/some-data? Rückruf = my_callback';

Beachten Sie die mein_Rückruf Funktion da drüben? Also - wann JSONP Der Server empfängt Ihre Anfrage und findet den Callback-Parameter - anstatt das einfache js-Array zurückzugeben, gibt es folgendes zurück:

my_callback({['some string 1', 'some data', 'whatever data']});

Sehen Sie, wo der Gewinn ist: Jetzt erhalten wir einen automatischen Rückruf (my_callback), der ausgelöst wird, sobald wir die Daten erhalten haben.
Das ist alles, was es zu wissen gibt JSONP: Es ist ein Callback und Skript-Tags.

HINWEIS: Dies sind einfache Beispiele für die Verwendung von JSONP. Hierbei handelt es sich nicht um produktionsfertige Skripts.

Einfaches JavaScript-Beispiel (einfacher Twitter-Feed mit JSONP)

<html>
    <head>
    </head>
    <body>
        <div id = 'twitterFeed'></div>
        <script>
        function myCallback(dataWeGotViaJsonp){
            var text = '';
            var len = dataWeGotViaJsonp.length;
            for(var i=0;i<len;i++){
                twitterEntry = dataWeGotViaJsonp[i];
                text += '<p><img src = "' + twitterEntry.user.profile_image_url_https +'"/>' + twitterEntry['text'] + '</p>'
            }
            document.getElementById('twitterFeed').innerHTML = text;
        }
        </script>
        <script type="text/javascript" src="http://twitter.com/status/user_timeline/padraicb.json?count=10&callback=myCallback"></script>
    </body>
</html>

Einfaches jQuery-Beispiel (einfacher Twitter-Feed mit JSONP)

<html>
    <head>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
        <script>
            $(document).ready(function(){
                $.ajax({
                    url: 'http://twitter.com/status/user_timeline/padraicb.json?count=10',
                    dataType: 'jsonp',
                    success: function(dataWeGotViaJsonp){
                        var text = '';
                        var len = dataWeGotViaJsonp.length;
                        for(var i=0;i<len;i++){
                            twitterEntry = dataWeGotViaJsonp[i];
                            text += '<p><img src = "' + twitterEntry.user.profile_image_url_https +'"/>' + twitterEntry['text'] + '</p>'
                        }
                        $('#twitterFeed').html(text);
                    }
                });
            })
        </script>
    </head>
    <body>
        <div id = 'twitterFeed'></div>
    </body>
</html>


JSONP steht für JSON mit Padding. (sehr schlecht benannte Technik, da es wirklich nichts damit zu tun hat, was die meisten Leute als "Padding" bezeichnen würden.)


640
2017-07-29 21:40



JSONP erstellt ein "script" -Element (entweder in HTML-Markup oder über JavaScript in das DOM eingefügt), das an einen entfernten Datendienstort fragt. Die Antwort ist ein JavaScript, das in Ihren Browser geladen wird, wobei der Name der vordefinierten Funktion zusammen mit dem übergebenen Parameter die angeforderten JSON-Daten enthält. Wenn das Skript ausgeführt wird, wird die Funktion zusammen mit JSON-Daten aufgerufen, sodass die anfordernde Seite die Daten empfangen und verarbeiten kann.

Für weitere Lesungen besuchen Sie:  https://blogs.sap.com/2013/07/15/secret-behind-jsonp/

clientseitiger Codeschnipsel

    <!DOCTYPE html>
    <html lang="en">
    <head>
     <title>AvLabz - CORS : The Secrets Behind JSONP </title>
     <meta charset="UTF-8" />
    </head>
    <body>
      <input type="text" id="username" placeholder="Enter Your Name"/>
      <button type="submit" onclick="sendRequest()"> Send Request to Server </button>
    <script>
    "use strict";
    //Construct the script tag at Runtime
    function requestServerCall(url) {
      var head = document.head;
      var script = document.createElement("script");

      script.setAttribute("src", url);
      head.appendChild(script);
      head.removeChild(script);
    }

    //Predefined callback function    
    function jsonpCallback(data) {
      alert(data.message); // Response data from the server
    }

    //Reference to the input field
    var username = document.getElementById("username");

    //Send Request to Server
    function sendRequest() {
      // Edit with your Web Service URL
      requestServerCall("http://localhost/PHP_Series/CORS/myService.php?callback=jsonpCallback&message="+username.value+"");
    }    

  </script>
   </body>
   </html>

Serverseitiges Stück PHP-Code

<?php
    header("Content-Type: application/javascript");
    $callback = $_GET["callback"];
    $message = $_GET["message"]." you got a response from server yipeee!!!";
    $jsonResponse = "{\"message\":\"" . $message . "\"}";
    echo $callback . "(" . $jsonResponse . ")";
?>

38
2018-03-17 13:32



Weil Sie den Server bitten können, ein Präfix an das zurückgegebene JSON-Objekt anzuhängen. Z.B

function_prefix(json_object);

um für den Browser zu eval "Inline" die JSON-Zeichenfolge als Ausdruck. Dieser Trick ermöglicht es dem Server, JavaScript-Code direkt in den Client-Browser zu "injizieren" und dies unter Umgehung der Beschränkungen "gleicher Herkunft".

Mit anderen Worten, du kannst haben domänenübergreifender Datenaustausch.


Normalerweise, XMLHttpRequest erlaubt den domänenübergreifenden Datenaustausch nicht direkt (man muss einen Server in derselben Domäne durchlaufen), während:

<script src="some_other_domain/some_data.js&prefix=function_prefix> kann man auf Daten von einer anderen Domäne als vom Ursprung zugreifen.


Auch erwähnenswert: Obwohl der Server als "vertrauenswürdig" betrachtet werden sollte, bevor diese Art von "Trick" versucht wird, können die Nebenwirkungen einer möglichen Änderung im Objektformat etc. enthalten sein. Wenn ein function_prefix(d. h. eine richtige js-Funktion) wird verwendet, um das JSON-Objekt zu empfangen, wobei die Funktion Prüfungen durchführen kann, bevor die zurückgegebenen Daten akzeptiert / weiterverarbeitet werden.


37
2018-01-14 20:58



JSONP ist eine großartige Möglichkeit, domainübergreifende Skriptfehler zu umgehen. Sie können einen JSONP-Dienst nur mit JS konsumieren, ohne auf der Serverseite einen AJAX-Proxy implementieren zu müssen.

Du kannst den ... benutzen b1t.co Service, um zu sehen, wie es funktioniert. Dies ist ein kostenloser JSONP-Dienst, mit dem Sie Ihre URLs minimieren können. Hier ist die URL, die für den Service verwendet werden soll:

http://b1t.co/Site/api/External/MakeUrlWithGet?callback=[resultsCallBack]&url=[escapedUrlToMinify]

Zum Beispiel der Anruf, http://b1t.co/Site/api/External/MakeUrlWithGet?callback=whateverJavascriptName&url=google.com

würde zurückkehren

whateverJavascriptName({"success":true,"url":"http://google.com","shortUrl":"http://b1t.co/54"});

Und wenn das in Ihre js als src geladen wird, wird es automatisch whateverJavascriptName ausführen, die Sie als Callback-Funktion implementieren sollten:

function minifyResultsCallBack(data)
{
    document.getElementById("results").innerHTML = JSON.stringify(data);
}

Um den JSONP-Aufruf tatsächlich auszuführen, können Sie dies auf verschiedene Arten tun (einschließlich der Verwendung von jQuery), aber hier ist ein reines JS-Beispiel:

function minify(urlToMinify)
{
   url = escape(urlToMinify);
   var s = document.createElement('script');
   s.id = 'dynScript';
   s.type='text/javascript';
   s.src = "http://b1t.co/Site/api/External/MakeUrlWithGet?callback=resultsCallBack&url=" + url;
   document.getElementsByTagName('head')[0].appendChild(s);
}

Ein Schritt für Schritt Beispiel und ein Jsonp Web Service zum üben ist verfügbar unter: dieser Beitrag


17
2018-03-28 15:59



Ein einfaches Beispiel für die Verwendung von JSONP.

client.html

    <html>
    <head>
   </head>
     body>


    <input type="button" id="001" onclick=gO("getCompany") value="Company"  />
    <input type="button" id="002" onclick=gO("getPosition") value="Position"/>
    <h3>
    <div id="101">

    </div>
    </h3>

    <script type="text/javascript">

    var elem=document.getElementById("101");

    function gO(callback){

    script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = 'http://localhost/test/server.php?callback='+callback;
    elem.appendChild(script);
    elem.removeChild(script);


    }

    function getCompany(data){

    var message="The company you work for is "+data.company +"<img src='"+data.image+"'/   >";
    elem.innerHTML=message;
}

    function getPosition(data){
    var message="The position you are offered is "+data.position;
    elem.innerHTML=message;
    }
    </script>
    </body>
    </html>

server.php

  <?php

    $callback=$_GET["callback"];
    echo $callback;

    if($callback=='getCompany')
    $response="({\"company\":\"Google\",\"image\":\"xyz.jpg\"})";

    else
    $response="({\"position\":\"Development Intern\"})";
    echo $response;

    ?>    

10
2018-06-06 06:45



Bevor Sie JSONP verstehen, müssen Sie das JSON-Format und XML kennen. Derzeit ist das am häufigsten verwendete Datenformat im Internet XML, aber XML ist sehr kompliziert. Es macht Benutzer unkomfortabel, eingebettete Webseiten zu verarbeiten.

Damit JavaScript auch als Datenverarbeitungsprogramm problemlos Daten austauschen kann, verwenden wir den Wortlaut nach JavaScript-Objekten und entwickelten ein einfaches Datenaustauschformat, das JSON ist. JSON kann als Daten oder als JavaScript-Programm verwendet werden.

JSON kann direkt in JavaScript eingebettet werden, mit ihnen können Sie bestimmte JSON-Programme direkt ausführen, aber aufgrund von Sicherheitseinschränkungen deaktiviert der Sandbox-Mechanismus des Browsers die domänenübergreifende Ausführung von JSON-Code.

Um JSON nach der Ausführung übergeben zu können, haben wir einen JSONP entwickelt. JSONP umgeht die Sicherheitsgrenzen des Browsers mit JavaScript Callback-Funktionalität und dem <script> -Tag.

Kurz gesagt erklärt es, was JSONP ist, welches Problem es löst (wann es zu verwenden ist).


9
2017-12-08 04:02