AJAX (Asynchronous JavaScript and XML) to technika, dzięki której strona internetowa może rozmawiać z serwerem w tle i podmieniać tylko fragmenty widoku, bez przeładowywania całego dokumentu. Mówiąc po ludzku: klikasz „Lubię to”, licznik skacze o jeden, a Ty nie patrzysz przez sekundę na biały ekran ładowania. Cała magia polega na tym, że JavaScript wysyła żądanie do serwera, czeka na odpowiedź asynchronicznie (czyli nie blokując reszty strony), a potem aktualizuje DOM.
Mimo „XML” w nazwie dziś prawie nikt nie przesyła XML-a — standardem stał się JSON, bo jest lżejszy i natywny dla JavaScriptu. Nazwa została z 2005 roku, kiedy Jesse James Garrett ukuł termin „AJAX”, a Google pokazało, co potrafi, w Gmailu i Google Maps (przesuwasz mapę, kafelki dociągają się same). To był moment, w którym strony przestały być statycznymi dokumentami, a zaczęły przypominać aplikacje.
Jak to działa w praktyce
Historycznie AJAX opierał się na obiekcie XMLHttpRequest (w skrócie XHR). Dziś w nowoczesnym kodzie używasz raczej fetch(), które robi to samo, tylko czytelniej i zwraca Promise. Typowy scenariusz: chcesz pobrać listę użytkowników z API bez odświeżania strony.
Wygląda to mniej więcej tak:
fetch('/api/users')wysyła żądanie GET do serwera,.then(res => res.json())parsuje odpowiedź jako JSON,.then(data => renderUsers(data))wrzuca dane do widoku.
Z async/await jest jeszcze czyściej: const res = await fetch('/api/users'), a potem const data = await res.json(). Pod spodem to wciąż AJAX — asynchroniczne pobieranie danych, które aktualizuje kawałek strony.
Na co uważać
Pierwsza pułapka to CORS (Cross-Origin Resource Sharing). Jeśli odpytujesz API z innej domeny niż Twoja strona, przeglądarka zablokuje żądanie, dopóki serwer nie odeśle odpowiednich nagłówków. To nie błąd w Twoim kodzie — to celowa zasada bezpieczeństwa, choć potrafi doprowadzić juniora do łez o północy.
Druga rzecz: fetch() nie rzuca wyjątkiem przy błędach HTTP typu 404 czy 500. Promise się spełni, a Ty dostaniesz odpowiedź z res.ok === false — sprawdzaj to ręcznie. Pamiętaj też o obsłudze stanu ładowania i błędów sieci, bo użytkownik na słabym wifi nie powinien patrzeć na zawieszony przycisk. I drobiazg z UX: skoro nie przeładowujesz strony, zadbaj o widoczny komunikat, że coś się dzieje.
Pojęcia powiązane: fetch i XMLHttpRequest, JSON, REST API, Promise, async/await, DOM, CORS, oraz nowocześniejszy kuzyn AJAX-a — biblioteka axios.