Rozumiem JSON, ale nie JSONP. Dokument Wikipedii dotyczący JSON jest (był) najwyższym wynikiem wyszukiwania dla JSONP. Mówi to:

JSONP lub „JSON with padding” to rozszerzenie JSON, w którym przedrostek jest określony jako argument wejściowy samego wywołania.

Co? Jakie połączenie? To nie ma dla mnie żadnego sensu. JSON to format danych. Nie ma połączenia.

2-cia wynik wyszukiwania jest z jakimś facetem o imieniu Remy , który pisze ten temat jsonp:

JSONP to wstrzykiwanie tagów skryptowych, przekazujące odpowiedź z serwera do funkcji określonej przez użytkownika.

Rozumiem to, ale nadal nie ma to sensu.

Czym jest JSONP? Dlaczego został stworzony (jaki problem rozwiązuje)? I dlaczego miałbym tego używać?

Dodatek : Właśnie utworzyłem nową stronę dla JSONP na Wikipedii; teraz ma jasny i dokładny opis JSONP, oparty na odpowiedzi Jvenema .

To właściwie nie jest zbyt skomplikowane ...

Powiedz, że jesteś w domenie example.comi chcesz złożyć wniosek o domenę example.net. Aby to zrobić, musisz przekroczyć granice domen , co jest nie-nie w większości obszarów przeglądarki.

Jedynym elementem, który omija to ograniczenie, są <script>tagi. Kiedy używasz znacznika skryptu, ograniczenie domeny jest ignorowane, ale w normalnych okolicznościach nie można naprawdę nic zrobić z wynikami, skrypt jest po prostu oceniany.

Enter JSONP. Kiedy wysyłasz zapytanie do serwera z włączoną obsługą JSONP, przekazujesz specjalny parametr, który mówi serwerowi trochę o twojej stronie. W ten sposób serwer jest w stanie ładnie zamknąć swoją odpowiedź w sposób, który może obsłużyć twoja strona.

Powiedzmy na przykład, że serwer oczekuje parametru wywołanego w callbackcelu włączenia jego możliwości JSONP. Twoja prośba wyglądałaby następująco:

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

Bez JSONP może to zwrócić jakiś podstawowy obiekt JavaScript, taki jak:

{ foo: 'bar' }

Jednak w przypadku JSONP, gdy serwer odbiera parametr „callback”, podsumowuje wynik nieco inaczej, zwracając coś takiego:

mycallback({ foo: 'bar' });

Jak widać, wywoła teraz wybraną metodę. Tak więc na swojej stronie definiujesz funkcję oddzwaniania:

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

A teraz, gdy skrypt zostanie załadowany, zostanie oceniony i twoja funkcja zostanie wykonana. Voila, żądania między domenami!

Warto również zwrócić uwagę na jeden główny problem z JSONP: tracisz dużą kontrolę nad żądaniem. Na przykład nie ma „miłego” sposobu na odzyskanie odpowiednich kodów błędów. W rezultacie używasz timerów do monitorowania żądania itp., Co zawsze jest nieco podejrzane. Propozycja JSONRequest jest doskonałym rozwiązaniem pozwalającym na wykonywanie skryptów między domenami, utrzymywanie bezpieczeństwa i odpowiednią kontrolę żądania.

Obecnie (2015) CORS jest zalecanym podejściem w porównaniu z JSONRequest. JSONP jest nadal przydatny do obsługi starszych przeglądarek, ale biorąc pod uwagę implikacje bezpieczeństwa, chyba że nie masz wyboru, CORS jest lepszym wyborem.

JSONP jest naprawdę prostą sztuczką, aby pokonać zasadę tej samej domeny XMLHttpRequest . (Jak wiadomo, nie można wysłać żądania AJAX (XMLHttpRequest) do innej domeny).

Tak więc - zamiast używać XMLHttpRequest, musimy użyć skryptowych znaczników HTML, tych, których zwykle używasz do ładowania plików js, aby js mógł pobrać dane z innej domeny. Brzmi dziwnie?

Chodzi o to - okazuje się, że tagi skryptu mogą być używane w sposób podobny do XMLHttpRequest ! Spójrz na to:

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

Otrzymasz segment skryptu, który wygląda tak po załadowaniu danych:

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

Jest to jednak nieco niewygodne, ponieważ musimy pobrać tę tablicę ze znacznika script . Dlatego twórcy JSONP zdecydowali, że będzie to działać lepiej (i tak jest):

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

Czy zauważyłeś tam funkcję my_callback ? Tak więc - gdy serwer JSONP otrzyma twoje żądanie i znajdzie parametr wywołania zwrotnego - zamiast zwracać zwykłą tablicę js zwróci to:

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

Zobacz, gdzie jest zysk: teraz otrzymujemy automatyczne oddzwanianie (my_callback), które zostanie uruchomione, gdy otrzymamy dane.
To wszystko, co należy wiedzieć o JSONP : jest to callback i tagi skryptowe.

UWAGA: są to proste przykłady użycia JSONP, nie są to skrypty gotowe do produkcji.

Podstawowy przykład JavaScript (prosty kanał Twittera przy użyciu 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>

Podstawowy przykład jQuery (prosty kanał Twittera przy użyciu 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 oznacza JSON z Padding . (bardzo źle nazwana technika, ponieważ tak naprawdę nie ma nic wspólnego z tym, co większość ludzi uważałaby za „padding”).

JSONP działa poprzez konstruowanie elementu „script” (albo w znacznikach HTML, albo wstawionego do DOM za pomocą JavaScript), który żąda zdalnej lokalizacji usługi danych. Odpowiedzią jest javascript załadowany do przeglądarki z nazwą wstępnie zdefiniowanej funkcji wraz z przekazywanym parametrem, czyli żądaniem danych JSON. Podczas wykonywania skryptu funkcja jest wywoływana wraz z danymi JSON, umożliwiając stronie żądającej otrzymanie i przetworzenie danych.

Więcej informacji na stronie : https://blogs.sap.com/2013/07/15/secret-behind-jsonp/

fragment kodu po stronie klienta

    <!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>

Część kodu PHP po stronie serwera

<?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 . ")";
?>

Ponieważ możesz poprosić serwer o dodanie prefiksu do zwróconego obiektu JSON. Na przykład

function_prefix(json_object);

aby przeglądarka eval„wstawiała” ciąg JSON jako wyrażenie. Ta sztuczka umożliwia serwerowi „wstrzykiwanie” kodu javascript bezpośrednio w przeglądarce klienta, z pominięciem ograniczeń „tego samego pochodzenia”.

Innymi słowy, możesz osiągnąć wymianę danych między domenami .

Zwykle XMLHttpRequestnie zezwala na bezpośrednią wymianę danych między domenami (należy przejść przez serwer w tej samej domenie), podczas gdy:

<script src="some_other_domain/some_data.js&prefix=function_prefix> `można uzyskać dostęp do danych z domeny innej niż pochodzenie.

Warto również zauważyć: nawet jeśli serwer powinien zostać uznany za „zaufany” przed podjęciem tego rodzaju „sztuczki”, można ograniczyć skutki uboczne ewentualnej zmiany formatu obiektu itp. Jeżeli function_prefixdo odebrania obiektu JSON zostanie użyta (tj. Właściwa funkcja js), wspomniana funkcja może wykonać kontrole przed zaakceptowaniem / dalszym przetwarzaniem zwróconych danych.

JSONP to świetny sposób na omijanie błędów skryptów między domenami. Możesz korzystać z usługi JSONP wyłącznie z JS bez konieczności implementowania proxy AJAX po stronie serwera.

Możesz skorzystać z usługi b1t.co , aby zobaczyć, jak to działa. Jest to bezpłatna usługa JSONP, która pozwala zminimalizować adresy URL. Oto adres URL do korzystania z usługi:

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

Na przykład wezwanie: http://b1t.co/Site/api/External/MakeUrlWithGet?callback=whokolwiekJavascriptName&url=google.com

wróciłby

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

A zatem, gdy ten get zostanie załadowany do twojego js jako src, automatycznie uruchomi dowolną wartość JavascriptName, którą powinieneś zaimplementować jako funkcję wywołania zwrotnego:

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

Aby faktycznie wykonać wywołanie JSONP, możesz to zrobić na kilka sposobów (w tym za pomocą jQuery), ale oto przykład JS:

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);
}

Przykład krok po kroku oraz usługa internetowa jsonp, na której można ćwiczyć, jest dostępna pod adresem: ten post

Prosty przykład użycia 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;

    ?>    

Przed zrozumieniem JSONP musisz znać format JSON i XML. Obecnie najczęściej używanym formatem danych w sieci jest XML, ale XML jest bardzo skomplikowany. Utrudnia to użytkownikom przetwarzanie danych osadzonych na stronach internetowych.

Aby JavaScript mógł łatwo wymieniać dane, nawet jako program do przetwarzania danych, używamy sformułowania zgodnego z obiektami JavaScript i opracowaliśmy prosty format wymiany danych, którym jest JSON. JSON może być używany jako dane lub jako program JavaScript.

JSON może być bezpośrednio osadzony w JavaScript, za jego pomocą można bezpośrednio uruchomić określony program JSON, ale z powodu ograniczeń bezpieczeństwa mechanizm piaskownicy przeglądarki wyłącza wykonywanie kodu JSON między domenami.

Aby JSON mógł zostać przekazany po wykonaniu, opracowaliśmy JSONP. JSONP omija ograniczenia bezpieczeństwa przeglądarki dzięki funkcji JavaScript Callback i znacznikowi <script>.

W skrócie wyjaśnia, czym jest JSONP, jaki problem rozwiązuje (kiedy go używać).

TL; DR

JSONP to stara sztuczka wymyślona w celu ominięcia ograniczenia bezpieczeństwa, które zabrania nam pobierania danych JSON z innego serwera (innego pochodzenia * ).

Sztuczka działa przy użyciu <script>znacznika, który prosi o JSON z tego miejsca, np .: { "user":"Smith" }ale zawinięty w funkcję, rzeczywisty JSONP („JSON z Paddingiem”):

peopleDataJSONP({"user":"Smith"})

Otrzymanie go w tym formularzu umożliwia nam wykorzystanie danych w ramach naszej peopleDataJSONPfunkcji. JSONP to zła praktyka , nie używaj jej (czytaj poniżej)

Problem

Powiedzmy, że nawigujemy dalej ourweb.comi chcemy uzyskać dane JSON (lub dowolne surowe dane) anotherweb.com. Gdybyśmy byli w użyciu żądania GET (jak XMLHttpRequest, na fetchrozmowy $.ajax, itd.), Nasza przeglądarka powie nam, że nie wolno z tego brzydkiego błędu:

Jak zdobyć potrzebne nam dane? Cóż, <script>tagi nie podlegają temu ograniczeniu do całego serwera (pochodzenie *)! Właśnie dlatego możemy załadować bibliotekę taką jak jQuery lub Mapy Google z dowolnego serwera, takiego jak CDN, bez żadnych błędów.

Ważna uwaga : jeśli się nad tym zastanowić, te biblioteki są rzeczywistym, działającym kodem JS (zwykle jest to ogromna funkcja z całą logiką wewnątrz). Ale surowe dane? Dane JSON nie są kodem . Nie ma co biegać; to tylko zwykłe dane.

Dlatego nie ma sposobu, aby obchodzić się z naszymi cennymi danymi lub nimi manipulować. Przeglądarka pobierze dane wskazane przez nasz <script>tag, a podczas przetwarzania słusznie narzeka:

wtf, czy to {"user":"Smith"}badziewie, które załadowaliśmy? To nie jest kod. Nie mogę obliczyć, błąd składniowy!

Hack JSONP

Stary / hacky sposób na wykorzystanie tych danych? Potrzebujemy tego serwera, aby wysłać go z pewną logiką, więc gdy zostanie załadowany, twój kod w przeglądarce będzie mógł używać tych danych. Więc obcy serwer wysyła nam dane JSON wewnątrz funkcji JS. Same dane są konfigurowane jako dane wejściowe tej funkcji. To wygląda tak:

peopleDataJSONP({"user":"Smith"})

co sprawia, że kod JS nasza przeglądarka będzie analizować bez narzekań! Dokładnie tak jak w przypadku biblioteki jQuery. Teraz, aby uzyskać to w ten sposób, klient „prosi” o to serwer przyjazny dla JSONP, zwykle tak:

<script src="https://anotherweb.com/api/data-from-people.json?myCallback=peopleDataJSONP"></script>

Nasza przeglądarka otrzyma JSONP o tej nazwie funkcji, dlatego potrzebujemy funkcji o tej samej nazwie w naszym kodzie, jak poniżej:

const peopleDataJSONP = function(data){
  alert(data.user); // "Smith"
}

Lub w ten sposób ten sam wynik:

function peopleDataJSONP(data){
  alert(data.user); // "Smith"
}

Przeglądarka pobierze JSONP i uruchomi go, który wywołuje naszą funkcję , gdzie argumentem databędzie nasz JSON. Możemy teraz robić z naszymi danymi, co tylko chcemy.

Nie używaj JSONP, używaj CORS

JSONP to hack między witrynami z kilkoma wadami:

• Możemy wykonywać tylko żądania GET
• Ponieważ jest to żądanie GET wywołane przez prosty tag skryptu, nie otrzymujemy pomocnych błędów ani informacji o postępie
• Istnieją również pewne obawy dotyczące bezpieczeństwa, takie jak uruchomienie w kodzie JS klienta, który można zmienić na złośliwy ładunek
• Rozwiązuje tylko problem z danymi JSON, ale zasady bezpieczeństwa Same-Origin dotyczą innych danych (WebFonts, obrazy / wideo rysowane za pomocą drawImage () ...)
• Nie jest zbyt elegancki ani czytelny.

Na wynos nie ma potrzeby korzystania z niego w dzisiejszych czasach .

JSONP jest sztuczką, aby uzyskać dane JSON z innego serwera, ale naruszymy tę samą zasadę bezpieczeństwa (Same-Origin), jeśli będziemy potrzebować innego rodzaju rzeczy między witrynami.

Powinieneś przeczytać o CORS tutaj , ale jego sedno brzmi:

Cross-Origin Resource Sharing (CORS) to mechanizm, który wykorzystuje dodatkowe nagłówki HTTP, aby poinformować przeglądarki, aby dały aplikacji internetowej działającej na jednym źródle dostęp do wybranych zasobów z innego źródła. Aplikacja internetowa wykonuje żądanie HTTP z innego źródła, gdy żąda zasobu, który ma inne pochodzenie (domenę, protokół lub port) niż własny.

* pochodzenie jest definiowane przez 3 rzeczy: protokół , port i host . Na przykład, https://web.comma inne pochodzenie niż http://web.com(inny protokół) i https://web.com:8081(inny port) i oczywiście https://thatotherweb.net(inny host)

Świetne odpowiedzi zostały już podane, muszę tylko podać swój kawałek w postaci bloków kodu w javascript (dodam również bardziej nowoczesne i lepsze rozwiązanie dla żądań krzyżowych: CORS z nagłówkami HTTP):

JSONP:

1.client_jsonp.js

$.ajax({
    url: "http://api_test_server.proudlygeek.c9.io/?callback=?",
    dataType: "jsonp",
    success: function(data) {
        console.log(data);    
    }
});​​​​​​​​​​​​​​​​​​

2.server_jsonp.js

var http = require("http"),
    url  = require("url");

var server = http.createServer(function(req, res) {

    var callback = url.parse(req.url, true).query.callback || "myCallback";
    console.log(url.parse(req.url, true).query.callback);

    var data = {
        'name': "Gianpiero",
        'last': "Fiorelli",
        'age': 37
    };

    data = callback + '(' + JSON.stringify(data) + ');';

    res.writeHead(200, {'Content-Type': 'application/json'});
    res.end(data);
});

server.listen(process.env.PORT, process.env.IP);

console.log('Server running at '  + process.env.PORT + ':' + process.env.IP);

CORS :

3.client_cors.js

$.ajax({
    url: "http://api_test_server.proudlygeek.c9.io/",
    success: function(data) {
        console.log(data);    
    }
});​

4.server_cors.js

var http = require("http"),
    url  = require("url");

var server = http.createServer(function(req, res) {
    console.log(req.headers);

    var data = {
        'name': "Gianpiero",
        'last': "Fiorelli",
        'age': 37
    };

    res.writeHead(200, {
        'Content-Type': 'application/json',
        'Access-Control-Allow-Origin': '*'
    });

    res.end(JSON.stringify(data));
});

server.listen(process.env.PORT, process.env.IP);

console.log('Server running at '  + process.env.PORT + ':' + process.env.IP);

JSONP oznacza JSON z Padding .

Oto strona z świetnymi przykładami , z wyjaśnieniem od najprostszego zastosowania tej techniki do najbardziej zaawansowanego w JavaScript JavaScript:

w3schools.com / JSONP

Jedną z moich bardziej ulubionych technik opisanych powyżej jest Dynamiczny wynik JSON , który pozwala wysłać JSON do pliku PHP w parametrze URL i pozwolić, aby plik PHP również zwrócił obiekt JSON na podstawie otrzymanych informacji .

Narzędzia takie jak jQuery mają również możliwości korzystania z JSONP :

jQuery.ajax({
  url: "https://data.acgov.org/resource/k9se-aps6.json?city=Berkeley",
  jsonp: "callbackName",
  dataType: "jsonp"
}).done(
  response => console.log(response)
);