Sieć z turbodoładowaniem

Nowa technologie tworzenia stron internetowych pozwala na większą interakcję z użytkownikiem oraz płynne wyświetlanie nowych treści bez konieczności przeładowywania całej witryny. Prezentujemy podstawy działania AJAX-a

Są witryny, przy których nawet najlepsze łącze niewiele pomoże. Po każdym kliknięciu można by iść na kawę, bo okienko przeglądarki i tak na dłuższą chwilę staje się białe. Upływają długie, męczące sekundy, zanim załaduje się następna strona i pojawi się na niej tekst, grafika czy animacja.

AJAX z tym skończy. Jego nazwa nasuwa wprawdzie na myśl raczej środek czyszczący, chodzi tu jednak o nową technikę opisu stron WWW, która zapobiega występowaniu długich przerw w surfowaniu. Można ją napotkać na coraz większej liczbie witryn. U wielkich graczy świata Internetu znajdziemy ją niemal wszędzie. Google Maps, Microsoft Live.com i Yahoo Foto Community Flickr już stawiają na nowe, szybsze algorytmy.

Przykładem niech tu posłuży Google Maps (maps.google.com). Do niedawna, gdy użytkownik chciał zmienić oglądany obszar mapy, musiał przejść na kolejną stronę, klikając link na brzegu obrazka, a następnie zaczekać na załadowanie grafiki odpowiadającej żądanemu fragmentowi. Użycie AJAX-a zmieniło tę sytuację radykalnie. Wystarczy wycelować kursorem w mapę, przytrzymać wciśnięty lewy przycisk myszki i już można ją przesuwać w dowolną stronę. Nie wymaga to ani czarów, ani żadnych specjalnych nakładów. AJAX w tle nie doładowuje niepotrzebnego balastu grafiki, a tylko konieczne w danym momencie wycinki mapy. Zostają one wyświetlone dopiero po ich całkowitym załadowaniu. Jest to nie tylko wygodne, ale też szybsze, bo wymaga przesłania do użytkownika mniejszej ilości danych.

Do tej pory podobny efekt można było uzyskać tylko z użyciem ramek albo flasha. Problem polega jednak na tym, że obie wymienione metody nie funkcjonują z każdą przeglądarką. Animacje flashowe wymagają doinstalowania plug-ina, zaś efekty uzyskane z użyciem ramek mogą wyglądać różnie w różnych przeglądarkach. AJAX działa bez problemów z każdym browserem, nie stwarzając przy tym praktycznie żadnych kłopotów.

Wszystko to brzmi jakby wymagało zastosowania drogiego i skomplikowanego oprogramowania. AJAX jednak nie jest przeznaczony tylko dla wąskiego kręgu krewnych i znajomych Google’a. Używać go może każdy, a na następnej stronie pokazujemy na prostym przykładzie, jak łatwo można tę technologię zaimplementować na własnej witrynie.

AJAX w istocie jest niczym innym, jak tylko odpowiednio napisanym skryptem Javy, połączonym z innymi, standardowymi technikami opisu stron. Jego pełna nazwa mówi o nim bardzo wiele: „Asynchronous Java-Script and XML”. AJAX konstruuje więc strony dynamicznie, bazując przy tym na HTML-u, stylach kaskadowych CSS (Cascading Style Sheet), skryptach Javy i języku XML. Zatem tylko użytkownicy, którzy wyłączyli na swoich maszynach Java­Script, nie będą mogli korzystać ze stron utworzonych z użyciem AJAX-a.

Bez Javy ani rusz

Najważniejszą częścią składową AJAX-a jest komenda Javy: XMLHttp Request. Wysyła ona do serwera żądanie dostarczenia danych XML, a następnie dane te przyjmuje. JavaScript zawierający taką komendę nazywa się modułem AJAX-a. Przejmuje on od przeglądarki całą komunikację z serwerem, działając jak inteligentne proxy. Jeśli więc klikniemy jakiś link, strona pozostanie na razie niezmieniona, zamiast zniknąć z widoku, jak to się dzieje do tej pory przy zwykłym przeładowywaniu. W tle zaś AJAX pobiera dane. Gdy są one już kompletne, wbudowuje zmiany w stronę HTML, dopasowuje szablon CSS i aktualizuje okienko przeglądarki. Dopiero teraz widzimy, że pojawił się na stronie element, którego oczekiwaliśmy – a cała reszta pozostała bez zmian. W praktyce załadowanie nowych elementów odbywa się bardzo szybko i uzyskujemy np. płynne przewijanie mapy.

Close

Choć staramy się je ograniczać, wykorzystujemy mechanizmy takie jak ciasteczka, które pozwalają naszym partnerom na śledzenie Twojego zachowania w sieci. Dowiedz się więcej.