AJAX (ang. Asynchronous JavaScript and XML, asynchroniczny JavaScript i XML) – technologia tworzenia aplikacji internetowych, w której interakcja użytkownika z serwerem odbywa się bez przeładowywania całego dokumentu, w sposób asynchroniczny [wikipedia].

Zatem nie jest to jakaś magia, słowo otwierające wszystkie drzwi i rozwiązujące wszystkie problemy. Źle zaprojektowana i słaba strona z samego faktu wykorzystywania Ajaksa nie staje się lepsza.

Tak naprawdę Ajax nie jest niczym nowym. Pierwszą bardzo popularną aplikacją webową wykorzystującą Ajax był Gmail. Sam termin pojawił się już niejako po fakcie - najpierw ludzie używali możliwości, a dopiero potem wymyślono nazwę.

Nazwa nie zawsze zgodna z prawdą

To wcale nie jest prawdą, że Ajax musi używać XML. Równie dobrze radzi sobie z innymi typami danych, takimi jak JSON lub czysty tekst. Ja preferuję JSON, bo jest przyjemniejszy w obsłudze niż XML. Kolejnym plusem JSON jest mniejszy rozmiar.

W przypadku wykorzystywania JSON konsekwentnie powinniśmy mówić o AJAJ (ang. Asynchronous JavaScript and JSON), a w przypadku czystego tekstu, który może być kodem HTML, powinniśmy mówić o AJAH (ang. Asynchronous JavaScript and HTML) lub AJA(P)T (ang. Asynchronous JavaScript and (Plain) Text).

Dlatego proponowałbym, aby używać Ajax, kiedy mówimy o asynchronicznych żądaniach wysyłanych przez skrypt JS oraz AJAX, kiedy mówimy o Ajaksie wykorzystującym jako format danych XML.

Ajax dzisiaj stał się wręcz symbolem nowoczesności i często dodaje się go do nazwy "nowoczesnych" bibliotek, nawet jeśli Ajaksa tam niewiele, albo i wcale nie ma .

Jak działa Ajax?

Dawne strony działały w taki sposób:

Klient wysyłał request (żądanie) do serwera. Czekał na odpowiedź. Po otrzymaniu odpowiedzi, wyświetlał cały nowy dokument. Nadal jest to używane. Najczęściej gdy wciśniesz jakiś link, to zostajesz przeniesiony na inną stronę. Choć istnieją już strony, w których nie ma "mrugnięcia" podczas zmiany adresu - cały interfejs jest dynamicznie podmieniany (JS operuje na drzewie DOM i podmienia strukturę dokumentu) i uzupełniany danymi uzyskanymi z asynchronicznego żądania.

Schemat request - response "nowoczesnych" stron

Jak widać, w przypadku Ajaksa serwer może być "bombardowany" wielką ilością żądań (request), ale najczęściej żądania te nie obciążają tak bardzo serwera, gdyż przeważnie nie ma on generować nowej strony, a jedynie wykonać drobną operację. Zauważ, że gdy chcesz oddać głos, czy dodać komentarz, to przecież wcale nie chcesz, aby odświeżona (aka wygenerowana ponownie przez serwer) została cała strona. Interesuje Cię zmiana jednego tylko pola. To właśnie umożliwia Ajax.

Na powyższym rysunku użyłem sformułowania "request ajaksowy". To także oczywiście "request HTTP", tyle, że obsługiwany przez klienta w wyjątkowy sposób.

• pl.wikipedia.org/wiki/Hypertext_Transfer_Protocol

Dwa rodzaje żądań

Żądania wysyłane Ajaksem dzielimy na synchroniczne i asynchroniczne. Czym się różnią?

Żądania synchroniczne

Wstrzymują działanie całej strony. Wszystko jakby "zamarza" w oczekiwaniu na odpowiedź serwera. Kiedy ich używać? Zdecydowanie rzadko. Wtedy kiedy, musisz być pewien, że zostanie wykonana pewna sekwencja, w której kolejność żądań ma znaczenie.

Żądania asynchroniczne

Wymagają przekazania funkcji obsługi (callback). Nie zamrażają stanu aplikacji. Nie ma pewności, że odpowiedzi na żądania wrócą do nas w kolejności wysyłania żądań, co pokazuje powyższy schemat (odpowiedź na żądanie 1 przyszło ostanie).

Żądania asynchroniczne są zdecydowanie milsze dla użytkownika i polecane.

Ajax od kuchni

Wyżej opisałem jaka jest zasada działania Ajaksa. Czas jednak wspomnieć, jak to się dzieje, że można wysłać ze skryptu żądanie, bez przeładowania strony. Są 3 techniki:

1. wykorzystanie obiektu XMLHttpRequest / ActiveObcjectX (starsze wersje IE)
2. pływające ramki
3. ciasteczka

Z pewnością najpopularniejszym oraz najbardziej "ajaksowym" i "nowoczesnym" jest sposób 1.

Pływające ramki i ciasteczka były używane w czasach, kiedy nie wszystkie przeglądarki posiadały zaimplementowany obiekt XMLHttpRequest.

Po co Ajax?

Dzięki Ajaksowi można dać internaucie wrażenie, że aplikacja z nim rozmawia. Oszczędza się też jego czas i łącze wykonują wiele działań "za jego plecami". Prawidłowo wykorzystany Ajaks w połączeniu z DHTML pozwala naprawdę poprawić funkcjonalność strony www.

Z pewnością warto. Z pewnością należy też używać - jak wszystkiego - z głową.

By wiedzieć więcej:

• www.yarpo.pl/2011/03/06/ajax-kompedium-wiedzy/

Artykuł pierwotnie opublikowany na stronie: http://www.yarpo.pl/2011/03/06/ajax-czym-jest-jak-dziala-po-co/