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

393

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

Mohammad
źródło
13
Zobacz Proszę wyjaśnić JSONP .
Matthew Flaschen
1
Dzięki za link, jest tam kilka naprawdę dobrych informacji.
Mohammad
4
Czy jedna metoda jest szybsza od drugiej? Na przykład, jeśli użyjesz XMLHttpRequest, aby uzyskać żądanie (oczywiście do tej samej domeny, ponieważ jest to „normalne” ajax), lub jeśli użyjesz metody JSONP (która nie użyje XMLHTTPRequest) - czy jedno będzie szybsze od drugiego? Wiem, że zależy to od kilku czynników - ale czy ktoś porównał prędkość?
Yuval A.

Odpowiedzi:

405

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);
Marius
źródło
3
Czy JSONP nadal ma sens, zakładając, że możesz skonfigurować CORS tak, aby zezwalał na żądania dotyczące różnych źródeł?
y3sh
Może trochę późno, ale jednak chcę odpowiedzieć na twoje pytanie innym, Nie, jeśli używasz JSONP, odrzuciłeś wszystkie zalety CORS (nazwałem przewagę ze względu na problem z bezpieczeństwem). Zalecam prawidłowe wdrożenie CORS, to pomoże Ci w kwestiach bezpieczeństwa, a także lepszego podejścia do architektury.
Dogan
101

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.

mpen
źródło
2
Oddzielić od czego? JSON też nie jest językiem
nickf
6
@nickf: Tak ... szukałem właściwego słowa ... jak byś to nazwał? „format wymiany danych” według json.org.
mpen
lub bardziej czytelny: JSON: obiekt javascript w „notacji tekstowej”. Może chcesz toString () obiekt Java?
Sam Vloeberghs,
FWIW: @SamVloeberghs - Trochę mylące jest stwierdzenie, że JSON reprezentuje obiekt javascript. Mogą to być dowolne dane z dowolnego języka lub bazy danych, które są reprezentowane jako pary nazwa-wartość i tablice. Aby dokładnie obrócić dowolny obiekt JS, wymagane są dodatkowe konwencje - patrz JSON: Nieobsługiwane rodzime typy danych . Warto zauważyć, że JS Date powraca na końcu jako ciąg. weblog.west-wind.com/posts/2014/jan/06/…
ToolmakerSteve
66

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.

Alex Wayne
źródło
30

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 &amp; 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ń.

Sankar
źródło
18

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

Delan Azabani
źródło
13

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

Elangovana
źródło
6

„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.

Wasilij Faronow
źródło
0

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

faridcs
źródło