JavaScript: Jak działa JSONP?
w Praktyce
9 godz. 47 min · JavaScript · Full-stack i Programowanie
Piotr PalarzWeb DeveloperCzego się nauczysz
- Omówienie koncepcji OOP
- Dziedziczenie prototypowe i Domkniecia
- Format danych JSON oraz praca z AJAX
- Cookies
- Wyrazenia regularne
- “strict mode” w JavaScript
- Praktyczne projekty
- Niezliczona ilosc sztuczek i dobrych praktyk
- I wiele, wiele wiecej!
Witaj w kursie JavaScript w Praktyce!
W pierwszym rozdziale tego kursu poznasz bardzo dokładnie koncepcje programowania zorientowanego obiektowo. W jednej z lekcji, omówimy wszystkie z nich na przykładzie pseudo-kodu, niezwiązanego bezpośrednio z językiem JavaScript. Dzięki temu zrozumiesz, jak realizowane jest programowanie obiektowe w wielu popularnych językach programowania. Dowiesz się czym jest klasa, obiekt, instancja, właściwości, metody, a także zrozumiesz takie pojęcia jak dziedziczenie, polimorfizm, abstrakcja czy enkapsulacja. Następnie przejdziemy już do języka JavaScript i do zrozumienia tego, w jaki sposób powyższe koncepcje są w nim zaimplementowane. Język ten nie jest bowiem w 100% klasycznie obiektowy, jak np. język PHP. Co jednak bardzo istotne, JavaScript implementuje tzw. dziedziczenie prototypowe, którego bardzo dogłębne zrozumienie, gwarantuje zrozumienie całego języka JavaScript. Dowiesz się zatem czym są konstruktory i jak je tworzyć, a także jak korzystać z prototypu funkcji. Dzięki temu będziemy mogli wykorzystać obiektowość do własnych celów, co później w praktycznych przykładach uczynimy.Na przestrzeni kilku lekcji zobaczysz krok po kroku, jak w języku JavaScript zaimplementować dziedziczenie wielokrotne. Taka wiedza absolutnie otwiera oczy na zależności rządzące obiektami w tym języku. Dowiesz się również jak rozszerzać wbudowane konstrukcje języka JavaScript czy Obiektowego Modelu Dokumentu, a także kiedy powinniśmy to robić. Omówimy problemy, jakie mogą się pojawiać przy korzystaniu ze słowa kluczowego this, a także sposoby ich rozwiązania. Poznasz 3 bardzo ważne metody funkcji: call, apply i bind.JavaScript ma wiele specyficznych cech, a jedną z nich są tzw. domknięcia. W jednym z rozdziałów zobaczysz, do czego one służą i kiedy powinniśmy z nich korzystać. Dopełnimy tym również wiedzę związaną z programowaniem obiektowym i tzw. prywatnością.Rozdział o obiektowości został celowo umieszczony na samym początku kursu, gdyż zrozumienie tych koncepcji pozwala patrzeć zupełnie inaczej na wszystkie pozostałe. Po tym rozdziale przejdziemy do omówienia bardzo popularnego, lekkiego formatu wymiany danych JSON. Dowiesz się jak wygląda składnia tego formatu, a także jak współpracuje on z językiem JavaScript.Następnie przejdziemy do bardzo ekscytującego tematu, jakim jest technologia AJAX. Dzięki niej możemy wysyłać zapytania do serwera i pobierać dane, bez przeładowywania witryny. Do zrozumienia AJAXa niezbędne jest jednak rozumienie działania protokołu HTTP, na którym opiera się sieć www. Z tego powodu, jedna z lekcji została w 100% poświęcona HTTP i dowiesz się z niej jak wysyłane są żądania i odpowiedzi, a także tzw. nagłówki, które będą dla nas niezwykle istotne. Chwilę później omówimy również bardzo ważne mechanizmy: Same- origin policy i CORS, które blokują możliwość wysyłania żądań AJAX do pewnych serwerów. Kiedy już będziesz rozumiał te niezwykle istotne koncepcje, przejdziemy do napisania pierwszego kodu, wysyłającego asynchroniczne żądanie do serwera. Następnie dowiesz się jak wysyłać, a także odbierać dane z serwera, umieszczać je na stronie oraz śledzić postęp zarówno wysyłania, jak i pobierania danych.W tym rozdziale na przestrzeni kilku lekcji napiszemy swoją własną bibliotekę AJAX, która pozwoli w niezwykle łatwy sposób wysyłać i odbierać dane. Skorzystamy w niej już w kolejnej lekcji, gdzie zobaczysz, jak wysłać wiadomość e-mail z użyciem AJAX i PHP po stronie serwera. Gotowy skrypt, będziesz mógł umieścić na własnej stronie internetowej. Na zakończenie tego rozdziału omówimy również dokładnie niezwykle sprytną technikę o nazwie JSONP, które pozwala wysyłać tzw. żądania “cross-origin”. Przekonasz się dlaczego taka technika powstała i jak współpraca klienta i serwera potrafi obejść zabezpieczenia przeglądarek.Kolejnym tematem omówionym w kursie będą Cookies, czyli tzw. ciasteczka. Dowiesz się czym są, w jakim celu istnieją, a także jak są ustawianie przez serwer. Co ciekawe, również z poziomu języka JavaScript będziemy mieli do nich dostęp, a zatem zobaczysz jak je ustawiać i odczytywać. Na tym etapie przyda nam się wiedza zdobyta w lekcji o protokole HTTP.W kursie znajdziesz również rozdział poświęcony w 100% wyrażeniom regularnym. To mechanizm języka, który pozwala dopasowywać tekst do definiowanych przez nas wzorców. Wyrażenia regularne potrafią być bardzo zaawansowane i odstraszać, dlatego rozłożymy je na czynniki pierwsze, byś dokładnie je zrozumiał. Na przestrzeni wielu lekcji dowiesz się jakie są specjalne symbole wykorzystywane przy wyrażeniach regularnych, czym są kwantyfikatory, kotwice czy np. grupowanie. Następnie przejdziemy do wykorzystania wyrażeń regularnych w języku JavaScript. Poznasz zarówno metody obiektu RegExp jak i te dostępne na obiekcie String. Dzięki nim będziemy mogli wyszukiwać np. adresów e- mail w podanym tekście, usuwać je lub zamieniać na coś innego. Jako praktyczny projekt, stworzymy “Antybluzgacz”. Wykorzystamy do tego celu programowanie obiektowe, a sama aplikacja będzie pozwalała filtrować wpisywany przez użytkownika tekst wiadomości i wyłapywać w nim niecenzuralne słowa. Wszystkie z nich zamienimy na przypadkową reprezentację znaków, np. $#!@%^. Ten projekt pokaże Ci nie tylko jak korzystać z wyrażeń regularnych, ale także jak profesjonalnie pracować z kodem JavaScript.W przedostatnim rozdziale tego kursu znajdziesz lekcje związane z dobrymi praktykami pracy. Omówimy tzw. “strict mode” języka JavaScript, zagadnienia związane z minifikacją i konkatenacją skryptów, sprawdzaniem poprawności pisanego kodu oraz delegacją zdarzeń DOM.Na końcu kursu znajdziesz 10 krótkich lekcji z serii Tips & Tricks, które przybliżą Ci wiele ciekawych konstrukcji języka JavaScript, a także technik na rozwiązanie różnych problemów. Zobaczysz np. jak wczytać obrazy w tle czy jak wyświetlić na pasku tytułowym witryny migające powiadomienie.Podsumowując, kurs ten jest dopełnieniem wiedzy z zakresu języka JavaScript i Obiektowego Modelu Dokumentu z kursu “JavaScript od Podstaw”. Poprzedni kurs nie jest wymagany, lecz jego przerobienie z pewnością pozwoli dużo lepiej przyswoić wiedzę z tego kursu, gdyż były one przygotowywane równocześnie. Oba te materiały, pozwolą od zera, wskoczyć na naprawdę wysoki poziom rozumienia języka, a także dobrych praktyk pisania kodu.
Kurs JavaScript w Praktyce to między innymi:
- Omówienie koncepcji OOP
- Dziedziczenie prototypowe
- Domknięcia
- Format danych JSON
- Praca z AJAX
- Cookies
- Wyrażenia regularne
- “strict mode” w JavaScript
- Praktyczne projekty
- Niezliczona ilość sztuczek i dobrych praktyk
- I wiele, wiele więcej!
Dla kogo jest ten kurs?
Do tego kursu mogą jednak przystąpić wszystkie osoby, które znają już podstawy języka HTML, CSS i JavaScript i chcą poszerzyć swoją wiedzę, a także spojrzeć zupełnie inaczej na ten język.
W tej lekcji pokażę ci niezwykle ciekawą technikę która nazywa się jsonp czyli json with padding.
Natomiast według mnie powinna się nazywać Polak Potrafi.
Nie dlatego że wymyślili ją Polacy ale dlatego że jest naprawdę bardzo cwana w swoim działaniu.
I teraz o co chodzi z jsonp.
Zanim do tego przejdę to pokażę ci co tutaj przygotowałem index HTML mam prosty przycisk load data
czytaj dane i teraz na kliknięcie tutaj do tego przycisku przypisuje sobie funkcje.
Jak widzisz tutaj tworzy prosty obiekt data i przekazuje go do metody show data do funkcji show data która
jest tutaj czyli po kliknięciu na wczytajJ dane.
Tak naprawdę wywołamy show data i przekażemy te dane.
Co robisz show data.
Otóż tworzy sobie nowy element pre.
Ustawia jego tekst content na json stringify.
Czyli ten przekazany obiekt zamieni na string i przypisze do text content i wstawi do body wciśnijmy.
Zobaczymy jak to wygląda jak widzisz dokładnie tak się stało czyli obiekt został przepuszczony przez json stringify
i to pre to zostało wstawione i wstawione na stronę.
Teraz będę chciał zrobić podobnie ale z takimi danymi pobrany z internetu i teraz mam taki host jak eduweb dev
i również na ten adres nie wejdziesz bo nie jest to adres dostępny gdzieś w internecie jak eduweb pl to
jest u mnie lokalnie skonfigurowane.
Natomiast jest to inny adres eduweb kropka dev.
Celowo i teraz mam takie dane czyli jeśli przejdziemy do get data odświeżę to taki json jest zwracany.
Dlaczego.
Otóż w PHP symuluje jakby pobranie danych z bazy danych.
Wyobraź sobie że tutaj pobieramy dane z jakiejś bazy danych itd.
I one będą w jakiejś tam formie tablicy powiedzmy.
I na koniec zrobię echo json encode czyli taką tablicę zamieniam na json i przechodząc właśnie
pod ten adres get data php.
Takie coś zostaje nam zwrócone i teraz ja chciałbym coś takiego przekazać sobie na naszej funkcji scripts
którą mamy tutaj do show
data i mógłbyś sobie pomyśleć.
Nic trudnego.
Wyślemy zapytanie Ajax pod ten adres zostanie nam zwrócone tak jak tutaj widzimy te dane i będziemy
je mogli przekazać.
Owszem to jest możliwe ale uczyłem się w tym kursie że tylko wtedy jeżeli serwer oraz przeglądarka będą
wspierać Cross Origin Resourse Sharing.
Inaczej jeżeli będę chciał z localhosta wysłać zapytanie Ajax pod taki adres to właśnie Same Origin
Policy o którym mówiłem w tym kursie nie pozwoli nam tego zrobić.
I właśnie tak jeszcze działa bardzo wiele serwerów oraz przeglądarek starszych internetowych.
Dlatego w internecie funkcjonuje taka technika jak jsonp,
która jest bardzo cwana i teraz pokażę ci na czym ona polega.
Skupiłem sobie ten adres i przejdę tutaj gdzie mam podlinkowane scripts wpisze coś takiego.
Może cię to zdziwi bo mógłbyś teraz powiedzieć chwila ale przecież tutaj linkujemy js.
Od kiedy możemy linkować sobie w skrypcie PHP.
Otóż nie ma absolutnie żadnego znaczenia czy tutaj jest rozszerzenie PHP czy w ogóle nie ma rozszerzenia
czy to będzie tak wyglądać to jest adres pod który przeglądarka ma wysłać zapytanie i oczekuje że z
powrotem otrzyma kod Java skrypt taki jak np. w tym pliku to jest tekst przeglądarka tego oczekuje więc
jeżeli teraz tak to teraz zapiszemy to przeglądarka wczytując sobie stronę wyśle adres pod eduweb kropka dev get data kropka def
Get data PHP.
Wiesz o tym że skrypty możemy ładować na stronie z dowolnego miejsca czyli serwujemy całą tą stronę
z localhost a skrypt ładuje z eduweb.pl.
Nie ma problemu zawsze można to było robić skrypty mogą być ładowane z innych miejsc.
Natomiast teraz ten skrypt nam odeśle coś takiego to jest string json więc nie jest to poprawny JavaScript.
Sprawdźmy co się stanie czy będziemy jakieś mieli błąd.
Jak widzisz mamy tutaj od razu błąd z tego powodu właśnie że nie został odesłany poprawny kod JavaScript.
Natomiast co by się stało gdybym na chwilę to wykomentował i zrobiłbym echo alert.
Witaj w ten sposób to stanie się tylko tyle że kiedy przejdziemy pod get data chciałbym to pokazać coś
zrobiłem źle średnik tutaj na końcu w PHP to zostaje nam zwrócone z tego adresu text alert.
Witaj.
I teraz jeżeli sobie to przypiszę tutaj to zostanie poprawnie zwrócone ale przeglądarka wysyłając żądanie
po skrypt oczekuje że z powrotem otrzyma dane razem z nagłówkiem który będzie mówił że jest to tekst ukośnik
JavaScript.
I teraz pokażę ci jak to wygląda.
Otóż przejdziemy do PHP i w języku PHP możemy to już w tym kursie widziałeś funkcją header ustawić nagłówek
ustawiamy nagłówek content type na main JavaScript czyli tekst ukasik JavaScript.
Dzięki temu zanim ta odpowiedź zostanie wysłana czyli ten tekst zostanie również wysłany nagłówek że
treść która będzie za chwilę.
To jest tekst ukośnik JavaScript.
W ten sposób jeżeli tu przejdziemy.
Nic się nie zmienia.
Chociaż widzisz troszkę formowanie się zmieniło.
Gdybym teraz przeszedł tutaj do Network odświeżę do get data zwraca nam w request headers możesz zobaczyć
content type powinno gdzieś tutaj być.
Response generalnie nie jest oczywiście request mamy żądanie content type.
To co wpisałem tekst ukośnik zwraca nam preview.
Jest to coś takiego.
Czyli teraz jeżeli podlinkowałem to wszystko w skrypcie i tutaj odświeżę to alert się wykonało, bo przeglądarka
wczytała sobie ten skrypt a jego treść to było to co zostało zwrócone co rzeczywiście widzisz tutaj.
Z tego właśnie powodu możemy wykorzystać to i nazywa się to techniką jsonp.
Otóż możemy stworzyć w locie co zaraz zrobimy skrypt który będzie kierował do jakiegoś serwera i będziemy
z niego mogli pobrać dane.
Natomiast w jaki sposób może to działać abyśmy mogli wykonać naszą funkcję show.
Data.
Teraz będę chciał ci pokazać.
Otóż wyobraź sobie że pod taki adres wyślemy zapytanie w którym napiszemy sobie callback równa się show data.
W ten sposób tutaj nic się nie zmieni dalej to zostanie tak samo pobrane jeśli tutaj przejdziemy.
Alert ale teraz w języku PHP mogę tutaj z tego adresu odczytać sobie get co również robiliśmy już w
tym kursie zrobię teraz tutaj pewną instrukcję warunkową.
Na samej górze czyli jeżeli zostanie pod ten adres wysłane zapytanie i w GET nie znajdzie się coś takiego
jak call back albo będzie to puste.
Czyli gdybyśmy tutaj napisali call back i nic nie przypisali albo w ogóle tego nie podamy.
Czyli jeżeli w get to nie będzie dostępne to chcemy zgłosić header 404 not found czyli że serwer nie odnalazł
takiego zasobu i Die czyli zakończyć ten skrypt zobaczmy czy rzeczywiście to tak zadziała.
Jak widzisz nic się nie wyświetli.
Tutaj mamy na czerwono 404.
Natomiast jeżeli podam callback i nie będzie to puste czyli przypiszę tutaj cokolwiek np. show data to już wszystko
działa.
Czyli nie wykonała się ta instrukcja.
I teraz ten callback możemy odczytać.
Chciałbym Ci go teraz pokazać więc zamiast zrobić jeszcze tutaj echo tego wszystkiego
zróbmy sobie taką właśnie get callback
Oczywiście ja pokazuję ci inkrementację w PHP a to może być dowolnym języku zrobione jak chce ci pokazać
tylko o co chodzi.
Czyli teraz jeżeli przejdziemy i piszemy data to tutaj jest to show data jeżeli się wpisze coś innego to jest
to coś innego czyli ktoś może nam przekazać wysyłając prośbę o jakieś dane coś takiego jak choćby call back show data.
To oczywiście może być więcej informacji np. jakie dane chce pobrać tutaj może ma jakiś limit napisać
zero itd.
W PHP czy w innych językach to można odczytać.
Natomiast my nie będziemy tego robić.
Dla nas jest istotne jak nazywa się funkcja callback którą trzeba wykonać.
No i teraz wróćmy do naszego skryptu.
Gdybyśmy tę funkcję.
Ona nie jest widoczna na zewnątrz umieścili na zewnątrz poprzez np. window show data równa się data
teraz ona będzie widoczna w przeglądarce tutaj na zewnątrz.
Jeżeli show data is not defined oczywiście musimy tutaj to na moment wykomentować jeszcze raz.
Teraz mamy tutaj show data i gdybyśmy właśnie w tej naszej funkcji która jak wiesz wstawili te dane i
wyświetli na stronie gdybyśmy jej przekazali obiekt z danymi tutaj to wszystko będzie działać.
Czyli musimy teraz znaleźć sposób jak wywołać tutaj tę globalną funkcję zobacz żona tutaj jest i przekazać
jej te dane.
Otóż gdybyśmy to wszystko z kolei wzięli na naszym serwerze napisali możemy tutaj zakończyć PHP w ten
sposób i napisać show data tutaj cokolwiek podamy.
Pamiętaj to już nie jest kod PHP bo zakończyłem znacznik czy to zostanie odesłane.
Możemy tu napisać np. first name John to kiedy nasza przeglądarka tutaj wyśle zapytanie do naszego serwera
pod taki adres to teraz zostanie zwrócone tylko to zobaczmy OK.
Mamy błąd z jednego prostego powodu otóż funkcja show data została zdefiniowana w scripts a to wykonujemy
wcześniej więc sobie to wyrzucamy stąd to tutaj raz jeszcze i teraz zobacz to wszystko się tutaj znalazło.
Czyli z serwera kiedy przeszliśmy pod ten adres aby pobrać skrypt została nam zwrócone coś takiego.
Data to jest treść skryptów JavaScriptowego które zostaną zwrócone.
A skoro na stronie mamy funkcję show data i coś takiego zwróciliśmy to ona przyjęła to jako parametr i poprawnie
się wykonała więc teraz pozostała nam tylko jedna rzecz otóż skoro jako callback przekazujemy nazwę
tej funkcji tutaj to możemy to odczytać tutaj.
Jak ci już pokazałem jako call back to zróbmy sobie tylko jedną rzecz otóż napiszemy tutaj PHP w ten
sposób echo get callback tutaj przez PHP zostanie zwrócone to co tutaj przekażemy czyli np. show data zostanie
podstawione w tym miejscu.
Następnie wywołujemy funkcję a tutaj chcemy przekazać obiekt jak ten obiekt tutaj przekazać znowu otworze
znaczniki PHP.
Jeżeli nie jesteś tym językiem zaznajomiony to to dziwnie wygląda ale to wszystko zostanie zastąpione
tym co tutaj zrobimy zrobimy to co zrobiła wcześniej tutaj czyli w zasadzie json encode data czyli
tego obiektu.
Zróbmy to tutaj.
Ok.
Tak to będzie wyglądać.
I teraz jeszcze chciałbym chociaż bez tego jak widziałeś to zadziałało ustawić ten nagłówek czyli ten
nagłówek możemy sobie ustawić to wyrzućmy to też zróbmy to w ten sposób teraz chce Ci pokazać jak to
będzie wyglądać tutaj.
Otóż takie coś zostanie nam zwrócone jeśli przejdziemy do show data nawias.
Nawias to co zrobiłem tutaj czyli ten nawias i nawias a pomiędzy tym będzie json zapisany w taki
sposób mam nadzieję że teraz to widzisz i to wszystko zostanie dla nas zwrócone jako treść skryptu które
sobie podziękowałem w tym oto miejscu i zobaczymy czy teraz to zadziała.
Jak widzisz działa funkcja się wykonała i od razu wszystko tam zostało zapisane czyli jakby po stronie
serwera pobraliśmy dane z bazy danych i jako json jej tutaj nie płaciliśmy oczywiście więcej rzeczy po stronie serwera
należałoby sprawdzać czy te nazwy które ktoś przekazuje są poprawne bo jeżeli napiszemy coś takiego
to zostanie nam zwrócone coś takiego to już nie jest poprawna nazwa funkcji w krypcie więc więcej rzeczy
należałoby tam sprawdzać.
Natomiast to co jest teraz niezwykle ciekawe to utworzyliśmy funkcję o nazwie show data i tutaj podłączyliśmy
skrypt powiedzieliśmy callback show data jeżeli powiemy coś innego to będziemy mieli na stronie błąd albo też
nie będzie błędu tutaj powinien się pojawić błąd.
Zobaczmy tak bo chcemy wykonać funkcję która nie istnieje bo ten skrypt wtedy jak widzisz zwraca coś
zupełnie innego.
Mam nadzieję że to widzisz i teraz json key polega na tym że nie robimy tego ręcznie.
Czyli to wszystko co tutaj mieliśmy robimy w locie więc ja teraz to wszystko stąd wyrzucę.
Przejdziemy tutaj i pokażę ci jak stworzyć funkcję jsonp nazwiemy ją jsonp.
Jako pierwszy parametr będzie przyjmować adres URL a jako drugi callback name.
I teraz co ta funkcja będzie robić.
Otóż utworzy nowy element script poprzez document create element możemy dowolne elementy tworzyć utworzymy
element script teraz do niego chcę przypisać type albo poprzez set attribute albo poprzez kropka type w HTML
5 nie jest to konieczne ale lepiej to zrobić gdyby nasz skrypt był uruchomiony na innej stronie tekst
ukośnik JavaScript w ten sposób następnie możemy przypisać script async.
To jest taki atrybut jeśli przypiszemy na true, który mówi że jeżeli ten skrypt zostanie wstawiony na stronę to
asynchroniczne ma się odczytywać ma nie blokować wczytywania całej strony i potem ma się wykonać czyli
to nie ma do końca znaczenia.
W tym przypadku ale lepiej to dodać i teraz script src również tu możemy zrobić set attribute src
ale w skrócie jest to src chcemy tutaj podać URL które zostanie przekazany.
Plus dodamy do tego callback równa się plus callback.
W ten sposób mam nadzieję że to rozumiesz ja teraz wyświetlę cały ten skrypt console log script abyśmy
zobaczyli jak on wygląda.
Natomiast te funkcje trzeba gdzieś wywołać i zrobimy to tutaj zamiast tego wszystkiego co tutaj mieliśmy
zrobimy jsonp.
Czyli po kliknięciu na nasz przycisk na stronie jsonp.
Napiszemy tutaj ten adres.
Czyli to jest adres pod którym będziemy szukać danych get data php i callback name jako string przekażemy show
data czyli zauważ co się stało.
W tym momencie taką prostą instrukcją funkcji którą wcześniej stworzyliśmy ona jeszcze nie jest gotowa.
Mówimy pobierz nam dane stąd i chcemy kiedy je bierzesz wykonać funkcję show data którą tutaj zdefiniowaliśmy.
I teraz ta funkcja się wykona więc zobaczymy jak to będzie wyglądać.
W console log powinniśmy coś mieć.
Oczywiście jest po kliknięciu więc kliknijmy w console log mamy skrypt który utworzyliśmy w locie.
Ma on typ ukośnik text ukasik javascript atrybut async.
I właśnie ten src czyli cały ten src jeśli byśmy skopiowali to już wiesz że dla nas zostaną zwrócone
takie dane jak byśmy napisali callback show
data to zostanie tam zwrócone czyli teraz wystarczy wstawić taki skrypt na stronę i powinno wszystko
być OK.
Ten nasz skrypt jest już wczytany więc mamy globalną funkcję show data i teraz zamiast robić console log odwołamy
się do dokument head czyli odwołamy się do elementów head na naszej stronie mogę ci to pokazać tutaj
i najlepiej tutaj go wstawić poprzez append child wstawimy nasz skrypt w momencie kiedy go wystawimy tutaj
tak jakbyśmy go tutaj wpisali to przeglądarka go pobierze i wykona.
A że ten skrypt jak już wiesz zwróci coś takiego to wykona nasze show data zobaczmy czy to zadziała
działa bo wszystko zostało tutaj bez problemów wczytane.
Stworzyliśmy sobie zatem swoją własną funkcję jsonp.
Ona jest dostępna np. w języku jquery czy w innych bibliotekach.
Zobacz jaki fajny sposób działa i pozwala nam wysyłać zapytania Cross Origin czyli również do innych
serwerów powiedzieliśmy wyślij zapytanie do eduweb.dev. Natomiast jak widzisz serwer musi współpracować
a więc musi sprawdzać co tam podaliśmy jako callback itd czyli serwer również odpowiednio teraz napisałem
że sprawdza czy przekazany callback czy on tutaj jest.
Jeżeli jest to zwraca nam właśnie dane opakowanie taką funkcję w jej wywołanie.
Mam nadzieję że ta lekcja była dla ciebie ciekawa i że do tej pory nie widziałeś jak działa jsonp.
Teraz już wiesz i jak widzisz.
Dlatego właśnie mówiłem że jest to bardzo fajna technika którą powinniśmy nazwać Polak potrafi.