AJAX Kurs od podstaw - interaktywne aplikacje WWW

Ajax na stronach WWW oraz jako asynchroniczny JavaScript i XML

Ajax na stronach WWW

Strona WWW stosująca technologię Ajax zawiera elementy dynamiczne. Pod wpływem interakcji użytkownika wygląd i treść witryny ulegają zmianie. Zasadniczą cechą wyróżniającą witryny ajaksowe jest brak przeładowania całej strony WWW. Zachowanie takie możemy zaobserwować m.in. w serwisie flickr (http://flickr.com).

Rysunek po lewej prezentuje zdjęcie zatytułowane Tatry... I LOVE YOU!!!. Po prawej stronie znajdują się kontrolki umożliwiające przeglądanie kategorii. Każda kategoria może zostać zwinięta (służy do tego ikona -) lub rozwinięta (ikona +). Rysunek po prawej prezentuje tą samą witrynę po zwinięciu pierwszej kategorii.

Dynamicznym fragmentem strony przedstawionej na powyższych rysunkach jest zaznaczona na czerwono kontrolka wyświetlająca miniaturowe fotografie. Element ten jest widoczny (rozwinięty) lub ukryty (zwinięty ).

Inter akcja użytkownika polega na kliknięciu ikony + lub -. W odróżnieniu od zwykłych hiperłączy, strona nie zostaje przeładowana. Zmianie ulega tylko fragment witryny.

Zawartość rozwinięte go elementu pochodzi z serwer a (są to miniaturki innych fotografii należących do danej kategorii). Zatem po rozwinięciu elementu przeglądarka w tle pobiera z serwera dane i umieszcza je w odpowiednim obszar ze strony WWW.

Ajax, czyli asynchroniczny JavaScript i XML

Strona wykorzystująca Ajax jest zwykłym dokumentem HTML /CSS zawierającym skrypty JavaScript. Ajax nie w prowadza żadnych nowych języków. Interakcje użytkownik a (np. kliknięcie ikony, wskazanie elementu kursorem myszki) jest realizowane poprzez zdarzenia zdefiniowane w specyfikacji HTML (m.in. onclick, onmouseover, onmouseout). Może to być kliknięcie elementu span czy wskazanie kursorem myszki obrazka img. Cała dynamiczna interakcja jest oprogramowana w języku JavaScript.

Wysyłanie w tle zapytań HTTP do serwera o dodatkowe dane odbywa się przy użyciu obiektu JavaScript o nazwie XMLHttpRequest. Po odebraniu danych z serwera modyfikujemy stronę WWW, wykorzystując do tego model DOM. Innymi słowy w skrypcie JavaScript wywołujemy metody (np. getElementById(), getElementsByTagName() ), by uzyskać dostęp do poszczególnych elementów HTML strony, która jest właśnie wyświetlona przez przeglądarkę. Różnymi właściwościami (np. innerHTML, style) modyfikujemy treść ( np. w stawiamy miniaturk i pobrane w tle z serwera ) i wygląd poszczególnych elementów HTML ( np. rozwijamy/zwijamy element div ).

Podsumowując, tworzenie ajaksowych stron WWW wymaga znajomości:

• języków HTML /CSS, w szczególności zdarzeń HTML,
• języka JavaScript,
• obiektu XMLHttpRequest (jest to obiekt dostępny w JavaScript),
• protokołu HTTP, w szczególności metod GET o raz POST,
• języka XML ,
• modelu DOM (czyli obiektów, ich metod oraz właściwości dostępnych w JavaScripcie, które pozwalają na modyfikowanie strony WWW wyświetlanej przez przeglądarkę).

Języki przetwarzania po stronie serwera (takie jak PHP, ASP czy JSP) nie są konieczne. W pierwszym odcinku kursu wszystkie przykłady będą napisane wyłącz nie w językach XHTML, CSS, JavaScript, XML, bez przetwarzania po stronie serwera.

Rozwiązaniami podobnymi do Ajaksa są AHAH ( Asynchronous HTML and HTTP - asynchroniczny HT ML i HT TP) oraz AXAH (Asynchronous XHTML and HTTP - asynchroniczny XHTML i HTTP). Różnią się one od Ajaksa formatem danych. Obecnie, bez względu na format danych, rozwiązania stosujące asynchroniczną komunikację z serwerem WWW są określane terminem Ajax (nawet, jeśli nie stosują XML).

1. Ajax na stronach WWW oraz jako asynchroniczny JavaScript i XML
2. Tworzenie obiektu XMLHttpRequest
3. Wysyłanie żądań HTTP oraz odbieranie danych z serwera
4. Odbieranie danych w formacie tekstowym i XML
5. Asynchroniczna wymiana treści
6. Asynchroniczna wymiana treści c.d.
7. Aparaty fotograficzne
8. Aparaty fotograficzne c.d.