Jakie są różnice między JSON a JSONP?

Format mądry, typ pliku mądry i praktyczne zastosowanie mądry?

JSONP to JSON z wypełnieniem. Oznacza to, że umieszczasz ciąg na początku i parę nawiasów wokół niego. Na przykład:

//JSON
{"name":"stackoverflow","id":5}
//JSONP
func({"name":"stackoverflow","id":5});

W rezultacie możesz załadować JSON jako plik skryptu. Jeśli wcześniej skonfigurowano funkcję o nazwie func, funkcja ta zostanie wywołana z jednym argumentem, którym są dane JSON, gdy ładowanie pliku skryptu zostanie zakończone. Jest to zwykle używane, aby umożliwić cross-site AJAX z danymi JSON. Jeśli wiesz, że example.com obsługuje pliki JSON, które wyglądają jak w przykładzie JSONP podanym powyżej, możesz użyć takiego kodu do odzyskania go, nawet jeśli nie jesteś w domenie example.com:

function func(json){
  alert(json.name);
}
var elm = document.createElement("script");
elm.setAttribute("type", "text/javascript");
elm.src = "http://example.com/jsonp";
document.body.appendChild(elm);

Zasadniczo nie możesz żądać danych JSON z innej domeny za pośrednictwem AJAX ze względu na zasady tego samego pochodzenia. AJAX umożliwia pobieranie danych po załadowaniu strony, a następnie wykonanie kodu / wywołanie funkcji po jej zwróceniu. Nie możemy korzystać z AJAX, ale wolno nam wstrzykiwać <script>tagi na własną stronę, a one mogą odwoływać się do skryptów hostowanych w innych domenach.

Zwykle używasz tego do dołączenia bibliotek z CDN, takich jak jQuery . Możemy jednak nadużywać tego i używać go do pobierania danych! JSON jest już poprawnym skryptem JavaScript ( w przeważającej części ), ale nie możemy po prostu zwrócić JSON w naszym pliku skryptu, ponieważ nie mamy możliwości dowiedzenia się, kiedy skrypt / dane zakończyły się ładowaniem i nie mamy możliwości dostępu do niego, chyba że jest to przypisany do zmiennej lub przekazany do funkcji. Zamiast tego informujemy serwis internetowy o wywołaniu funkcji w naszym imieniu, gdy będzie ona gotowa.

Na przykład możemy poprosić o pewne dane z giełdowego interfejsu API i wraz z naszymi zwykłymi parametrami API, oddzwonimy, na przykład ?callback=callThisWhenReady. Usługa internetowa następnie zawija dane z naszej funkcji i zwraca go tak: callThisWhenReady({...data...}). Teraz, jak tylko skrypt się załaduje, twoja przeglądarka spróbuje go wykonać (jak zwykle), co z kolei wywołuje naszą dowolną funkcję i podaje nam żądane dane.

Działa podobnie jak normalne żądanie AJAX, ale zamiast wywoływać funkcję anonimową, musimy użyć nazwanych funkcji.

jQuery faktycznie obsługuje to bezproblemowo, tworząc dla Ciebie funkcję o unikalnej nazwie i przekazując ją, która następnie uruchomi żądany kod.

JSONP umożliwia określenie funkcji zwrotnej, która jest przekazywana do obiektu JSON. Pozwala to na ominięcie tej samej zasady pochodzenia i załadowanie JSON z zewnętrznego serwera do JavaScript na twojej stronie internetowej.

JSONP oznacza „JSON z Paddingiem” i jest to obejście dla ładowania danych z różnych domen. Ładuje skrypt do głowy DOM, dzięki czemu można uzyskać dostęp do informacji tak, jakby zostały załadowane do Twojej własnej domeny, omijając w ten sposób problem między domenami.

jsonCallback(
{
    "sites":
    [
        {
            "siteName": "JQUERY4U",
            "domainName": "http://www.jquery4u.com",
            "description": "#1 jQuery Blog for your Daily News, Plugins, Tuts/Tips & Code Snippets."
        },
        {
            "siteName": "BLOGOOLA",
            "domainName": "http://www.blogoola.com",
            "description": "Expose your blog to millions and increase your audience."
        },
        {
            "siteName": "PHPSCRIPTS4U",
            "domainName": "http://www.phpscripts4u.com",
            "description": "The Blog of Enthusiastic PHP Scripters"
        }
    ]
});

(function($) {
var url = 'http://www.jquery4u.com/scripts/jquery4u-sites.json?callback=?';

$.ajax({
   type: 'GET',
    url: url,
    async: false,
    jsonpCallback: 'jsonCallback',
    contentType: "application/json",
    dataType: 'jsonp',
    success: function(json) {
       console.dir(json.sites);
    },
    error: function(e) {
       console.log(e.message);
    }
});

})(jQuery);

Teraz możemy zażądać JSON przez AJAX za pomocą JSONP i funkcji zwrotnej, którą stworzyliśmy wokół treści JSON. Dane wyjściowe powinny stanowić JSON jako obiekt, który możemy następnie wykorzystać do dowolnych danych bez ograniczeń.

JSONP to zasadniczo JSON z dodatkowym kodem, jak wywołanie funkcji owinięte wokół danych. Umożliwia działanie danych podczas analizy.

JSON

JSON (JavaScript Object Notation) to wygodny sposób przenoszenia danych między aplikacjami, szczególnie gdy miejscem docelowym jest aplikacja JavaScript.

Przykład:

Oto minimalny przykład, który używa JSON jako transportu odpowiedzi serwera. Klient wysyła żądanie Ajax za pomocą funkcji skróconej jQuery $ .getJSON. Serwer generuje skrót, formatuje go jako JSON i zwraca go klientowi. Klient formatuje to i umieszcza w elemencie strony.

Serwer:

get '/json' do
 content_type :json
 content = { :response  => 'Sent via JSON',
            :timestamp => Time.now,
            :random    => rand(10000) }
 content.to_json
end

Klient:

var url = host_prefix + '/json';
$.getJSON(url, function(json){
  $("#json-response").html(JSON.stringify(json, null, 2));
});

Wynik:

  {
   "response": "Sent via JSON",
   "timestamp": "2014-06-18 09:49:01 +0000",
   "random": 6074
  }

JSONP (JSON z wypełnieniem)

JSONP to prosty sposób na obejście ograniczeń przeglądarki podczas wysyłania odpowiedzi JSON z różnych domen od klienta.

Jedyną zmianą po stronie klienta za pomocą JSONP jest dodanie parametru wywołania zwrotnego do adresu URL

Serwer:

get '/jsonp' do
 callback = params['callback']
 content_type :js
 content = { :response  => 'Sent via JSONP',
            :timestamp => Time.now,
            :random    => rand(10000) }
 "#{callback}(#{content.to_json})"
end

Klient:

var url = host_prefix + '/jsonp?callback=?';
$.getJSON(url, function(jsonp){
  $("#jsonp-response").html(JSON.stringify(jsonp, null, 2));
});

Wynik:

 {
  "response": "Sent via JSONP",
  "timestamp": "2014-06-18 09:50:15 +0000",
  "random": 364
}

Link: http://www.codingslover.blogspot.in/2014/11/what-are-differences-between-json-and-jsonp.html

„JSONP to JSON z dodatkowym kodem” byłoby zbyt łatwe dla prawdziwego świata. Nie, musisz mieć małe rozbieżności. Jaka jest zabawa w programowaniu, jeśli wszystko po prostu działa ?

Okazuje się, że JSON nie jest podzbiorem JavaScript . Jeśli wszystko, co zrobisz, to weź obiekt JSON i zawiń go w wywołaniu funkcji, pewnego dnia ugryzą cię dziwne błędy składniowe, tak jak ja dzisiaj.

JSONP to prosty sposób na obejście ograniczeń przeglądarki podczas wysyłania odpowiedzi JSON z różnych domen od klienta.

Ale praktyczne wdrożenie tego podejścia wiąże się z subtelnymi różnicami, które często nie są jasno wyjaśnione.

Oto prosty samouczek, który pokazuje JSON i JSONP obok siebie.

Cały kod jest bezpłatnie dostępny w Github, a jego wersja na żywo można znaleźć na stronie http://json-jsonp-tutorial.craic.com