JavaScript: Własna biblioteka AJAX cz. 3
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.
Mam nadzieję że nasz projekt biblioteki ajaxowej póki co ci się podoba i że razem ze mną go piszesz w tej
lekcji postaramy się dokończyć naszą bibliotekę aby mogła poprawnie działać.
Od czego będziemy chcieli zacząć.
Wspomniałem pod koniec poprzedniej lekcji że mamy tutaj coś takiego jak data.
Ktoś może przekazać dane które chce wysłać na serwer właśnie w takim formacie czyli jako obiekt one
są podobne do danych json chcielibyśmy z tych danych móc zrobić jakiś obiekt aby to przesłać.
Ja ci już pokazałem jak można to zrobić.
Natomiast będziemy chcieli przesłać to zarówno za pomocą get jak i post więc teraz abyśmy to mogli
zrobić to do naszej metody którą nazwałem send.
Tutaj będziemy musieli jakieś dane przekazywać nazwijmy to data.
I tutaj już bezpośrednio na tym obiekcie będziemy to wysyłać no ale wiesz że nie możemy tutaj odwołać
sie do naszego configa i powiedzieć wyślij ten obiekt bezpośrednio.
Musimy z tego stworzyć jakieś form data.
Dlatego teraz chciałbym stworzyć metodę którą nazwiemy serialize form data za momencik ci wszystko
wytłumaczę nie ma w niej nic skomplikowanego dlatego ja ją całą będę chciał tutaj wkleić.
Ta metoda będzie przyjmować dane właśnie takie dane dokładnie czyli obiekt zauważ i będziemy sobie
tworzyć nowe form data pokazywałem ci to już w kursie do niego poprzez append możemy dodawać różne informacje.
Więc teraz kierujemyprzeiterujemy przez obiekt przekazany tutaj czyli na przykład przez właśnie taki obiekt przeiterujemy
i będziemy chcieli dodać first name Piotr last name Kowalski.
No i tak właśnie to będziemy robić czyli do form data poprzez append będziemy to dodawać a na końcu zwrócimy
cały form data.
I wiesz że to co zostanie zwrócone jak najbardziej możemy już wrzucić tutaj i wysłać na serwer.
Ale tak to działa w przypadku zapytania post które będziemy wysyłać więc musimy sobie gdzieś to rozgraniczyć.
Moglibyśmy tutaj napisać ify w naszej metodzie send którą
zauważ ja wywołałem tutaj na samej górze ja ją wywołuje i moglibyśmy sprawdzić czy to jest żądanie typu
POST czy nie.
Natomiast chciałbym utworzyć jeszcze jedną pomocniczą metodę którą nazwiemy before send i ona będzie
nam przygotowywać nasz obiekt przed wysłaniem wstawię ją teraz tutaj i teraz w tej metodzie będę chciał
zrobić od razu trzy rzeczy mianowicie odtworzyć to co robiliśmy wcześniej i przypisać te headery użytkownika
i następnie wysłać dane data zaraz tutaj utworzymy.
Czyli teraz nie musimy tego robić tutaj u góry open open assigned user headers i send w tym miejscu tylko napiszemy
tutaj this before send wywołujemy a więc przeniosłem po prostu te trzy wywołania do jednej metody która
znajduje się teraz niżej.
Natomiast abyśmy te dane mogli wysłać to musimy gdzieś tu mieć taką zmienną jak data utwórzmy ją zatem data
i ona będzie powiedzmy pusta na początku i teraz chciałbym otworzyć jeszcze drugą zmienną która będzie
nam mówiła czy jakieś dane w ogóle mamy do wysłania.
O co chodzi.
Otóż będziemy chcieli sprawdzić czy tutaj zostało coś podane czyli object keys przekażemy data i sprawdzimy
czy jego length jest większe niż zero pokazywałem ci to już w przypadku tych headerów więc nic tutaj nie
będzie nowego.
Napiszmy sobie is data i tutaj chciałbym aby było true lub false.
Więc możemy sobie wkleić taki zapis i dzięki temu właśnie wszystkie klucze zostaną nam zwrócone i będzie
to tablica jeżeli długość tej tablicy jest większa od 1 znaczy że jakieś dane do wysłania mamy czyli
jeżeli jakieś dane mamy do wysłania to będziemy chcieli odpowiednio przygotować.
Teraz będę chciał sprawdzić czy mamy zapytanie typu get czy też post.
Na razie obsługujemy sobie post ale możemy to tutaj sprawdzić będzie nam to potrzebne czyli if gdzie możemy
sprawdzić jaki typ zapytania będzie dla nas potrzebny.
To było tutaj na tym default albo przekazane tutaj na naszym configu czyli wiesz, że do tego możemy się odwołać
przechodząc tutaj do this config i tak dalej czyli this config type.
To będzie get np. w naszym przypadku moglibyśmy porównać czy to jest równe get albo czy to jest równe post.
Natomiast kolejny trik jeżeli ktoś poda tutaj post z małych liter w tym miejscu to wtedy nam to nie
zadziała dlatego będę chciał niezależnie czy ktoś poda z małych czy dużych porównywać to do dużego post
dlatego napiszemy to upper case.
Czyli jeżeli ktoś poda małych to zostanie zamieniona na duże i wtedy dopiero porównamy jeżeli poda z dużych
to też na duże jakby zostanie zmienione wtedy to samo porównujemy.
Teraz mamy pewność że chodzi nam np. o post.
Czyli jeżeli to jest post i mamy dane to chcemy te dane przygotować przez metodę którą Ci pokazałem
czyli serialize form data.
Mam nadzieję że zaczyna to mieć dla ciebie sens czyli data to ten bool.
A teraz data napiszemy równa się this.
Serialize form data i pamiętasz że tam musieliśmy do tej metody przekazać dane z których chcemy zrobić
form data.
Te dane możemy przekazać jeżeli wiemy że one są.
Natomiast tutaj musimy jeszcze zapytać end is data bo jeżeli nie będziemy mieli data to nie chcemy nic
serializować.
Czyli tutaj jeżeli będziemy mieli true to dopiero wtedy to się wykona.
Przekażemy je tam poprzez this config data.
W ten oto sposób powinno zostać zwrócone tutaj do data.
Jeżeli one tutaj będą to będziemy je mogli wysłać do serwera właśnie w tym miejscu.
Przy pisaniu tego wszystkiego zobaczmy czy to działa odświeżam.
Nie mamy błędu czyli post został wysłany do serwera.
I zauważmy co w nim zostało wysłane.
Zobaczmy tutaj na samym dole jak widzisz dokładnie to co nas interesowało czyli nasze form data zostało
tam przesłane więc wow to wszystko na razie działa jak należy.
A przypominam że serwer tylko nam to odsyła czyli print r get i post w get nic nie mamy zaraz ci jeszcze
wytłumaczę jak to będzie działać.
Ok zatem przejdźmy do get. Get działa inaczej zupełnie inaczej bo nie możemy tutaj przez send przekazać
tych danych get musi być przekazane na adresie URL.
I teraz ci pokażę o co chodzi język PHP od razu parsuje adres URL i wszystkie dane zamieszcza nam tutaj w tym get.
Jeżeli przejdziemy pod odbierz php.
Jak widzisz mamy dwie puste tablice bo nie mieliśmy ani get ani post.
Natomiast get to jest znak zapytania i tutaj na przykład coś takiego first name
i tak dalej.
Teraz zauważ co nam zwrócił serwer jeśli wejdziemy do kodu w przypadku tej pierwszej tablicy czyli print r
target zwrócił nam first name Piotr last name Kowalski czyli w taki sposób musimy zapisać dane aby one mogły być
dostępne po stronie serwera w PHP czy w innych językach programowania które to wspierają.
Czyli musimy je przesłać razem z adresem czyli do naszego adresu to musimy dodać.
No i co tutaj zaczyna nam jakby robić schody.
Otóż to że nasz adres przekazywaliśmy tutaj na dole albo był domyślny albo przekazaliśmy go tak a ten
get musielibyśmy dopisać tutaj czyli do naszego URL musimy dane przekazane tutaj zamienić na taki ciąg
i tam dopisać.
Możemy to zrobić więc będziemy musieli utworzyć specjalną metodę nazwałem tą metodę serialize form data
a teraz będę chciał drugą metodę nazwać w ogóle serialize data i pokazać na czym ona będzie polegać.
Ok.
Mamy metodę serialize data i teraz gdzie będziemy ją w ogóle wywoływać żeby przekazać jej data.
Otóż znowu przejdziemy tam gdzie robiliśmy if z tym postem.
Jeżeli mamy post ok ale zróbmy else if jeżeli to co tutaj mamy to upper case równa się get.
Tym razem zróbmy i mamy dane to chcemy do zmiennej data która ma null przypisać to co zwróci nam metoda
właśnie serialize data którą przed momentem utworzyłem czyli przekażemy do niej ten obiekt data z samego
dołu przekażemy go dosłownie do tej metody którą tutaj stworzyłem i teraz z tego obiektu będziemy chcieli
stworzyć taki string jak ci przed momentem pokazałem czyli first name.
Następnie równa się Piotr i End last name itd.
Więc musimy po tym obiekcie przeiterować.
Zrobimy to znowu pętlą for.
For var key in.
Na samej górze utworzymy sobie pusty ciąg który nazwiemy serialize.
Jest to pusty ciąg do niego będziemy dodawać ok i teraz key jak pamiętasz to będzie na przykład first name czyli będziemy chcieli napisać tutaj u góry
serialized.
Plus równa się key czyli np. first name.
Potem będziemy chcieli do tego dodać równa się i dodamy do tego data key.
W ten sposób ok. Zobaczmy jak to będzie wyglądać.
Zróbmy sobie tutaj na samym końcu serialize console log.
Tylko że teraz żeby to zadziałało to tutaj nasz typ musimy zmienić na Get aby nasz się wykonał.
Zobaczmy w konsoli.
Ok.
Czyli tak to wygląda first name
Piotr last name Kowalski ale tu jeszcze musi być End więc w naszej metodzie tutaj wyżej bo do tego jeszcze End.
W ten oto sposób zobaczmy jak teraz to wygląda.
Chciałbym jeszcze ostatni end usunąć nie powinno być błędu jeśli tak prześlemy to do serwera ale ten ostatni
end nie jest nam potrzebny.
Pokażę ci fajny trik.
Jak możemy to usunąć już po sterowaniu przez wszystkie te elementy.
Otóż tutaj już może zamiast console log zrobimy sobie od razu return bo chcemy zwrócić serialize.
Czyli ten ciąg na końcu będzie end chcemy go przyciąć metodą slice.
Tą metodę w pierwszej części tego kursu chcemy od początku tego ciągu wyciąć do ostatniego znaku czyli
z wyłączeniem ostatniego więc odczytuje długość tego ciągu minus jeden.
Wtedy nam ten ostatni element zostanie odcięty a to zostanie zwrócone do metody.
Przypominam do zmiennej tutaj więc teraz możemy sobie zrobić console log data i zobaczymy jak to wygląda.
Ok.
Console log data first name
Piotr last name Kowalski natomiast teraz pojawia się jeszcze jeden problem jeżeli tutaj ktoś napisze Kowalski
Nowak to zobacz jak to będzie wyglądać.
Kowalski Nowak zostało bezpośrednio dodane a taki string który przesyłany tutaj razem z get w adresie
URL powinniśmy odpowiednio zakodować i mamy dwie wbudowane do tego celu funkcje w języku JavaScript
i możemy z nich skorzystać.
Dlatego wróćmy do naszej metody.
Serialize data o tym mówimy czyli tutaj to będzie na przykład jak widzisz Kowalski Nowak to chcemy
przepuścić przez metodę encode uri component i jak widzisz do tego się taka metoda przydaje.
Teraz to zostało zamienione na procent 20 czyli spacja wszystkie szczególne znaki które w adresie URL muszą
być zakodowane
inaczej zostaną w ten sposób zapisane i teraz pozostało nam taki adres na początku dodać znak zapytania.
Zauważ odbierz PHP.
Znak zapytania i taki adres sklecić i przesłać i wtedy serwer poprawnie to odczyta czyli dopisać do naszego
adresu URL to po prostu potrzebujemy.
Czyli mieliśmy tutaj w tym miejscu data nie przesyłamy go tutaj w taki oto sposób ale musimy go dodać
do adresu URL.
Tutaj w open jak widzisz otwieramy sobie nasze żądanie.
Przejdźmy do metody open i zobaczmy co tam się działo.
Ona była chyba wyżej więc musimy ją znaleźć.
Dokładnie podawaliśmy tutaj URL a tutaj chcemy dodać właśnie to data.
No i teraz jak możemy to zrobić.
Otóż nadpiszemy sobie to co tutaj mamy czyli this config URL.
W naszej metodzie którą mamy niżej troszkę się zaczyna robić zamieszania ale mam nadzieję że mimo wszystko
jest to czytane.
Czyli zamiast napisać data bo daty nie przesyłamy to stwórzmy sobie zmienną w zasadzie możemy to zrobić
tu i nazwiemy ją URL data i to będzie w tej zmiennej więc tutaj nadal będzie null.
I teraz to dodamy do this config URL pamiętasz że tam jest adres URL będziemy chcieli do niego przypisać
to co już tam jest więc w zasadzie możemy napisać plus równa się na stringu i napiszemy znak zapytania.
Plus url data w sumie nie musielibyśmy tworzyć nawet tej zmiennej.
Może rzeczywiście ją usuńmy i to co zostanie tu zwrócone napiszmy bezpośrednio nie będziemy tworzyć dodatkowej zmiennej.
Teraz jeżeli zrobimy sobie this config URL zobaczmy jak on będzie wyglądał.
Jak widzisz odbierz PHP i to co mamy tutaj.
Czyli jeśli to przejdziemy do serwera nie ma najmniejszego problemu będzie to wszystko działać jak już
Ci pokazałem w ten sposób prawie już zakończyliśmy prace nad naszą aplikacją nad naszą biblioteką. Zobaczmy
czy jest to poprawnie wysłane do serwera.
Data ma null.
Jeżeli jesteśmy w get to data dalej będzie mieć null bo nie nadpisujemy czyli nie wyślemy null a w metodzie
open którą otwieramy właśnie dopiero w tym miejscu kiedy nadpisaliśmy config URL przejdziemy do metody
open ona tutaj otworzy nowe żądanie this config url czyli w odpowiedni sposób to powinno zostać przesłane
do serwera i print powinien zostać tutaj zrobiony więc zobaczmy co nam serwer odesłał zobaczmy preview.
Okazuje się że poprawnie to zadziałało.
Czyli teraz nasza biblioteka działa świetnie z tego powodu że nie ma znaczenia czy chcemy wysłać get
czy post.
Dane podajemy zawsze w taki sam sposób a one odpowiednio zostają zamienione albo dodane do adresu URL
tutaj albo zostają przesłane postem.
Nasza Biblioteka obsługuje tylko get i post.
Oczywiście można byłoby ją rozwijać i udoskonalać.
Natomiast jeszcze musimy zająć się jedną rzeczą. Otóż chcemy wywołać funkcję kiedy wszystko pójdzie OK.
Te funkcje które ktoś tutaj zdefiniował i możemy to zrobić w jednym miejscu czyli w handle response.
Jeżeli wszystko będzie OK to ja pisałem otrzymano odpowiedź ale chciałbym wywołać funkcję którą ktoś
zdefiniował i ona będzie znajdować się pod config
success natomiast aby ją wywołać trzeba sprawdzić czy ona tam jest i czy jest to funkcja.
Czyli sprawdźmy sobie
if this config success.
Sprawdźmy sobie czy type of od tego jest równy function czyli czy to jest po prostu funkcja.
Jeżeli tak to możemy ją wywołać czyli this config success możemy ją wywołać i teraz teoretycznie to zadziała
jeżeli wszystko się uda zrobić.
Zobaczmy.
Funkcja się powinna wykonać.
Przejdźmy do tej funkcji success.
Ona jest tutaj.
Powinna ona zrobić.
Jak widzisz console log coś nam nie zadziałało.
Czyli config success.
Sprawdźmy raz jeszcze OK.
Spróbujmy tutaj zrobić jakiś console log hejo zobaczmy czy on się nam w ogóle wyświetli nie wyświetla
czyli do tego miejsca jakby nie dotarliśmy zobaczymy tutaj.
Tutaj jest hejo czyli tu mamy jakiś błąd czy type of this config success równa się function.
Sprawdzimy może w console log.
Co zostanie tutaj zwrócone.
Jak widać mamy jakiś logiczny błąd,
undefined zostało zwrócone OK.
Na tym etapie połapałem się gdzie zrobiliśmy błąd.
Skoro type of config success to jest undefined to znaczy że w naszym configu tego nie ma.
Przejdźmy sobie tam gdzie mamy config gdzie go przypisywaliśmy.
W zasadzie możemy przejść nawet tutaj na sam początek albo do metody.
Może od razu nie jest problem którą mieliśmy mamy sporo tutaj metod.
Ciężko to znaleźć.
Jest to metoda extend options.
Na końcu zwracaliśmy config zobaczmy co w nim jest.
Zobaczmy jak widzisz mamy tam to wszystko ale nie mamy tam funkcji.
Wspominałem ci że jeżeli poprzez json parse i json stringify.
Konkretnie poprzez stringify wypuścimy jakiś obiekt to on traci swoje funkcje.
Akurat jeżeli chodzi o nasz obiekt to nie on tutaj był przepuszczany ale default config natomiast tutaj zrobiliśmy
złą kolejność.
O co chodzi.
Otóż iterujemy po tym default config czyli tym domyślnym.
I to jest w porządku natomiast teraz sprawdzam czy dany klucz jest u nas w configu zróbmy console
log znowu abyś zobaczył o co chodzi console log key to jest błąd prosty do naprawienia czyli type of URL options.
To jest z tego default config.
I teraz chciałbym zrobić tak że jeżeli taki type czyli odwrotnie znajduje się w naszym configu który
tutaj na samym dole przekazaliśmy na przykład tutaj to nie chcę go nadpisywać czyli nic nie chcę z tym robić.
Wróćmy sobie zatem do tej metody tutaj.
Czyli jeżeli key znajduje się w naszym configu to wtedy chcę zrobić continue jest to polecenie
pętli jeżeli type znajduje się u nas w configu który przekazaliśmy to znaczy że go zdefiniowaliśmy to przechodzimy
do kolejnej interakcji tej pętli.
Natomiast jeżeli type nie znajdzie się w naszym configu to do naszego configa a nie do default configa, czyli
do naszego configa na odwrót chciałbym przypisać to co znajduje się tam.
Czyli jeżeli będziemy mieli np. type a my tego nie podaliśmy to teraz do config type przypiszemy default config type.
W ten oto sposób teraz nam to zadziała i możemy zrobić tutaj na końcu config i powinniśmy zwracać
tutaj config.
W ten oto sposób.
Trochę nam się to zagmatwało ale teraz jeżeli tutaj zajrzymy to mamy succes i mamy failure i te funkcję tam
się znajdują i wszystko powinno działać jak należy.
Czyli teraz możemy wrócić do naszej funkcji którą pisaliśmy czyli do response handle response.
Tutaj możemy teraz sprawdzić czy właśnie o tej funkcji którą ktoś przekazał jeśli ją przekazał czy to
jest funkcja a jeśli tak to wykonaj.
Czyli tutaj wykonujemy funkcję z configa, którą ktoś sobie przekazał do naszej biblioteki funkcje succes natomiast
pojawił się błąd że status jest undefined bo tutaj chciałbym się odwołać do xhr status czyli do tej
funkcji którą wywołujemy.
My powinniśmy przekazać response oraz xhr.
Zróbmy to zatem tutaj wyżej tak sobie ją zdefiniowałem.
Wywołuje ją na początku response czyli możemy do this xhr response się odwołać przekazać to tam a jako
drugi przekażemy nasz obiekt czyli this xhr gdyby ktoś chciał z tego korzystać jako pierwszy parametr
dałem response bo jeżeli ktoś wstawi sobie funkcję succes i ominie ten parametr to w response będzie miał to co
serwer zwrócił.
Mam nadzieję że teraz to jest jasne i powinno nam to dobrze zadziałać zerknijmy sobie odświeżam udało się
status 200 czyli teraz ktoś kto skorzystał z naszej biblioteki powiedział wyślij get pod odbierz PHP.
Następnie podaj te dane i jak się uda coś odebrać to chciałbym to wyświetlić w zasadzie można tutaj
zrobić coś takiego to co serwer odeśle zostanie wyświetlone jak widzisz dokładnie tak to działa.
Teraz chciałbym jeszcze zrobić rzecz podobną jeżeli chodzi o failure jeżeli wystąpi błąd to będziemy chcieli
znowu wywołać funkcję kogoś kto ją podał tutaj.
Dlatego w handle error zrobimy rzecz bardzo podobną w zasadzie tutaj wystarczy to if type of failure równa się
function to chcemy ją wywołać i tam przekazujemy tylko ten obiekt xhr pokazałem ci to tutaj.
Gdyby ktoś chciał z niego skorzystać jeżeli wystąpi jakiś błąd to w ten sposób to będzie działać i już
nie będziemy tego sprawdzać.
Mógłbym wyłączyć serwer i nie udałoby nam się wysłać zapytania i wtedy byś zobaczył że rzeczywiście
tak jest chociaż w zasadzie chyba jeśli zmienimy adres tutaj na nieistniejący.
To również będzie błąd więc rzeczywiście mamy tutaj błąd i powinna się wykonać funkcja.
Funkcja nie wykonała się funkcja którą zdefiniowaliśmy na failure.
Dlaczego.
Przejdźmy do miejsca w którym przypisujemy eventy czyli tutaj napisaliśmy on error this handle error czyli
powinna się ta funkcja wykonać.
Przejdźmy do handle error zróbmy console log błąd.
Zobaczmy czy to się w ogóle wykonuje.
Jak widzisz nie wykonuje się z jakiegoś powodu.
No właśnie powód jest prosty otóż tutaj udało nam się odesłać z powrotem zapytanie więc wykonała się
prawdopodobnie nasza funkcja tylko ready state a nie handle
error handle error wykonała się w przypadku innego błędu np. błędu po stronie serwera.
Z tego właśnie powodu zostawmy tę funkcję tutaj ale przejdźmy do tej funkcji i zróbmy sobie else if.
Jeżeli this xhr state równa się 4 i status
równa się np. 404 to znaczy że był błąd.
To wtedy spróbujmy wywołać funkcję handle error.
Możemy to zrobić poprzez this handle error i zobaczmy czy teraz to zadziała.
Przejdźmy do konsoli i rzeczywiście teraz działa wystąpił błąd status 404 czyli taki błąd 404 to w tym
rozumieniu nie jest rzeczywiście błąd czyli zdarzenie on error się wtedy nie wykona i musimy to obsłużyć
w ten sposób.
Ale zostawiłem tą funkcję tutaj po to że jeżeli wystąpi faktyczny błąd jak np. serwer będzie niedostępny
to wtedy rzeczywiście taka funkcja też się wykona.
Czyli teraz sobie to obsłużyliśmy mam nadzieję że widzisz w jaki sposób to działać powinno.
Generalnie tutaj powinniśmy lepiej o to zadbać bo nie tylko 404 nie tylko taki może być błąd.
Może być to również inny błąd.
Czyli jeżeli będziemy mieli status większy od 400 większy lub równy 400 może w ten sposób to znaczy
że mamy jakiś błąd mówiłam w lekcji o HTTP że 400 i 500 są to błędy.
Czyli jeśli większy lub równy 400 to wtedy jest błąd.
A tutaj jeżeli wszystko jest OK to w zasadzie możemy napisać jeżeli status jest większy lub równy 200
ale również mniejszy od 400.
W ten sposób.
I teraz nam to również zadziała w przypadku innych błędów nie powinno być tutaj różnicy.
Działa to dokładnie w ten sam sposób już całkowicie ostatnia rzecz w naszej bibliotece.
Jest to fakt że może znaleźć w internecie iż po stronie serwera np. PHP możemy wykryć czy zapytanie
zostało wysłane do serwera za pomocą ajaxa czy też nie.
I wygląda to następująco jeżeli serwer tutaj http xhr request równa się taki ciąg znaków zamieniony na
małe litery to wiemy że wtedy wysłaliśmy zapytanie Ajaxem i możemy ustawić nagłówek content type na application json.
W tym przypadku bo chciałbym z powrotem odesłać tablicę którą do tej pory sobie wyświetlaliśmy.
Widziałeś jak wyglądała np. post ta metoda w PHP funkcja w PHP json encode zamieni ją na json
i nam ją odeśle.
O to nam chodzi po to też uczyliśmy się o json.
W przeciwnym wypadku będziemy tutaj mieli dostęp zabroniony.
O co chodzi.
O to że jeżeli teraz przejdę pod odbierz PHP to mamy dostęp zabroniony a jeżeli pod ten sam adres wyślemy zapytanie
Ajaxem to wszystko powinno być OK.
Natomiast w zapytaniu Ajaxowym z automatu nie znajdzie się taki nagłówek musimy go dodać.
Jest to właśnie własny nagłówek który dodaje np. biblioteka jquery chce ci teraz pokazać gdzie możemy
to zrobić.
Przejdźmy do metody open którą tutaj mieliśmy.
W tym miejscu ustawialiśmy sobie tutaj np. timeout potem pamiętasz mieliśmy np. metodę która pozwalała
ustawiać nagłówki użytkownika ustawiamy tutaj za każdym razem a więc niezależne czy ktoś tego chce czy
nie.
Taki oto nagłówek x requested with wszystkie takie nagłówki x pauza to są własne nagłówki niezwiązane z
protokołem HTTP ale będą wysłane i to się ma równać XML http request.
Jeżeli coś takiego ustalimy i wyślemy żądanie tak jak tutaj tylko zmienimy ten adres który nam koliduje
tutaj
to wszystko będzie OK.
Zauważ że teraz przeglądarka wyśle request headers
Mamy to tutaj i ustawi taki nagłówek jak x requested with jeśli jest własny nagłówek dzięki temu po stronie
PHP możemy go odczytać zamieniając na małe litery porównujemy czy jest to taka wartość.
Jeżeli tak to ustawiamy nagłówek header content application json.
To z kolei będzie tutaj w odpowiedzi serwera zauważ w response content type ustawione na application json.
Mówi przeglądarce że przyślemy za chwilę json.
I tutaj json jest akurat pusty bo nie przesłaliśmy żadnych danych.
Post ale wysłaliśmy dane getem więc zróbmy sobie tutaj get i jeszcze raz to co tutaj było odświeżmy
i jak widzisz z powrotem został przesłany do nas json raz jeszcze tutaj zerknijmy tak wygląda przesłany
json czyli tablica get a więc to co zostało dopisane do adresu.
Nasze dane które tutaj przekazaliśmy zostały dopisane tutaj do tego adresu po stronie PHP są dostępne
w takiej tablicy jeżeli funkcją json encode wrzucimy tam tablicę to ona nam zwróci json.
A polecenie echo to po prostu to wyświetla.
W naszym przypadku odsyła do przeglądarki.
Mówiłem ci że jeżeli chcemy wysłać zapytanie GET pod taką stronę jak mieliśmy wcześniej o nas HTML to
cała strona zostanie zwrócona.
Więc tutaj mamy Echo i echo po prostu wyświetli taki tekst gdybyśmy nie mieli tutaj tego zapisu to w
przeglądarce też taki tekst zostałby wyświetlony czyli dokładnie to samo jest przesyłane do przeglądarki.
To nie ma nic wspólnego z Ajaxem ale mówimy tutaj że content type to będzie właśnie on taki jest poprawny
mime type dla json.
Mam nadzieję że tą naszą dosyć zaawansowaną bibliotekę zrobiłeś razem ze mną jeszcze bardzo wiele w
niej brakuje aby móc ją porównać do np. biblioteki która jest wbudowana w jquery która pozwala wysłać
Ajax.
Więc jeżeli chcesz możesz ją sobie trochę rozbudowywać przy okazji ucząc się nowych rzeczy.
Natomiast jeżeli będziesz korzystał z AJAXa to w internecie znajdziesz świetne niewiele zajmujące biblioteki
które możesz podłączyć do własnej strony i w bardzo łatwy sposób za ich pomocą wysyłać żądania Ajax.
One są dobrze przetestowane i wspierają wszystkie możliwe żądania itd.
Natomiast ja ci to pokazałem po to aby wiedział jak coś takiego można zaimplementowac.
I abyś ewentualnie rozwijał sobie taką bibliotekę spróbował ją zrobić po swojemu.
Abyś wiedział jak ona może działać.
To był dosyć zaawansowany projekt rozłożony na kilka dosyć długich lekcji więc mam nadzieję że mimo
wszystko nie jesteś znudzony i że nie jesteś znudzony i pisałeś to razem ze mną i wszystko dobrze zrozumiałeś.