AJAX

Asynchroniczny JavaScript i XML (AJAX)

Asynchroniczny JavaScript i XML (ang. Asynchronous JavaScript and XML, AJAX) to technika wykorzystywana w tworzeniu aplikacji internetowych, która pozwala na interakcję użytkownika z serwerem bez konieczności przeładowywania całego dokumentu, działając w trybie asynchronicznym. Dzięki temu możliwa jest bardziej dynamiczna interakcja z użytkownikiem w porównaniu do tradycyjnego modelu, w którym każde żądanie nowych danych skutkuje przesłaniem całej strony HTML. Koncepcja AJAX została opracowana przez Jesse Jamesa Garretta.

Podstawowe elementy AJAX

Technika AJAX składa się z kilku kluczowych elementów:

XMLHttpRequest – klasa, która umożliwia asynchroniczne przesyłanie danych; dzięki asynchroniczności użytkownik może kontynuować inne działania w trakcie pobierania danych, a także pobierać informacje z różnych źródeł jednocześnie. Obecnie często używa się nowego API – fetch.
JavaScript – mimo że jest to język wymieniony w nazwie, w praktyce może to być dowolny język skryptowy działający po stronie klienta, np. JScript czy VBScript.
XML – język znaczników używany do opisu przesyłanych informacji. W rzeczywistości dane często są przesyłane w innych formatach, a odbierane jako tekst. Może to obejmować zarówno gotowe fragmenty HTML, jak i kod JavaScript (zob. JSON), a także formaty specyficzne dla danego zastosowania.

Teoretycznie to wszystkie wymagane elementy, jednak w praktyce często korzysta się z odpowiednich skryptów działających na serwerze, które współpracują z bazą danych. Można jednak obyć się bez nich, jeśli wszystkie potrzebne dane zostały już wcześniej wygenerowane (np. zawartość poszczególnych stron prostego serwisu).

Wady i ograniczenia

Używanie języka skryptowego do udostępniania treści strony ogranicza dostęp do niej dla niektórych użytkowników. Dotyczy to zarówno osób, które świadomie blokują skrypty (np. z uwagi na wysokie obciążenie systemu), jak i tych korzystających z czytników ekranowych, gdzie obsługa skryptów może być znacznie ograniczona. Aby temu zaradzić, można udostępnić alternatywne, bardziej tradycyjne rozwiązania przynajmniej dla podstawowych funkcji serwisu, co jednak zwiększa koszty wprowadzania nowych rozwiązań. Przykładem mogą być portale z obsługą kont pocztowych, które czasem oferują starsze wersje interfejsu.

Automatyczne pobieranie stron jest trudniejsze, ponieważ programy takie zwykle nie interpretują języków skryptowych. Należy jednak pamiętać, że możliwość pobierania zawartości serwisu może nie być korzystna dla jego właścicieli.

Bezpośrednie indeksowanie przez wyszukiwarki może być utrudnione, ale wystarczy zadbać o dostarczenie linków prowadzących do pełnej treści strony lub stworzyć mapę witryny.

Część starszych skryptów do analizy ruchu na stronie opiera się na klasycznym modelu udostępniania całych stron (wymagającym odświeżenia całości). Nowocześniejsze skrypty potrafią jednak uwzględniać właściwe pomiary oglądalności stron. Możliwe jest także analizowanie logów żądań wysyłanych do serwera WWW.

Jednym z mankamentów rozwiązań opartych na AJAX jest to, że tradycyjny schemat przeglądania stron, umożliwiający swobodne poruszanie się w przód i w tył, przestaje działać. Na przykład, jeśli kliknięcie w link uruchamia skrypt zmieniający zawartość strony (a menu pozostaje bez zmian), użytkownik nie będzie mógł cofnąć się przy użyciu przycisku „Wstecz” w przeglądarce. Twórcy serwisów WWW mogą jednak zaprogramować analogiczny mechanizm, który umożliwi wycofywanie zmian w konkretnych fragmentach strony.

Głębokie linkowanie jest utrudnione – stworzenie bezpośredniego odnośnika do niektórych treści może być niemożliwe.

Przykład utworzenia nowego obiektu XMLHttpRequest

== Przykład pobierania danych JSON przez XHR ==

Uproszczone pobieranie w przeglądarkach wspierających standardowe tworzenie obiektu XHR oraz parsowanie JSON.

Przykład użycia API fetch

Funkcja fetch to nowe API dostępne w przeglądarkach, które upraszcza wysyłanie zapytań HTTP. Funkcja fetch zwraca obietnicę.

Biblioteki AJAX

Popularne biblioteki JavaScript związane z AJAX-em:

Prototype – biblioteka, która ułatwia korzystanie z możliwości oferowanych przez AJAX.
jQuery – biblioteka, która upraszcza interakcję z AJAX.
Ext – wcześniej rozszerzenie Prototype, jQuery oraz YUI, obecnie samodzielna biblioteka.
Script.aculo.us – rozszerza Prototype, ułatwiając tworzenie animacji i interfejsów.
MooTools – modułowa biblioteka AJAX z dodatkowymi funkcjami do tworzenia efektów wizualnych.
Yahoo! UI Library – narzędziowa biblioteka dla DHTML.
Dojo Toolkit – narzędziowa biblioteka dla DHTML.
AJAX.OOP – narzędziowa biblioteka stworzona z myślą o AJAX.
picoAjax – prosta i szybka biblioteka JavaScript, która ułatwia korzystanie z możliwości oferowanych przez technikę AJAX.