AJAX pozwala stronie internetowej komunikować się z serwerem bez konieczności każdorazowego przeładowywania całej witryny. Dzięki temu użytkownik może zobaczyć nowe informacje, wyniki wyszukiwania lub potwierdzenie wykonania działania bez opuszczania aktualnego widoku.
Nazwa AJAX pochodzi od wyrażenia Asynchronous JavaScript and XML. Określenie powstało w okresie, gdy wymiana danych z wykorzystaniem JavaScript i formatu XML była jednym z charakterystycznych elementów rozwijających się aplikacji internetowych.
Obecnie AJAX nie wymaga korzystania z XML. Dane są często przekazywane w formacie JSON, a komunikacja może wykorzystywać nowoczesne Fetch API.
Jak działa AJAX?
Tradycyjna strona internetowa może wymagać pobrania nowego dokumentu HTML po wykonaniu określonego działania, na przykład przejściu do kolejnej strony wyników.
AJAX pozwala zmienić ten sposób komunikacji.
Przykładowy proces przebiega następująco:
- Użytkownik wykonuje działanie, na przykład wybiera filtr produktów.
- JavaScript uruchamia żądanie HTTP skierowane do serwera.
- Serwer przetwarza żądanie i zwraca odpowiednie dane.
- Przeglądarka odbiera odpowiedź.
- JavaScript aktualizuje wybraną część interfejsu, bez ponownego ładowania całego dokumentu.
Wykorzystanie AJAX nie oznacza, że przeglądarka nie pobiera żadnych nowych zasobów. Zamiast całej strony może pobrać odpowiedź zawierającą tylko informacje potrzebne do aktualizacji danego elementu.
Co oznacza asynchroniczność w AJAX?
Asynchroniczne żądanie pozwala uruchomić operację sieciową bez blokowania całego interfejsu do czasu otrzymania odpowiedzi.
Przeglądarka może nadal obsługiwać inne zdarzenia, podczas gdy komunikacja z serwerem jest realizowana.
Gdy odpowiedź stanie się dostępna, kod JavaScript może ją przetworzyć i zmienić zawartość strony.
Asynchroniczność nie gwarantuje jednak krótkiego czasu odpowiedzi. Jeśli serwer działa wolno lub połączenie jest niestabilne, użytkownik nadal może oczekiwać na wynik operacji.
Dlatego aplikacja powinna informować o trwającym ładowaniu oraz prawidłowo obsługiwać błędy i brak odpowiedzi.
Jakie technologie wykorzystuje AJAX?
JavaScript
JavaScript odpowiada za uruchamianie żądań, odbieranie odpowiedzi i aktualizowanie elementów interfejsu.
Może reagować na kliknięcia, zmianę wartości formularza, wpisanie tekstu albo inne zdarzenia.
Fetch API i XMLHttpRequest
XMLHttpRequest to interfejs wykorzystywany do komunikacji z serwerem, historycznie silnie kojarzony z AJAX.
W nowoczesnych aplikacjach często stosuje się Fetch API, które oferuje interfejs oparty na obiektach Promise i umożliwia wygodną obsługę żądań HTTP.
Oba rozwiązania mogą służyć do implementacji komunikacji określanej jako AJAX.
JSON i XML
JSON (JavaScript Object Notation) jest popularnym formatem wymiany danych między przeglądarką a serwerem.
XML pozostaje możliwym formatem odpowiedzi, lecz nie jest wymagany do stosowania AJAX. Serwer może również zwracać HTML, tekst lub inne odpowiednie dane.
DOM
Document Object Model (DOM) reprezentuje strukturę dokumentu i umożliwia programowe modyfikowanie jego elementów.
Po otrzymaniu odpowiedzi AJAX JavaScript może na przykład zastąpić listę produktów, dodać komunikat lub zaktualizować wynik obliczenia.
Praktyczne zastosowania AJAX na stronach internetowych
AJAX jest wykorzystywany w wielu popularnych funkcjonalnościach witryn i aplikacji.
Wyszukiwarki z podpowiedziami
Podczas wpisywania zapytania aplikacja może pobierać propozycje pasujących produktów lub artykułów.
Użytkownik nie musi zatwierdzać całego formularza, aby otrzymać wstępne wyniki.
Filtrowanie produktów
W sklepie internetowym AJAX może pozwalać na zmianę listy produktów po wybraniu producenta, zakresu cen lub właściwości towaru.
Zastosowanie tej techniki nie oznacza jednak, że każdy filtr będzie prawidłowo dostępny dla wyszukiwarek. Wymaga to osobnej analizy architektury adresów URL i sposobu renderowania.
Formularze i walidacja
Formularz może sprawdzać dostępność określonej nazwy, wysyłać dane lub prezentować komunikat o błędzie bez przeładowania strony.
Walidacja po stronie przeglądarki nie zastępuje sprawdzania poprawności i bezpieczeństwa danych na serwerze.
Koszyk zakupowy
AJAX może aktualizować liczbę produktów w koszyku, wartość zamówienia albo komunikat o dodaniu towaru.
Dzięki temu użytkownik może kontynuować przeglądanie sklepu bez przechodzenia do osobnego widoku po każdej operacji.
AJAX a SEO – czy technologia utrudnia indeksowanie?
Samo wykorzystanie AJAX nie stanowi problemu dla SEO. Znaczenie ma sposób udostępniania treści i linków, które powinny być dostępne dla użytkowników oraz systemów indeksujących.
Google potrafi renderować JavaScript, ale nie należy zakładać, że każda interakcja wykonywana przez użytkownika zostanie automatycznie odtworzona przez Googlebota.
Jeżeli ważne informacje pojawiają się dopiero po kliknięciu przycisku albo przewinięciu strony, mogą być trudniej dostępne dla robota.
Szczególnej uwagi wymagają:
- listy produktów ładowane dynamicznie;
- paginacja i mechanizm „Pokaż więcej”;
- treści pojawiające się dopiero po interakcji;
- linki generowane przez JavaScript;
- obsługa adresów URL i historii przeglądarki.
Ważne podstrony powinny posiadać możliwe do odkrycia adresy URL oraz poprawne odnośniki. W zależności od architektury witryny pomocne może być renderowanie po stronie serwera lub inne rozwiązanie zapewniające dostępność istotnej zawartości.
AJAX a wydajność strony internetowej
AJAX może poprawić odczuwaną szybkość działania interfejsu, ponieważ nie zawsze trzeba ponownie pobierać cały dokument HTML i wszystkie jego elementy.
Nie oznacza to jednak automatycznego przyspieszenia aplikacji.
Nadmierna liczba żądań, zbyt duże odpowiedzi serwera lub nieefektywne aktualizowanie interfejsu mogą negatywnie wpływać na wydajność.
Przykładowo wyszukiwarka wysyłająca nowe żądanie po każdym wpisanym znaku może generować niepotrzebny ruch. Stosuje się wtedy mechanizm debounce, który opóźnia wykonanie operacji do momentu krótkiej przerwy we wpisywaniu.
W bardziej rozbudowanych aplikacjach znaczenie mają również buforowanie odpowiedzi, obsługa anulowania żądań i właściwe zarządzanie stanem interfejsu.
Jakie ograniczenia i zagrożenia ma AJAX?
Komunikacja asynchroniczna wprowadza dodatkowe scenariusze, które trzeba uwzględnić podczas projektowania aplikacji.
Odpowiedzi mogą docierać w innej kolejności niż wysłane żądania. Użytkownik może także zmienić ustawienia formularza, zanim poprzednia operacja zostanie zakończona.
Aplikacja powinna umieć rozpoznawać nieaktualne odpowiedzi i zapobiegać wyświetlaniu błędnych danych.
Ważne jest również bezpieczeństwo. Mechanizm AJAX nie omija zasad kontroli dostępu ani uprawnień użytkownika.
Żądania wysyłane przez JavaScript podlegają między innymi zasadom przeglądarki dotyczącym komunikacji między różnymi źródłami, w tym same-origin policy i CORS.
Serwer powinien weryfikować uprawnienia, poprawność danych i chronić operacje wymagające odpowiednich zabezpieczeń, na przykład przed CSRF.
Czy AJAX jest nadal wykorzystywany?
Tak. Choć określenie AJAX jest dziś stosowane rzadziej niż w początkowym okresie rozwoju dynamicznych aplikacji internetowych, sam sposób działania pozostaje powszechny.
Nowoczesne frameworki JavaScript często udostępniają własne mechanizmy komunikacji z serwerem, które wykorzystują te same podstawowe zasady.
AJAX należy więc rozumieć przede wszystkim jako technikę asynchronicznego pobierania danych i aktualizowania interfejsu, a nie jako przestarzałą bibliotekę czy osobny język programowania.