JavaScript: Własna biblioteka AJAX cz. 2
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.
Kontynuujemy pracę nad naszą biblioteką Ajax i teraz już zaczniemy powoli zajmować się właśnie
Ajax do tej pory mamy taką bibliotekę która pozwala nam podać pewne opcje.
I je zmiksować i to na razie wszystko a teraz zajmiemy się już Ajaxem.
Chciałbym od razu do naszego kodu dodać sobie dwie metody które będą obsługiwały błędy oraz odpowiedzi.
Czyli jeżeli będziemy mieli poprawną odpowiedź serwera to będzie jedna metoda a jeżeli będzie błąd to
druga metoda więc ja sobie je teraz tutaj wpisze.
Możemy to zrobić tutaj.
Jedna z nich będzie się nazywała handle response czyli zajmie się odpowiedzią a drugą nazwiemy handle
error.
Teraz co jest bardzo ważne.
Na razie nic tutaj nie robię.
Te funkcje będą się wykonywać jak pamiętasz przy określonych zdarzeniach dlatego teraz takie zdarzenia
chciałbym przypisać no i jak to zdarzenia możemy przypisać wiesz że do właśnie xhr.
Następnie on ready state change itd.
Ale nie chcę tego robić w tym miejscu tylko chciałbym wywołać metodę którą nazwiemy assign events czyli
przypisz zdarzenia. Wywołałałem ją i tyle wystarczy.
Teraz ją musimy stworzyć.
Możemy to zrobić np. w tym miejscu i jest to metoda która wierzy że ma dostęp do this poprzez prototyp
czyli do this xhr ma dostęp i możemy tam od razu przypisać różne zdarzenia.
Wkleję je tutaj od razu i już ci wytłumaczę.
Moglibyśmy skorzystać z np. z on ready state change.
Ale wierzę że możemy również skorzystać z at event listener.
I teraz o co chodzi.
Bo this xhr przypisuje ready state change i chce wtedy wywołać metodę this handle response którą mamy tutaj.
Ale po co zrobiłem tutaj bind w tym kursie również mówiłem po co jest bind za sekundę ci to będę chciał pokazać.
Jeżeli z kolei będziemy mieli abort w zasadzie abort nam się nie wykona bo nie będziemy tutaj udostępniać
takiej możliwości aby wywołać na naszym obiekcie metodę abort.
Bo jak widzisz my tutaj mamy taką funkcję którą wykonujemy i nie zapisujemy tego w zmiennej nawet jeżeli
zapiszemy to musiałby ktoś od razu napisać abort.
Ale powiedzmy że jeżeli AdWords to również jest błąd.
Czyli chcemy wywołać metodę handle error.
Jeżeli będziemy mieli jakikolwiek błąd zwrócony przez Ajax czyli takie zdarzenie pokazywałem w poprzednich
lekcjach że to było on error to również chcemy wywołać handle error i jeżeli będziemy mieli timeout to również
handle error
czyli w tych trzech przypadkach chcemy wykonać sobie taką właśnie metodę.
Dlaczego robię bind this.
Otóż dlatego że jeżeli bym tego nie zrobił to tutaj w takiej metodzie handle error this nie kierowałoby
na nasz obiekt.
Czyli nie mógłbym powiedzieć np. this podkreślik xhr bo this skierowało by na obiekt do którego przypisaliśmy zdarzenie.
WIesz że jeżeli do diva przypiszemy zdarzenie kliknięcia to w funkcji która to obsługuje.
Po takim zdarzeniu kliknięcia this skieruje na diva więc this tutaj kierowało by na ten obiekt xhr a nie na
nasz utworzony obiekt nie na naszą instancje stąd właśnie bind this to również tłumaczyłem już w tym kursie
więc jak widzisz przypisujemy sobie pewne zdarzenia od razu w tym miejscu czyli na samym początku jak
tworzymy taki obiekt teraz zanim jeszcze zajmiemy się wysyłaniem naszego żądania to pokazałem ci również
że możemy przypisać własne nagłówki do takiego żądania zanim je wyślemy.
Więc jeżeli tutaj daliśmy taką możliwość.
Jeżeli ktoś sobie napisze headers to chcemy każdy z takich nagłówków przypisać metodą set request
header to będzie nazwa a to będzie wartość.
Przypomnij sobie tę metodę więc teraz chciałbym napisać sobie tutaj znowu po assign events.
Napiszemy assign user headers i zaraz ci pokaże o co chodzi.
Czyli znowu chcemy do tego obiektu przypisać sobie assign user headers czyli te nagłówki podane przez użytkownika
stąd taką metodę musimy sobie stworzyć ja to zrobię tutaj i jak będziemy to mogli zrobić.
Otóż jeżeli ktoś poda bo widzi że domyślnie w default config tego nie ma jeżeli ktoś poda headers.
Jeżeli tam coś będzie bo tutaj mamy headers puste jeżeli tam coś będzie to chcemy po prostu przejść przeiterować przez ten
obiekt i za pomocą metody set request headers wszystko dodać.
Czyli jest to generalnie zadanie bardzo łatwe natomiast pokażę ci teraz sztuczkę bo jak możemy sprawdzić czy
w takim obiekcie headers jak tutaj mamy cokolwiek się znajduje na tablicach mamy kropka length.
Jeżeli napiszemy a na obiektach nie mamy czegoś takiego no chyba że byśmy sobie w środku tutaj napisali
length prawda no to wtedy oczywiście będziemy do tego mieli dostęp.
Ale możemy to sprawdzić w inny sposób i zrobimy to tutaj if możemy się odwołać do object keys i podamy
tutaj this config.
Pamiętasz że config który zapisaliśmy sobie tutaj na samej górze to jest właśnie to co ktoś podał
czyli możemy sprawdzić czy w tym co ktoś podał w config w headers
zwrócimy z tego obiekt keys.
W zasadzie ja ci pokażę pod console log co to jest bo tak będzie najprościej pracować czyli console log
object keys chcemy wszystkie klucze obiektu które tutaj podamy zobaczymy w konsoli.
Mamy tutaj jakiś błąd w 64.
OK.
W ten sposob jak widzisz mamy klucz x my header czyli coś zostało podane.
Gdyby tutaj nic nie zostało podane albo nie mielibyśmy tego obiektu to on wiesz, że zostałby pusty bo tutaj
tak było to mielibyśmy tutaj pustą tablicę czyli z tego wynika tylko jedna rzecz że obiekt keys jeżeli
podano mu jakiś obiekt to zwraca nam tablicę z kluczami.
Czyli skoro jest to tablica to ma ona właściwość length.
Jeżeli coś tam będzie to możemy zapytać if object key length czyli jeżeli to nie będzie zero to znaczy
że ktoś coś tam podał i teraz będziemy chcieli już w bardzo prosty sposób przeiterować i mam nadzieję że
sprawa jest prosta czyli iterujemy po całym tym obiekcie który tutaj został przekazany i będziemy mieli key.
I tutaj będziemy mieli jakby tą wartość i to chcemy tutaj przypisać do xhr za pomocą metody którą ci
już pokazywałem set request header tutaj key.
Czyli np. tutaj mamy taki x my header a tutaj jego wartość czyli chcemy to przekazać w tym miejscu
this config dziwnie to dziwnie wygląda natomiast myślę że wiesz o co chodzi możesz sobie dokładnie to w konsoli wyświetlić
i teraz w naszym obiekcie.
Jeżeli ktoś podał takie headery to zostaną one przypisane a wywołaliśmy to właśnie metodą assign user headers.
Zauważ że do tej pory jeszcze nigdzie nie odwarliśmy sobie naszego requesta pokazywałem ci że odwołujemy się
do xhr kropka open i podajemy pod jaki adres chcemy go wysłać jeszcze nigdzie się do tego nie odwołaliśmy.
Jest ku temu powód o którym powiem trochę później ale teraz chcę właśnie stworzyć metodę która pozwoli
nam to zrobić czyli zanim wyślemy kiedy to wszystko sobie przepiszemy.
Chciałbym otworzyć xhr więc wiadomo mógłbym tutaj napisać xhr nasz obiekt i tutaj open.
No ale chcę to zrobić w osobnej metodzie więc nazwijmy ją sobie open czyli tu ją wywołuje i teraz musimy sobie ją stworzyć.
Może zróbmy to w tym miejscu i wewnątrz tej metody odwołamy się do this xhr open właśnie pamiętasz że
tutaj podajemy na przykład get ale skąd to get możemy wziąć.
Otóż mieliśmy to w configu czyli możemy się odwołać do this podkreślnik
config podkreślnik type.
Jeżeli ktoś to przekazał to mieliśmy tutaj przykład post jeżeli nie to będziemy mieli domyślnie get czyli
tutaj podstawiamy tutaj przecinek.
Natomiast żeby to było bardziej czytelne to w javascript białe znaki nie mają znaczenia czyli możemy to
oddzielić enterami w taki sposób to zróbmy tutaj a tu będziemy podawać kolejne parametry.
Drugi parametr jak pamiętasz jest to adres URL czyli w naszym przypadku będzie to zerknijmy sobie URL
czyli to co tutaj było podane OK.
Trzeci parametr to było async czy to jest true czy nie.
Jeżeli ktoś to zmieni to nie będzie true więc odwołujemy się do options async też żeby to było
zparametryzowane czyli this config
options async domyślnie jeżeli to nie było podane to zwróci nam true czyli wszystko jest OK.
I te trzy parametry wystarczą.
Ale skoro daliśmy możliwość też podawania username i password dałem specjalnie nullto również chcę je teraz
tutaj wrzucić.
Jeżeli nie będą podane no to nie ma żadnego znaczenia wyślemy żądanie tam będzie po prostu null czyli
tutaj options.
I tutaj password w ten sposób otworzymy nasze żądanie i moglibyśmy je już wysłać.
Natomiast chciałbym jeszcze timeout przypisać pozwoliliśmy tutaj podać timeout jeżeli ktoś by chciał
sobie go podać timeout przypisujemy bezpośrednio do obiektu czyli this xhr musi to być zrobione przed
wysłaniem timeout ustawmy na to co było przekazane również w configu
i w ten sposób tutaj ustawiamy zero domyślną wartość nie ma żadnego problemu.
Teraz w zasadzie moglibyśmy takie żądanie już wysłać jeżeli przejdziemy tutaj to po open mógłbym napisać
send i znowu mogę to zrobić na bezpośrednio na xhr send albo stwórzmy sobie metodę którą nazwiemy send no i teraz
ją będę chciał stworzyć np. tutaj i ona będzie bardzo prosta.
Na razie będzie robić tylko this xhr send czyli mógłbym to wywołać bezpośrednio ale zrobimy to teraz
tutaj natomiast będziemy chcieli móc przesyłać również dane więc na razie zobaczmy w jaki sposób to działa.
Teraz jeżeli ktoś sobie naszą funkcję wywoła w ten sposób nie musi być tego var a to podajemy to wszystko
i od razu jak widzisz przy inicjacji tego obiektu podajemy to czyli wpadamy jakby na samą górę w to
miejsce od razu to wszystko przepisujemy i wysyłamy.
Czyli jeśli w przeglądarce to od razu powinno to wszystko zostać wysłane.
Przejdźmy zatem do naszej funkcji handle response żeby sprawdzić czy ona się wykona.
Ona będzie się wykonywać za każdym razem jak będziemy zmieniać ready state
change czyli kilkukrotnie więc tutaj znowu powinniśmy sprawdzić tym ifem to co wcześniej czyli już mamy
cztery ja to szybko wpiszę.
Napisałem w ten sposób console log otrzymałem odpowiedź pamiętaj że w poprzednich przykładach pokazywałem
ci że this tutaj będzie kierować bezpośrednio na ten obiekt ale na xhr a tutaj kieruje na nasz obiekt
ajax właśnie z tego powodu że tutaj napisaliśmy bind OK teraz po odświeżeniu.
Mamy błąd zobaczmy i okazuje się że nie możemy wykorzystać metody send request header na naszym obiekcie.
Kiedy obiekt nie jest jeszcze otwarty zobaczmy w czym problem.
Otóż napisałem tutaj assign user header a dopiero potem otwarliśmy obiekt.
Czyli powinniśmy te dwa wywołania zamienić miejscami.
Zerknijmy teraz udało się wysłać zapytanie i otrzymano odpowiedź jak widzisz wszystko póki co działa jak należy.
Natomiast teraz będziemy musieli się skupić na tym jak zrobić abyśmy mogli wysyłać do serwera odpowiednie
dane bo ja tutaj wymyśliłem sobie bardzo fajny sposób.
Podobnie to działa że ktoś może podać dane jako obiekt natomiast jak jakie teraz zamienić na odpowiednie
dane w zależności czy to będzie post czy to będzie get. No i to będę chciał Ci pokazać w lekcji kolejnej.