JavaScript: Wysyłanie danych
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.
Teraz pokażę ci jak możemy do serwera za pomocą Ajaxa wysyłać dane razem z żądaniem a więc korzystamy
tutaj z żądania typu POST abyś wszystko mógł dobrze zrozumieć.
Pokażę ci najpierw formularz który się tutaj znajduje i na razie nie będzie to Ajax jest to normalny
formularz który możemy w HTMLu wstawić sobie w taki oto sposób czyli form.
Następnie mamy pola i mamy tutaj name to jest bardzo ważne.
I tutaj name last name.
No i przycisk wyślij.
Co jest bardzo ważne mamy tutaj metodę post na takim formularzu dodaną przez atrybut.
Mamy tutaj action czyli gdzie ma ten formularz być wysłany na odbierz php czyli w tym samym katalogu
mamy teraz odbiesz PHP taki oto plik.
Jeżeli nie jesteś zaznajomiony z językiem PHP to w ogóle się nie przejmuj natomiast jeżeli taki znacznik
utworzymy to tutaj możemy wpisać kod PHP.
I teraz co jest ważne to odbierz php będzie znajdował się pod adresem tak jak mamy tutaj localhost
ukośnik Ajax ukośnik odbierz php i php działa w ten sposób że jeżeli tutaj do serwera wyślemy zapytanie
pod właśnie odbierz PHP w ten sposób to nie zostanie nam zwrócony plik PHP czyli jakby treść tego pliku
która tutaj jest.
Tak byłoby w HTMLu ale serwer wykonuje kod który jest w pliku i to nam dopiero zwraca.
Tak działa interpreter PHP.
Jeżeli teraz tutaj przejdę nie ma błędu ale również nic się nie pokazało bo nic w tym pliku nie zrobiłem
jeszcze w PHP natomiast ważne jest to że w PHP moglibyśmy np. zamknąć ten znacznik.
Tutaj robimy coś w PHP a to co wpisze tutaj tutaj oczywiście pojawiłby się jakiś błąd.
Ale mogę tutaj robić różne rzeczy a to co wypisuje tutaj to jest już zwykły tekst czyli to zostanie wycięte
albo jakiś kod PHP zostanie wykonany podobnie jak np. mamy w JavaScript a to zostanie zwrócone.
Więc tutaj może być normalny HTML jeżeli teraz tutaj odświeżymy.
Jak widzisz to jest zwracane.
Natomiast jeżeli nie domknę tego znacznika to jesteśmy cały czas w kodzie PHP.
I teraz co jest bardzo ważne.
Na razie nie mamy jeszcze Ajaxa jeżeli tutaj wcisnę Wyślij to te dane które będą tutaj wpisane zostaną
przesłane metodą post przez przeglądarkę pod adres odbierz PHP więc tutaj będziemy mogli na nie zareagować.
Natomiast co się stanie chciałbym Ci to pokazać.
Wpiszmy sobie jakieś dane np. Piotr Kowalski wciskam wyślij i przeszliśmy do odbierz php.
Wydawałoby się że nic się nie stało natomiast te dane zostały tam przesłane i strona została przeładowana.
Tak domyślnie to działa w przeglądarce i teraz chce Ci pokazać że te dane możemy odebrać w języku PHP.
Mamy taką tablicę super globalną która się nazywa post i w niej możemy odczytywać to co tam zostało
przesłane.
Jeżeli tutaj mieliśmy first name i last named to to zostanie odpowiednio zamienione zaraz ci pokażę jak to wygląda
i moglibyśmy tutaj napisać first name i w ten sposób odczytać first name.
Natomiast całą taką tablicę również możemy wyświetlić za pomocą specjalnej funkcji Print R.
W ten sposób zobaczymy co w niej jest.
I teraz żebyś dobrze zrozumiał przesyłamy tutaj po wciśnięciu wyślij dane metodą post a więc pod adres
odbierz PHP a więc tutaj mamy je w takiej tablicy post.
Natomiast metoda Print r ją wyświetla i tak jak ci wspomniałem.
Jeżeli z tego PHP coś wyświetlimy albo na przykład domknę taki znacznik i coś wpisze to to jest odsyłane do przeglądarki.
Czyli jeżeli skorzystam z Print R to to zostanie wyświetlone w przeglądarce.
No i zobaczmy aby mieć pewność że to co mówię jest prawdą Jan Kowalski wyślij.
I jak widzisz mamy array.
Jan Kowalski last name Kowalski gdybyśmy zajrzęli do kodu który został nam odesłany tak to wygląda.
Czyli funkcja Print r języka PHP przyjmuje tablicę i tę tablicę może wyświetlić w taki oto sposób czyli
to co tam przesyłają rzeczywiście tam jest i możemy z tego skorzystać.
Ale jak widzisz cała strona została przeładowana zerknijmy czy możemy tutaj zobaczyć jak wyglądały zapytania
jak wyglądało żądanie wysłane do serwera.
Być może nam się to odświeży w ten sposób że nie będziemy mogli tego zobaczyć zerknijmy mamy odbierz php.
Widzimy tylko tutaj co przeglądarka wysłała w request headers.
Jak widzisz na samym dole rzeczywiście jest form Data czyli to przeglądarka metodą post co możemy sprawdzić
tutaj request headers troszkę wyżej tu będzie metoda post status 200 OK.
Pod ten adres wysłała nam.
Jak widzisz te nagłówki oraz dane które są na samym dole jako form data natomiast możemy zobaczyć jak
to wygląda normalnie.
I o to właśnie nam chodzi first name równa się Jan and last name równa się Kowalski czyli taki tekst został wysłany
do serwera czyli naszym Ajaksem możemy taki oto tekst wysłać.
Natomiast tutaj przeglądarka zrobiła to zupełnie za nas czyli kiedy mamy taki formularz klikamy Wyślij
to te dane.
I tutaj to co wpisałem oraz last name zostają w taki oto sposób zapisane i przesłane do serwera.
Jeżeli będziemy robić to Ajaksem to będziemy musieli to zrobić ręcznie zaraz ci pokażę.
Natomiast serwer jak widzisz.
Tak jak wspominałem zrobił Print r a więc te dane odesłał razem z nagłówkami na temat tych danych które
będą w Response czyli tutaj np. content type text html czy np. możemy zobaczyć content length 60 bajtów.
Tak to wygląda.
Okej mam nadzieję że zrozumiałeś.
I teraz chciałbym ominąć ten formularz i wysłać jakieś inne dane do serwera niekoniecznie z tego formularza.
Ale jeszcze w tym kursie pokażę ci jak formularze takie dane zebrać.
Czyli teraz jeżeli Ajaksem sobie wyślemy post pod ten adres to znowu wyświetli nam to co tam przesłaliśmy.
i o to mi właśnie chodzi.
Teraz jak możemy to zrobić Ajaksem a nie za pomocą tego formularza.
Otóż znowu utworzyłem sobie nowy obiekt xhr i będziemy chcieli go odtworzyć metodą Open będzie tym
razem post.
Następnie adres czyli odbierz PHP tutaj true.
Czyli chcemy aby to było asynchroniczne i teraz będziemy chcieli znowu ustawić sobie on Register Change.
Ja to szybko tutaj wpisze a więc w ten sposób jeżeli będziemy mieli readystate 4 i status 200 tak jak
w tamtej lekcji w poprzedniej to będziemy chcieli to co serwer wyświetlić.
Przypominam że serwer właśnie odeśle nam to co zwróci tutaj Print r.
Czyli tak jak przed momentem pokazałem widziałeś jak to wygląda taka tablica to będziemy chcieli wyświetlić
natomiast teraz te dane będziemy musieli tam wysłać.
Ja pokazałem ci że takie dane może nam się to uda zobaczyć tutaj raz jeszcze spróbujemy to wysłać że takie
dane.
Jeśli jeśli zobaczymy jak to wygląda jakby czysto wygląda w ten sposób więc spróbujmy sobie to wysłać.
Na razie nie martwiąc się jak możemy te dane skądś wziąć z formularza i tak dalej chcemy wysłać po prostu
Ajax więc odwołamy się do xhr send no właśnie i czy teraz wyślemy taki string.
Możemy spróbować bo mówiłem ci że w przypadku get tutaj przekazaliśmy null albo nic nie przekazujemy a w
przypadku post chcemy przesłać jakieś dane więc możemy je zapisać w ten sposób.
Okay możemy sprawdzić zobaczymy czy nam to zadziała.
Przejdźmy tutaj z powrotem i nie wysyłamy tego formularza więc może to odświeżę ale w konsoli automatycznie
zostało to dla nas wysłane.
No i serwer jak widzisz zwrócił nam pustą tablicę.
A to oznacza tylko tyle że serwer tutaj nie potrafił sobie z tego post.
Tak jak w przypadku wysłania formularza przecież dokładnie to samo zostało wysłane first name itd.
Jak widziałeś ja to skopiowałem.
Teraz wysłałem dokładnie to samo a serwer nie potrafił sobie z tym poradzić.
Zerknijmy co wysłaliśmy w odbierz PHP.
Jak widzisz jest to dokładnie to samo czyli first name Jan last name Kowalski to dlaczego to nie działa.
Otóż zerknijmy sobie do Request Headers do tego co wysłaliśmy.
Nie ma tutaj jednego bardzo ważnego nagłówka który chce ci teraz pokazać kiedy wysłaliśmy to za pomocą
formularza to taki nagłówek tam się pojawia.
Może spróbujmy raz jeszcze wyślij zobaczmy sobie w request headers.
Przeglądarka wysłała.
No i jak widzisz mamy tutaj bardzo ważny nagłówek content type Application ukośnik.
x www form URL encoded.
Czyli to co przesłaliśmy tutaj to jest URL coded tak właśnie zakodowane jak w adresie URL bo to też możemy przekazywać
w adresie tutaj np. w Get.
W ten sposób na pewno nie raz widziałeś strony które mają takie dziwne adresy więc tego nagłówka nam
brakuje.
I teraz wysyłając takie żądanie będziemy musieli sami zadbać o to aby taki nagłówek dodać.
No i okazuje się że obiekt xhr ma metodę pozwalającą dodawać nam nagłówki nagłówki już na tym etapie na
pewno świetnie rozumiesz co to jest.
To są wszystkie te nagłówki czyli request headers możemy dodawać.
Metoda ta nazywa się set request header
i ona tutaj przyjmuje jakby nazwę tego nagłówka i jego wartość czyli chcemy ustawić nagłówek taki jak
content type tutaj to są nagłówki request czyli wysyłane z żądaniem do serwera na nie mamy wpływ ustawmy
sobie to na URL encoded.
W ten oto sposób i zobaczmy czy teraz po wysłaniu czegoś takiego serwer będzie wiedział na czym sprawa
polega.
Serwer tutaj działa jako Apache i PHP i właśnie on oczekuje że taki nagłówek tam się znajdzie kiedy przesyłamy coś
takiego i on wtedy wie jak może sobie to rozstrzygać i stworzyć z tego tablicę.
Przejdźmy teraz tutaj przejdźmy do konsoli odświeżmy.
Jak widzisz teraz wszystko działa czyli Print r w języku PHP odczytało sobie tablicę post i poprawnie wyłuskało
z niej dane.
Czyli taka metoda jak set request header niezwykle nam pomogła.
I teraz co jest ważne.
Większość nagłówków będziesz mógł ustawiać.
Natomiast są takie nagłówki które przeglądarka ustawia za nas kiedy wysyłamy jakieś żądanie.
Zauważ że ustawiliśmy tylko jeden nagłówek a przeglądarka ustawiła ich tutaj w request header dużo więcej i część z
nich są zakazane nie możemy ich ustawiać na przykład jak content length to jest długość jakby w bajtach
danych które przesyłamy i tego nie możemy ustawić bo moglibyśmy oszukać serwer wysyłając małe ilości
danych albo duże ilości danych a pisząc że jest ich dużo mniej czyli pewnych rzeczy przeglądarka nie
pozwala nam ustawiać pewnych nagłówków a niektóre z nich możemy ustawić listę tych nagłówków które można
ustawiać ja zalinkuję również w PDF w sekcji gdzie będziesz miał opisane metody i właściwości obiektu XML
http request.
Na koniec chce pokazać jeszcze jedną bardzo ciekawą rzecz otóż możemy w przeglądarce utworzyć sobie
taki obiekt który nazywa się form data nazwę go data.
I znowu new form data mamy taki konstruktor i to jest dla nas bardzo przydatne.
Z tego powodu że nie będziemy musieli kombinować jak stworzyć taki string first name równa się last name end itd
tylko będziemy mogli do tego obiektu form data dodawać sobie odpowiednie dane więc zanim to wszystko
wyślemy odwołamy się do data i również ja ci napiszę w PDFie jak ten obiekt działa ale możesz w internecie
go wyszukać najlepiej na stronie Mozilla Developer Network on ma po prostu kilka metod na swoim prototypie
do których można się potem odwołać.
I ma taką metodę jak append która pozwala nam dodawać odpowiednie dane również przyjmuje ona tak
jak tutaj dwa parametry.
Możemy sobie napisać append first name.
I tutaj napiszemy sobie Jan mogę to skopiować i napiszemy sobie last name Kowalski i teraz ten obiekt ma jeszcze
inne metody jak wspominałem na przykład możemy usunąć jakieś dane które już dodaliśmy itd.
Ale najważniejsze jest append zostało to tutaj dodane i teraz możemy to tutaj przesłać nie jako string ale
jako właśnie ten obiekt data czyli metoda send nie przyjmuje tylko stringu ale przyjmuje jeszcze kilka
innych obiektów dostępnych w javascript szczególnie w przeglądarce co jest jeszcze ważne w przypadku form
data to tutaj nie musi być string to możemy przesyłać np. pliki wybrane przez użytkownika co pokazuje
w jednym z kursów na eduweb pl html5 i JavaScript techniki zaawansowane więc jakieś zdjęcia również możemy na serwer
przesłać.
Plus jest taki że nie musimy konstruować tego stringu który widziałeś ale taki obiekt do którego to podawaliśmy
wysyłamy i zerknijmy czy nam to zadziała odświeżam tutaj form data tutaj źle wpisałem.
Tutaj musi być jeszcze m ok odświeżam.
No i jak widzisz teoretycznie działa ale metoda z kolei Print R z PHP zwróciła nam coś takiego dziwnego.
Z tego powodu że jeżeli używamy form data to nie musimy ustawiać a nawet nie powinniśmy tego nagłówka
o którym ci mówiłem.
Dlatego korzystanie z form data jest takie wygodne bo możemy to łatwo dodawać różne dane i ten nagłówek
nas nie interesuje.
Jeżeli teraz odświeżę to wszystko ponownie gra jak widzisz tak to wygląda.
A przeglądarka wysłała tutaj w request headers coś takiego jak content.
Jak widzisz tutaj mamy multi part form data boundry czyli jakby granica.
Taki dziwny String i ten sam String można znaleźć w Request payload czyli w danych które wysyłamy.
Dzięki temu serwer wie gdzie może te dane rozdzielić.
Jak widzisz różne tutaj informacje są to zajmuje trochę więcej bajtów niż te czyste dane które wysłaliśmy
ale dla nas jest wygodniejsze a i serwer potrafi to poprawnie odczytać.