JavaScript 26.11

AJAX i fetch API

AJAX (Asynchronous JavaScript and XML)

AJAX to technika programowania webowego, która umożliwia komunikację z serwerem w tle, bez konieczności przeładowywania całej strony. Mimo nazwy zawierającej "XML", AJAX może przesyłać dane w różnych formatach (JSON, XML, tekst, HTML).

Charakterystyka AJAX:

• Opiera się na callbackach (funkcjach zwrotnych)
• Wymaga ręcznej obsługi stanów zapytania
• Bardziej skomplikowana składnia
• Starszy standard, ale wciąż szeroko wspierany
• Trudniejsza obsługa błędów

Fetch API

Fetch API to nowoczesny interfejs do wykonywania zapytań HTTP, wprowadzony jako następca XMLHttpRequest. Bazuje na Promises (obietnicach), co czyni kod bardziej czytelnym i łatwiejszym w zarządzaniu.

Charakterystyka Fetch API:

• Opiera się na Promises
• Czystsza i prostsza składnia
• Lepsze wsparcie dla async/await
• Nowoczesny standard
• Nie obsługuje automatycznie błędów HTTP (kody 404, 500 nie odrzucają Promise)

AJAX (XMLHttpRequest):

• Starsza technologia oparta na callbackach
• Bardziej złożona składnia wymagająca ręcznej obsługi stanów
• Wymaga więcej kodu do obsługi błędów
• Automatycznie odrzuca zapytania z błędami HTTP
• Obsługuje monitoring postępu przesyłania (progress events)

Fetch API:

• Nowoczesne rozwiązanie oparte na Promises
• Prostsza, bardziej intuicyjna składnia
• Doskonale współpracuje z async/await
• Wymaga ręcznej weryfikacji statusu HTTP (response.ok)
• Domyślnie nie wysyła cookies (wymaga opcji credentials)
• Nie obsługuje natywnie monitoringu postępu
• Jeśli nie ma internetu, zasobu to się wywraca 404, błędy z 5 na początku błędy servera

Kluczowe różnice

Kiedy którego używać?

Użyj Fetch API gdy:

• Tworzysz nowy projekt
• Chcesz czystszy, bardziej nowoczesny kod
• Planujesz używać async/await
• Nie potrzebujesz wsparcia dla starszych przeglądarek (IE11 bez polyfill)
• Nie wymaga się monitoring postępu przesyłania

Użyj AJAX (XMLHttpRequest) gdy:

• Musisz wspierać bardzo stare przeglądarki
• Potrzebujesz monitorować postęp przesyłania plików
• Pracujesz ze starszym kodem, który już używa XMLHttpRequest
• Chcesz automatycznej obsługi błędów HTTP

Pliki ładowane lokalnie

Fetch API ma w sobie funkcje blokującą ładowanie plików lokalnych nawet z lokalnego serwera. Przeglądarki Chrome np. nie lubią tego. Rozwiązaniem jest aby używać osobnego serwera http do podawania plików

1. inline - zawsze dział, jak jest mało danych, takie które mogą być załadowane lokalne np. przez tablicę obiektów
2. Fetch z lokalnego pliku działa zawsze ale w sytuacji gdy uruchamiamy plik przez server - live server czy jak mamy stronę na serverze. Np plik konfiguracyjne do zczytania a plik ma byc dostepny razem z aplikacją to można to zrobić w ten sposób
3. File Reader API użytkownik wybiera plik, tworzymy obiekt, który faktycznie potrafi obsługiwać pliki

Podstawy REST API

Metody HTTP definiują rodzaj operacji jaką chcemy wykonać na zasobie. Konwencja rest api jest zbudowana na crud create read update delete

get do czytania, czytania szczegółów

post do tego żeby stworzyć nowy zasób na serverze, wrzucamy jakieś dane a server automatycznie generuje id, zwraca utworzony obiekt;

put do aktualizacji zasobu za pomocą fetch api, cały obiekt się aktualizuje

patch częściowa aktualizacja zasobu

delete usuwanie zasobu, wymaga tylko delete

Uwierzytelnienie w API i bezpieczeństwo

Klucze - unikalne identyfikatory, ciągi znaków które są przypisane do aplikacji/użytkownika i potwierdzają uprawnienia do korzystania z danego zasobu. Większość wymaga rejestracji i uzyskania klucz np. google maps, open weather pokazujące pogodę.

Użycie klucza wewnątrz zapytania - widać je np. w url, zapisuje sie do cache przeglądarki itd

użycie klucza w nagłówkach jest lepsze bo nie widać go w url, ale dalej działa tak samo, potrzeba https aby nikt klucza nie podsłuchał

authorization wykorzystuje dedykowaną metode nagłówek authorization - nie loguje, wysyłane są z automatu, najlepsze rozwiązanie. Ma on swój template Authorization:<type><credentials>

Popularne typy:

basic użytkownik hasło legacy niebezpieczne bez https

bearer token (najpopularniejszy dla JWTs(ciąg znaków zakodowany za pomocą base64 ale nie jest zaszyfrowany) i OAuth) np. konto google do logowania w różnych serwisach

ApiKey Api key

Digest hash-based authentication

HTTPS obowiązkowy dla bezpieczeństwa

Jeśli tworzymy klucze i tokeny ich czasy użycia powinny być względnie krótkie

Jeśli klucz API jest ciągle taki sam, warto go zrotować, tak żeby zmniejszyć ryzyko jego wykorzystania przez osoby trzecie

Zawsze sprawdzać dane uwierzytelniające, zapytać serwera czy dane są właściwe, czy token np. nie został odwołany, czy klucz wyexpiorwał itp

Principle of least authority PoLA minimalne uprawnienia, ma mieć tylko takie uprawnienia jakie musi mieć

Canvas

Element dostępny w HTML5, który tworzy obrazek, umożliwia rysowanie 2d grafiki przez JS, operuje na bitmapie - rysuje pixele. Te narysowane obiekty nie są obiektami DOM, to jest po prostu obrazek. Można wyczyścić i narysować od nowa. Jesteśmy w stanie wchodzić z canvasem w interakcje - clik, move. Daje to możliwość tworzenia gier. Podstawowy canvas definiujemy w html w body tworząc tag <canvas id width height></canvas>. Potem w script wołamy const canvas = document.getElementById('myCanvas')

const ctx = canvas.getContext('2d'); <- musimy to dać, to bardzo ważne.

Canvas ma współrzędne 0,0 tak się zaczyna i to jest lewy górny róg, x rośnie w prawo a y rośnie w dół

Canvas nie dziedziczy stylów css

Metody

translate - używamy przed rysowaniem, przesuwa cały obszar, nie musimy cały czas kalkulować pozycji, transformacje działają kumulacyjnie, jeśli damy translate translate to przesuwa o kolejne 100 i 50 px względem pierwszego translate

rotate - obraca naszą figurę, układ współrzędnych o konkretny kąt

scale - np 2:1 dla podwojenia szerokości

restore

requestAnimationFrame() metoda pozwalająca na tworzenie animacji za pomocą eventu, sposób w którym przeglądarka wie, że ma zbudować kolejną klatkę i pokazać ja po określonym czasie, oprócz pierwszej klatki tworzy się kolejna pokazywana po czasie