AJAX - co to jest AJAX i jak działa?

AJAX to skrót od Asynchronous JavaScript and XML, czyli asynchroniczny JavaScript i XML. Jest to technologia umożliwiająca dynamiczne ładowanie danych na stronie internetowej bez potrzeby przeładowywania całej strony. Dzięki temu użytkownik może korzystać z interaktywnej aplikacji internetowej bez przerw w działaniu i bez czekania na załadowanie całej strony. Jest to połączenie kilku technologii, takich jak JavaScript, XML lub JSON, HTML i CSS, co umożliwia tworzenie bardziej responsywnych i wydajnych aplikacji internetowych.

Jak działa AJAX?

AJAX działa poprzez asynchroniczne wysyłanie zapytań HTTP do serwera, które zwracają dane w formacie JSON, XML lub HTML. Otrzymane dane są następnie wykorzystywane do dynamicznej aktualizacji części strony – bez przeładowywania całej witryny. W efekcie użytkownik może równocześnie wykonywać inne czynności w aplikacji, np. przeglądać inne sekcje strony czy korzystać z formularzy. W tradycyjnej implementacji AJAX używał obiektu XMLHttpRequest, jednak obecnie standardem jest interfejs fetch(), który pozwala w bardziej przejrzysty sposób obsługiwać zapytania HTTP z użyciem Promises.

Historia AJAX

Sięga ona początków internetu, kiedy to interaktywność stron internetowych była bardzo ograniczona. W latach 90-tych twórcy stron internetowych korzystali z technologii takich jak JavaScript i VBScript, aby dodać animacje i inne efekty wizualne, jednakże większość interaktywnych elementów wciąż wymagała przeładowania całej strony. W 1999 roku Microsoft wprowadził do przeglądarek Internet Explorer obiekt XMLHttpRequest, który umożliwił tworzenie asynchronicznych żądań i odpowiedzi bez konieczności przeładowania całej strony. W 2005 roku Jesse James Garrett wprowadził termin AJAX, opisujący technologię, która wykorzystywała JavaScript i XMLHttpRequest do tworzenia dynamicznych stron internetowych. Od tego czasu AJAX stał się coraz bardziej popularny wraz z rozwojem aplikacji internetowych i dziś jest jednym z kluczowych narzędzi stosowanych w tworzeniu responsywnych i wydajnych stron internetowych.

Architektura AJAX

Typowa architektura AJAX obejmuje następujące elementy:

• JavaScript – steruje komunikacją z serwerem i aktualizuje interfejs użytkownika.
• fetch() lub XMLHttpRequest – umożliwiają wysyłanie zapytań HTTP i odbieranie danych.
• JSON – najczęściej używany format wymiany danych.
• HTML i CSS – służą do wyświetlania oraz stylizacji dynamicznie załadowanych treści.

Technologie i języki wykorzystywane w AJAX

AJAX nie jest jedną technologią, ale zestawem współpracujących ze sobą narzędzi. Do najczęściej używanych należą:

• JavaScript – podstawowy język do obsługi logiki AJAX.
• fetch() – nowoczesne API do wykonywania zapytań HTTP.
• JSON (JavaScript Object Notation) – lekki, czytelny format danych, dziś dominujący w AJAX.
• HTML i CSS – do wyświetlania danych oraz dynamicznego manipulowania wyglądem interfejsu.

Frameworki i biblioteki: AJAX jest często używany za pośrednictwem bibliotek takich jak Axios, React Query, SWR, lub starszych rozwiązań jak jQuery.ajax() (obecnie rzadziej stosowane).

Bezpieczeństwo i dostęp między domenami (CORS)

AJAX często wymaga komunikacji z serwerami w innych domenach. W takim przypadku przeglądarki egzekwują politykę CORS (Cross-Origin Resource Sharing), która ogranicza lub zezwala na połączenia zależnie od ustawień serwera.

W nowoczesnych aplikacjach AJAX pracuje również z:

• tokenami JWT (do uwierzytelniania użytkowników),
• nagłówkami HTTP (do kontroli dostępu i zabezpieczeń).

AJAX a frameworki frontendowe

Współczesne frameworki, takie jak React, Angular, Vue, Svelte, często ukrywają technologię AJAX pod własnymi warstwami abstrakcji. AJAX nadal jest „silnikiem” komunikacji, ale jego użycie odbywa się pośrednio, np. poprzez:

• React Query (React),
• Axios (w różnych frameworkach),
• HttpClient (Angular).

AJAX vs WebSockets i SSE

AJAX świetnie sprawdza się w modelu żądanie-odpowiedź, ale dla aplikacji wymagających komunikacji w czasie rzeczywistym (czaty, gry, notyfikacje) lepszym wyborem są:

• WebSockety – umożliwiają dwukierunkową, stałą komunikację z serwerem,
• SSE (Server-Sent Events) – jednokierunkowy kanał danych od serwera do klienta.
• AJAX nie znika, ale jego zastosowania są dziś bardziej świadome i wyspecjalizowane.