Czy ktos moze wyjasnic czym jest JSONP w kategoriach laika? [duplikat]

Powiedzmy, że masz jakiś adres URL, który dał ci dane JSON:

{'field': 'value'}

...i miałeś podobny adres URL, z wyjątkiem tego, że używał JSONP, do którego przekazałeś nazwę funkcji zwrotnej " myCallback "( zwykle odbywa się to przez podanie parametru zapytania o nazwie "callback", np. http://example.com/dataSource?callback=myCallback). Wtedy wróci:

myCallback({'field':'value'})

...który nie jest tylko obiektem, ale w rzeczywistości jest kodem, który można wykonać. Jeśli więc zdefiniujesz funkcję myFunction w innym miejscu swojej strony i wykonasz ten skrypt, zostanie ona wywołana z dane z adresu URL.

Najfajniejsze w tym jest to, że możesz utworzyć tag skryptu i użyć swojego adresu URL (wraz z parametrem callback) jako atrybutu src, A przeglądarka go uruchomi. Oznacza to, że możesz obejść zasady bezpieczeństwa " tego samego pochodzenia "( ponieważ przeglądarki umożliwiają uruchamianie znaczników skryptów ze źródeł innych niż domena strony).

To właśnie robi jQuery, gdy składasz żądanie ajax (używając .ajax z' jsonp ' jako wartością właściwości dataType). Np.

$.ajax({
  url: 'http://example.com/datasource',
  dataType: 'jsonp',
  success: function(data) {
    // your code to handle data here
  }
});

Tutaj jQuery zajmuje się nazwą funkcji zwrotnej i parametrem zapytania-czyniąc API identycznym z innymi wywołaniami ajax. Ale w przeciwieństwie do innych typów żądań ajax, jak wspomniano, nie jesteś ograniczony do pobierania danych z tego samego źródła, co strona.

JSONP jest sposobem na obejście polityki samego pochodzenia przeglądarki . Jak? Tak:

Celem tutaj jest złożenie prośby o otherdomain.com i alert nazwę w odpowiedzi. Zwykle wykonujemy żądanie AJAX:

$.get('otherdomain.com', function (response) {
  var name = response.name;
  alert(name);
});

Jednakże, ponieważ żądanie jest wysyłane do innej domeny, nie będzie działać.

Możemy wykonać żądanie używając znacznika <script>. Zarówno <script src="otherdomain.com"></script> jak i $.get('otherdomain.com') spowoduje, że to samo żądanie będzie wykonane:

GET otherdomain.com

P: ale jeśli użyjemy znacznika <script>, Jak możemy uzyskać dostęp do odpowiedzi? Musimy mieć do niego dostęp, jeśli chcemy.

A: nie możemy. ale oto, co możemy zrobić-zdefiniować funkcję, która używa odpowiedzi, a następnie powiedzieć serwerowi, aby odpowiedział za pomocą JavaScript, który wywołuje naszą funkcję z odpowiedzią jako jej argumentem.

P: Ale co jeśli serwer nie zrobi tego za nas i będzie chciał tylko zwrócić nam JSON?

Odp: wtedy nie będziemy / align = "left" / JSONP wymaga do współpracy serwera.

P: używanie znacznika <script> jest brzydkie.

A: biblioteki takie jak jQuery czynią je ładniejszym . Ex:

$.ajax({
    url: "http://otherdomain.com",
    jsonp: "callback",
    dataType: "jsonp",
    success: function( response ) {
        console.log( response );
    }
});

Działa poprzez dynamiczne tworzenie elementu DOM znacznika <script>.

P: <script> znaczniki składają tylko żądania GET - co jeśli chcemy wysłać żądanie POST?

O: wtedy JSONP nie będzie dla nas działać.

P: w porządku, chcę tylko złożyć prośbę o GET. JSONP jest zajebisty i zamierzam użyć to-dzięki!

O: Właściwie, to nie jest takie niesamowite. To tylko włamanie. I to nie jest najbezpieczniejsza rzecz do użycia. Teraz, gdy CORS jest dostępny, powinieneś go używać, gdy tylko to możliwe.

Znalazłem przydatny artykuł, który wyjaśnia również temat dość jasno i łatwo. Link to JSONP

Niektóre z wartych uwagi punktów to:

1. JSONP pre-dates CORS.
Jest to pseudo-standardowy sposób na odzyskanie danych z innej domeny,
2. posiada ograniczone funkcje CORS (tylko metoda GET)

Działa następująco:

1. <script src="url?callback=function_name"> jest zawarte w kodzie html
2. gdy Krok 1 zostanie wykonany, sensuje funkcję z tą samą nazwą funkcji (podaną w parametrze url) jako odpowiedzią.
3. Jeśli funkcja o podanej nazwie istnieje w kodzie, zostanie wykonana z danymi, jeśli istnieją, zwróconymi jako argument do tej funkcji.