Czym jest AJAX?

AJAX (skrót od Asynchronous JavaScript And XML) jest nazwą nowej metody programowania, łączącej kilka różnych technik: (X)HTML i CSS do tworzenia interfejsu użytkownika, DOM ( Document Object Model) do obsługi elementów dynamicznych i interakcji oraz XMLHttpRequest do asynchronicznej wymiany danych. Techniki te są łączone w jedną całość za pomocą JavaScriptu, odpowiedzialnego za logikę aplikacji i dynamiczną aktualizację interfejsu użytkownika stosownie do potrzeb.

Pomimo XML w nazwie, AJAX niekoniecznie wymaga używania formatu XML do wymiany danych. Poza XML-em obsługiwane są między innymi zwykły tekst, sformatowany HTML (dodawany do bieżącej strony poprzez właściwość innerHTML) oraz format JSON ( JavaScript Object Notation), który można przepuścić przez eval() w celu uzyskania typów JavaScript. Można też korzystać z dowolnego innego formatu danych dającego się obsłużyć w JavaScripcie i PHP.

AJAX-a można najprościej zdefiniować jako metodę wykorzystania JavaScriptu do komunikacji z serwerem niezależnie od tradycyjnych żądań POST i GET. Strona techniczna jest tu jednak mniej istotna ? najważniejsze są zupełnie nowe możliwości tworzenia aplikacji internetowych.

Podstawą pracy AJAX-a jest obiekt XMLHttpRequest, stanowiący standardowy element wielu przeglądarek. Jeśli postanowisz dodać obsługę AJAX-a do swojej aplikacji za pomocą biblioteki, to nie musisz wiele wiedzieć o samym XMLHttpRequest, gdyż wszystkim zajmie się biblioteka. Fizyczna implementacja obiektu XMLHttpRequest zależy od konkretnej przeglądarki ? w Internet Explorerze jest to wbudowany obiekt ActiveX, natomiast w Firefoksie, Safari i większości innych przeglądarek jest on wewnętrznym obiektem JavaScriptu.

XMLHttpRequest udostępnia proste API, pozwalające wysyłać do serwera żądania HTTP metodami GET i POST. Dla serwera są to zwyczajne żądania przeglądarki, zawierające nawet wszystkie pliki cookie dla bieżącej domeny oraz autoryzację HTTP (jeśli oczywiście jest włączona). Od strony JavaScriptu, XMLHttpRequest daje dostęp do treści i nagłówków podczas wysyłania i odbioru żądań. Możliwość ta jest często używana do poinformowania serwera, że żądanie nie zostało zgłoszone bezpośrednio przez użytkownika, lecz poprzez XMLHttpRequest. Odebraną treść można traktować jako zwykły tekst, ale w przypadku treści typu text/xml można też stworzyć obiekt XML DOM. Obsługa modelu DOM przyczyniła się do popularności XML-a jako formatu wymiany danych między klientem a serwerem, natomiast utrzymanie obsługi zwykłego tekstu pozwala korzystać z dowolnego formatu dającego się przetworzyć na poziomie JavaScriptu.

Dlaczego AJAX?

Najważniejszym argumentem przemawiającym za korzystaniem z AJAX-a jest możliwość uzyskania znacznie wyższego poziomu interaktywności w aplikacjach internetowych. Reakcje programu na działania użytkownika są dużo szybsze, bez nużącego klikania i czekania, przez co obsługa całego programu znacznie bardziej przypomina pracę z tradycyjną aplikacją stacjonarną.

Rysunek 1. przedstawia przepływ danych w typowej aplikacji internetowej. Użytkownik wypełnia formularz i wysyła go na serwer WWW, który przetwarza formularz i odsyła dane do czekającego użytkownika. Zwracanym wynikiem jest pełna strona HTML, którą przeglądarka klienta musi załadować w całości (treść i strukturę). Marnuje się w ten sposób czas i pasmo, gdyż kod strony wynikowej najczęściej niewiele się różni od kodu poprzedniej strony.

Rysunek 1. Przepływ danych w tradycyjnej aplikacji internetowej

Aplikacja AJAX wysyła do serwera wyłącznie żądania pobierające nowe, potrzebne dane, a odpowiedź serwera jest przetwarzana przez JavaScript po stronie klienta. Dzięki wprowadzeniu tej dodatkowej warstwy JavaScriptu, przetwarzanie danych nie spowalnia działania interfejsu użytkownika. Cała aplikacja działa znacznie szybciej, gdyż między serwerem, a klientem przesyłanych jest nieporównanie mniej danych, a spora część przetwarzania odbywa się po stronie klienta (Rysunek 2).

Rysunek 2. Przepływ danych w aplikacji AJAX

Praktycznie rzecz ujmując, stworzenie aplikacji AJAX wymaga zatem dwóch elementów: odpowiednich skryptów po stronie klienta i specjalnego kanału komunikacji z serwerem.

Zalety techniki AJAX

AJAX ma wiele zalet, z których najbardziej zauważalną jest znaczące rozszerzenie zakresu możliwości interfejsu użytkownika. Jednak samo w sobie to nie wystarczy ? w końcu istnieje też wiele innych technologii o zbliżonych możliwościach. O wyjątkowości AJAX-a stanowi przede wszystkim to, że bazuje on na uznanych standardach, więc w przeciwieństwie do innych narzędzi do tworzenia interaktywnych aplikacji internetowych (na przykład Flasha) można go z łatwością wpasować w istniejące procesy deweloperskie. Można więc dalej korzystać ze swojego ulubionego edytora czy środowiska programistycznego, bez konieczności poznawania nowych narzędzi.

Istnieje też wiele darmowych zestawów narzędzi open source ułatwiających tworzenie i rozwijanie aplikacji AJAX, a przy okazji redukujących objętość kodu JavaScriptu, jaki trzeba wpisywać ręcznie. W dalszej części artykułu zobaczymy, jak dołączać obsługę AJAX-a do własnych aplikacji z pomocą popularnych bibliotek.

Wady AJAX-a

Opisywana metoda interakcji z klientem ma też swoje wady. Nie można przewidzieć, z jakiej przeglądarki korzysta użytkownik, więc aplikacja może nie działać na niekompatybilnych przeglądarkach lub przy wyłączonej obsłudze JavaScriptu. Oznacza to, że dobrą praktyką jest uwzględnienie awaryjnej metody obsługi, na przykład poprzez stworzenie bazowej aplikacji z wykorzystaniem tradycyjnych technik, a następnie rozbudowanie jej o opcjonalne usprawnienia używające AJAX-a.

Trzeba też pamiętać, że aplikacje z AJAX-em nie będą działać w Internet Explorerze z wyłączoną obsługą ActiveX, co często dotyczy na przykład kafejek internetowych. Może się także zdarzyć, że aplikacja będzie działać nieco inaczej w różnych przeglądarkach i na różnych platformach, choć to samo dotyczy tworzenia tradycyjnych aplikacji internetowych.

AJAX oferuje spore możliwości interakcji, ale do wielu zadań po prostu się nie nadaje, na przykład do dynamicznego rysowania elementów czy obsługi animacji ? w takich sytuacjach lepiej korzystać z Flasha. Warto w tym miejscu zaznaczyć, że pomimo teoretycznej możliwości połączenia zalet AJAX-a i Flasha w ramach jednej aplikacji, złożoność takiego rozwiązania jest na tyle duża, że lepiej używać tych technik osobno.