Komunikacja asynchroniczna (AJAX / fetch)

1. Co to jest komunikacja asynchroniczna? - Definicja w kontekście UI/UX
2. Jak to działa? - Mechanizm fetch/AJAX: request → response → aktualizacja DOM
3. Kiedy używać? - Wyszukiwarka, dynamiczne listy, walidacja, autozapis
4. Na co uważać? - Obsługa błędów, CORS, status codes
5. Jak robić dobrze? - Best practices: loading state, error handling, UX

1. Synchronicznie vs Asynchronicznie

   • Synchronicznie: kliknij → czekaj na przeładowanie → zobacz wynik
   • Asynchronicznie: kliknij → aplikacja działa dalej → wynik pojawia się w tle
   • Analogia: telefon (synchroniczny) vs SMS (asynchroniczny)

2. Fetch API - podstawy

   • fetch(url) - wysyła request GET
   • fetch(url, {method: 'POST', body: ...}) - wysyła POST
   • Zwraca Promise - trzeba użyć .then() lub async/await
   • Odpowiedź trzeba przetworzyć: response.json()

3. Request i Response

   • Request: metoda (GET/POST), URL, nagłówki, body
   • Response: status code (200, 404, 500), nagłówki, body (JSON)
   • Sprawdzenie czy request się udał: response.ok

4. Obsługa błędów

   • Sieć: try/catch lub .catch()
   • HTTP: sprawdzenie response.status
   • UI: pokazanie komunikatu użytkownikowi

5. Typowe zastosowania

   • Dynamiczne wyszukiwanie (search as you type)
   • Odświeżanie listy bez przeładowania
   • Walidacja dostępności (np. czy username jest wolny)
   • Autozapis formularza

1. Slajd tytułowy - Tytuł, autorzy, data
2. Agenda - Plan prezentacji
3. Problem - Dlaczego przeładowanie strony jest złe dla UX?
4. Synchronicznie vs Asynchronicznie - Definicje i porównanie
5. Fetch API - podstawy - Składnia, Promise
6. Schemat przepływu - Strona → fetch → PHP → JSON → DOM
7. Przykład kodu fetch - GET z parsowaniem JSON
8. Obsługa błędów - try/catch, response.ok
9. Endpoint PHP - Minimalny przykład zwracający JSON
10. Zastosowania - Wyszukiwarka, lista, autozapis
11. Status codes - 200, 404, 500 - co znaczą
12. Podsumowanie i źródła

Użytkownik wpisuje w pole szukania “Jan”. Po każdej literce (z debounce 300ms) fetch wysyła request:

GET /api/search?q=J
GET /api/search?q=Ja
GET /api/search?q=Jan

Wyniki pojawiają się na bieżąco, bez przeładowania strony. Użytkownik widzi podpowiedzi w czasie rzeczywistym.

Przy rejestracji użytkownik wpisuje “jan_kowalski”. Fetch wysyła request do /api/check-username?name=jan_kowalski. Serwer zwraca {available: false}. UI pokazuje komunikat “Ta nazwa jest zajęta” jeszcze przed wysłaniem formularza.

Użytkownik klika “Dodaj zadanie”. Fetch wysyła POST z danymi zadania. Serwer zapisuje i zwraca nowe zadanie z ID. JavaScript dodaje element do listy na stronie. Nie ma przeładowania - lista aktualizuje się dynamicznie.