JavaScript: Czym jest AJAX?
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.
Wiesz już w jaki sposób działa protokół HTTP i teraz odpowiemy sobie na pytanie czym jest Ajax.
Ajax jest to skrót od Asynchronous JavaScript and XML natomiast niech to XML w żaden sposób Cię nie zmyli.
To jest taka nazwa z zamierzchłych czasów ale również dlatego że możemy poprzez Ajax przesyłać dokumenty
XML.
Ale prawda jest taka że prawie wszystko możemy za pomocą Ajax przesyłać więc tutaj ta nazwa XML nie
ma większego znaczenia.
Ajax sam w sobie nie jest częścią języka JavaScript w specyfikacji więc jeżeli oglądałeś mój kurs od podstaw
to tam wyraźnie oddzielałem sam język Javascript od tego co możemy robić w przeglądarce i Ajax jest właśnie
częścią przeglądarki i w przeglądarce jest dla nas dostępny jako specjalny obiekt który możemy utworzyć
i on zawiera metody które pozwalają nam wysyłać i odbierać żądania i odpowiedzi HTTP na końcu postawiłem
trzy kropki dlatego że pozwala nam wysyłać i odbierać żądania i odpowiedzi HTTP asynchronicznie.
No właśnie i co to oznacza że Ajax jest asynchroniczny.
Oznacza to tylko tyle że możemy wysłać jakieś zapytanie do serwera i możemy przypisać funkcję czyli
tak jak w przypadku zdarzeń która się wykona kiedy otrzymamy odpowiedź.
I działa to w ten sposób że w tym czasie możemy dowolny kod na stronie wykonywać JavaScript i nie będzie
to blokowało interfejsu użytkownika czy jakiejś funkcji.
Czyli wysyłamy zapytanie do serwera i mówimy kiedy otrzymamy odpowiedź to wykonaj tę funkcję a w tym
czasie JavaScript może robić różne inne rzeczy.
Jest to podobne np. do zdarzenia on click w przeglądarce bo również np. do elementu div przypisujemy zdarzenie
on click.
Jak wiesz funkcja się nie wykonuje ona się wykona dopiero w momencie kiedy rzeczywiście klikamy na ten
element.
Tak samo jest w przypadku Ajax wysyłamy żądanie i mówimy dopiero kiedy otrzymasz odpowiedź to wykonaj
tę funkcję.
Czyli jest to asynchroniczne.
Teraz jakie są zalety technologii AJAX która tak naprawdę wybuchła w 2006 roku chociaż już wcześniej
była dostępna ale od tamtej pory mówimy o takim boomie Ajaxowym bo zaczęto od wtedy na poważnie traktować
język Javascript.
Z tego powodu że mogliśmy tworzyć już bardzo zaawansowane aplikacje internetowe a więc zaletami Ajax
niewątpliwie jest fakt że przesuwamy wyłącznie niezbędne dane a nie cały dokument HTML.
Czyli nie przeładowujemy strony mamy wczytaną jakąś stronę na przykład eduweb.pl i mamy na niej taki przycisk jak KUPUJĘ tak
na stronie kursu.
I teraz co by się stało normalnie.
Otóż wcisnęlibyśmy ten przycisk kupuję cała strona zostałaby przeładowana i do serwera wysłalibyśmy dane o tym co
kupiliśmy serwer następnie odesłałby nam całą stronę dokładnie w taki sam sposób.
Z tą tylko różnicą że mielibyśmy zaktualizowaną ikonkę koszyka co możesz tutaj zobaczyć teraz za pomocą
Ajax a możemy po wciśnięciu takiego przycisku Kupuję nie przeładowywać strony ale wysłać do serwera informację
co podaliśmy do koszyka jeżeli wszystko będzie OK z serwera możemy odesłać informację że to zostało
dodane do koszyka i kiedy ona zostanie odesłana to jak wspominałem wykona się jakaś funkcja JavaScript
którą wskażemy i my w tej funkcji możemy sobie znaleźć jakiś element div na przykład ten koszyk i
dodać do niego jedyneczkę oznaczającą że podaliśmy jeden produkt do koszyka.
Jak widzisz bardzo wiele tutaj czasu i pasma internetowego również internetowego zaoszczędzimy bo nie przeładowywaliśmy
całej strony tylko po to aby taką małą jedyneczkę dodać w jednym miejscu naszej strony.
Kolejna zaleta jest taka że możemy wyczytać dane wyłącznie wtedy gdy są potrzebne.
Czyli możemy wyczytać jakąś stronę i nie będzie na niej wszystkich danych możemy mieć tam jakieś zakładki.
Jeżeli nikt nie odwiedzi tych zakładek to nigdy tych danych nie będziemy pobierać.
Ale jeżeli ktoś kliknie jakąś drugą zakładkę to możemy wysłać zapytanie do serwera otrzymać te dane
i wstawić je na stronę za pomocą JavaScript.
Dzięki temu będą one wyświetlane tak naprawdę tylko wtedy gdy są potrzebne.
Konsekwencją działania Ajax tak naprawdę jest fakt że serwer od tej pory może być odpowiedzialny wyłącznie
za serwowane dodawanie i aktualizowane danych które możemy przesyłać między serwerem a przeglądarką
jako format np. json
A cały interfejs możemy wygenerować po stronie klienta.
Jest to koncepcja już nieco bardziej zaawansowana.
Ja to bardzo dokładnie omawiam w jednym z kursów na eduweb.pl.
Nowoczesne aplikacje webowe z backbone js natomiast jest to już pozycja bardziej dla zaawansowanych programistów
Java Script.
Natomiast pomyśl jak działają dzisiaj systemy CMS takie jak Word Press czy Jumla
Jeżeli odwiedzamy jakąś stronę to z bazy danych pobierane są np. jakieś posty jakieś wpisy i one później
w szablonie są łączone z kodem HTML czyli tekst jakiegoś artykułu jest wstawiany w jakiegoś diva itd
itd.
I to jako kod HTML jest odsyłane do przeglądarki i przeglądarka to wyświetla natomiast za pomocą Ajax
moglibyśmy tak naprawdę wysyłać dane do serwera tam je zapisywać i z serwera je otrzymywać bez łączenia
tego wszystkiego z kodem HTML po stronie serwera czyli serwer mógłby nam np. przysłać taki post czyli
dodany jakiś wpis na naszym blogu jako po prostu json bez żadnych paragrafów czy divów a my byśmy
w JavaScript mogli sobie utworzyć te elementy wstawić do nich odpowiednie dane i wyświetlić to na stronie
tak dzisiaj działa bardzo wiele nowoczesnych aplikacji internetowych.
Teraz chciałbym jeszcze abyśmy zerknęli na przykład dlatego wcześniej omawiałem z tobą protokołu HTTP żebyś
zrozumiał również Ajax który opiera się właśnie na HTTP a więc mamy przeglądarkę mamy serwer i możemy
bez przeładowywania witryny wysłać do serwera jakieś żądanie.
I wyobraź sobie że wypełniliśmy formularz na stronie kliknęliśmy wyślij i mieliśmy obsłużone to za pomocą
JavaScript więc Ajaxem sobie wyślemy żądanie post do naszego serwera i z tym żądaniem prześlemy
name Piotr oraz e-mail Piotr chcemy aby serwer dokonał walidacji e-mail jest niepoprawny więc serwer
może nam odesłać informację w odpowiedzi w której znajdzie się taki oto json succes false i np. error
niepoprawny adres e-mail pokazywałem ci już w rozdziale o json że taki tekst czyli json który serwer nam obleśne możemy
za pomocą json parse zamienić na obiekt i wtedy po stronie klienta będziemy mogli sprawdzić czy w tym obiekcie success
równa się true.
Jeżeli nie to znaczy że był jakiś błąd.
No i do tego obiektu będziemy się mogli jakoś odwołać kropka error i przeczytać sobie nie poprawny adres e-mail
i wstawić to na stronie.
Normalnie gdybyśmy wysłali taki formularz to znowu cała strona byłaby przeładowywana tylko po to aby
wyświetlić jeden błąd.
A tak serwer po prostu odeśle nam json.
Jeżeli tak sobie go skonfigurujemy bo to wszystko nie dzieje się w jakiś magiczny sposób to może być
json wcale nie musi.
Jeżeli serwer taki json nam odeśle bo tak sobie to skonfigurujemy po stronie serwera to będzie oznaczać że mamy
niepoprawny na przykład adres e-mail i zaktualizuje naszą stronę pokazując taki błąd.
Jeżeli jednak uzupełnimy poprawnie formularz i prześlemy jeszcze raz żądanie do serwera i serwerowi
uda się taki e-mail wysłać czy na przykład zarejestrować nowego użytkownika to odeśle nam inną odpowiedź
gdzie success może być true.
I wtedy na naszej stronie wyświetlimy dla użytkownika komunikat że udało się poprawnie wysłać takie żądanie
czy np. wiadomość e-mail.