» E-mentor nr 5 (22) / 2007

W literaturze oraz wystąpieniach konferencyjnych dotyczących e-edukacji daje się ostatnio zauważyć tendencję przesuwania akcentu z zagadnień poświęconych technologii na rzecz samego procesu kształcenia, jego jakości czy efektywności. Nie oznacza ona jednak zmniejszania się znaczenia technologii, a raczej zmianę jej roli. Ewolucja tej roli w kontekście e-edukacji wiąże się między innymi z rozwojem metod i języków programowania dla aplikacji internetowych. Jednemu z takich rozwiązań - metodzie AJAX został poświęcony niniejszy artykuł.

Perła w koronie Web 2.0. AJAX albo śmierć (strony WWW). Rewolucja w aplikacjach sieciowych. To tylko niektóre z określeń używanych w odniesieniu do metody AJAX. W sieci można ich znaleźć znacznie więcej niż spokojnych analiz, nie mówiąc o uwagach jawnie sceptycznych na temat metody. Data wybuchu owej rewolucji jest dokładnie znana i ogólnie uznawana - 18 lutego 2005 r., kiedy Jesse James Garrett, prezydent i twórca firmy Adaptive Path, opublikował artykuł o nowym podejściu do pisania aplikacji sieciowych. Paradoks polega na tym, że nie było tu specjalnego przełomu technologicznego. Garrett zebrał razem i opisał tylko to, co już znano i robiono, chociaż jeszcze nie na szeroką skalę. Ale dodał jedno, co okazało się znaczące i szczególnie przemawiające do ogółu - nazwał nowe podejście, krótko, zgrabnie i symbolicznie, imieniem greckiego bohatera spod Troi, drugiego po Achillesie pod względem odwagi i męstwa. Od tego momentu AJAX rozpoczął karierę, na tyle zawrotną, że mówi się już o ruchu AJAX-owym.

Klient - serwer

W klasycznym modelu pracy w sieci użytkownik podaje w przeglądarce adres strony, wysyła żądanie HTTP do serwera i czeka. Serwer buduje stronę, sięgając ewentualnie do baz danych czy komunikując się z innymi serwerami, "opakowuje" dane w niezbędne znaczniki HTML, arkusze stylu i wysyła stronę do przeglądarki klienta wraz z elementami, które były już wyświetlone poprzednim razem. Klient przegląda stronę, wypełnia pola, klika na przycisk Akceptuj i znów czeka na przeładowanie strony. Jeśli na wyświetlanej stronie jest dużo danych: tekstu, grafiki, animacji - wyświetlanie ich trwa. W wielu przypadkach zmienia się tylko niewielka część strony, ale dla jej przeładowania serwer musi wygenerować ponownie całą jej zawartość, w tym także ponownie wyszukać w bazie dane, które się nie zmieniły, "odziać" je w znaczniki HTML i dołączyć arkusze stylu. Jeśli klient kilka razy wywoła na serwerze tę samą stronę, za każdym razem będzie ponownie przesyłana cała jej zawartość. Traci na tym klient (oczekiwanie), a także niepotrzebnie zwiększa się obciążenie serwera. Metoda AJAX zmienia ten model radykalnie.

Nowe stare

Terminy "metoda" czy "podejście" w odniesieniu do AJAX-u są lepsze niż słowo "technologia". AJAX nie jest nową technologią, tak jak nie jest nią LAMP (Linux, Apache, MySQL, PHP) czy DHTML (HTML, JavaScript, CSS). Nazwa metody jest akronimem utworzonym z "Asynchronous JAvaScript and XML". AJAX wykorzystuje:

• klasę XMLHttpRequest, która dzięki jej metodom i atrybutom umożliwia komunikację z serwerem bez przeładowywania strony (jest to faktycznie jądro metody);
• XML i XLST, do opisywania przesyłanej informacji;
• DOM (Document Object Model) do dynamicznego wyświetlania i interakcji z użytkownikiem za pomocą implementacji ECMAScript, takich jak JavaScript czy Jscript;
• HTML i CSS, do opisu sposobu prezentacji danych;
• język skryptowy (zazwyczaj JavaScript) do połączenia wszystkiego w całość.

JavaScript jest używany do utworzenia żądania (ciągu znaków), które ma być przesłane do serwera. Może to być skutek akcji użytkownika lub też braku takiej akcji w określonym czasie. Oto kolejność operacji:

• akcja użytkownika prowadząca do uruchomienia procesu;
• utworzenie obiektu klasy XMLHttpRequest;
• ustawienie adresu funkcji obsługi zmiany stanu gotowości obiektu;
• otwarcie połączenia z serwerem i wysłanie do niego żądania obsługi (metody obiektu open, send);
• po stwierdzeniu w funkcji obsługi, że jest odpowiedź, pobranie jej;
• przetworzenie odpowiedzi z serwera.

Dane wysyłane są do serwera i pobierana odpowiedź od niego w tle, niezależnie od operacji, jakie w danym momencie realizuje użytkownik i bez interferencji z nimi (to właśnie oznacza przymiotnik "asynchronous" w nazwie metody AJAX).

JavaScript, za pomocą DOM, może zrealizować dowolną operację na danych otrzymanych z serwera, np. wyświetlić je w miejscach zdefiniowanych na stronie za pomocą odpowiednich znaczników HTML, takich jak: div, span, bez konieczności wyświetlania raz jeszcze pozostałych fragmentów strony: grafiki, menu itp.

W akronimie AJAX litera X reprezentuje język XML. To nieco mylące (litera użyta najwyraźniej po to, by utworzone zostało imię greckiego bohatera). Wprawdzie klasa XMLHttpRequest była tworzona z myślą o XML, ale do przesyłania danych można użyć innego formatu, np. JSON (Java Script Object Notation będący faktycznie częścią języka), notabene spopularyzowanego w znacznej mierze dzięki AJAX-owi właśnie. Praktycznie format danych może być dowolny (także zwykły HTML), pod warunkiem oczywiście, że aplikacja sieciowa i oprogramowanie na serwerze będą ten format "rozumiały" (zaletą XML czy JSON jest to, że istnieją funkcje parsujące dane zapisane w tych notacjach, w samym interpreterze JavaScript lub dostępne publiczne w sieci i łatwe do wykorzystania). Po stronie serwera nie ma żadnych zasadniczych zmian. Można do obsługi żądania klienta użyć dowolnego języka (PHP, Perl, Python, Java), byleby tylko skrypt w tym języku rozumiał żądanie przesłane z aplikacji i potrafił je obsłużyć (np. połączył się z bazą danych i zrealizował odpowiednią kwerendę).

Wszystkie elementy wykorzystywane w AJAX-ie są dostępne w większości obecnych przeglądarek. Ponieważ JavaScript nie jest kompilowany, do pisania aplikacji sieciowych w AJAX - niezależnie od istniejących już narzędzi - wystarcza na dobrą sprawę edytor tekstowy średniej klasy.

Termin "asynchronous" zazwyczaj tłumaczy się jako "asynchroniczny". W ogólnym znaczeniu tego słowa dwa procesy, które są względem siebie asynchroniczne mogą zachodzić w różnych momentach czasowych. Takie jest też rozumienie pojęcia asynchroniczności w e-edukacji. Natomiast w przypadku AJAX-a chodzi o wzajemną niezależność dwóch procesów, które mogą zachodzić równocześnie (np. wysyłanie zapytania do serwera, które nie powoduje opóźnienia w wyświetlaniu zawartości strony). Stąd, aby uniknąć skojarzeń, które mogą okazać się mylące, w dalszej części artykułu będą stosowane określenia opisowe np. odwołania do serwera bez przeładowywania strony lub wywołania serwera w trybie nieblokujacym¹.

Ewolucja

Garrett, spytany o nazwę metody, odparł, że musiał mieć coś krótszego niż "Asynchronous JavaScript + CSS + DOM + XMLHttpRequest", ale uwzględnił tylko te litery, które złożyły się w chwytliwy akronim. Możliwości, jakie daje metoda, można było zaobserwować od razu - Garrett powołał się w artykule na dwie istniejące już wtedy aplikacje sieciowe Google, w których nowe podejście zastosowano, m.in. Google Maps. Google zaanonsowało oficjalnie swoje mapy 10 dni przed opublikowaniem artykułu Garretta. Wrażenie powszechne było dość szokujące - mapę można było przesuwać w każdym kierunku i reakcja była prawie natychmiastowa - w trakcie oglądania jednego fragmentu mapy aplikacja "dociągała" - przez wywołania serwera w trybie nieblokującym - sąsiednie fragmenty (obraz można było też dowolnie zbliżać). Innymi słowy - AJAX, współpracując z serwerem, w tle aktywności użytkownika, nieustannie przewidywał, jakie może być jego następne żądanie.

Niektóre z technologii używanych w metodzie AJAX istniały już niemal od dekady. Samo wywoływanie serwera w trybie nieblokujacym można było realizować już od 1996 r., kiedy to do przeglądarki IE wprowadzono obsługę elementu IFRAME, umożliwiającego pobieranie z serwera kontentu bez przeładowywania strony (jest on dziś używany także w niektórych aplikacjach Google). Podobny element o nazwie LAYER wprowadzono do NESTCAPE. Obydwa elementy miały atrybut src, któremu można przypisać dowolny zewnętrzny URL i za pomocą funkcji JavaScript uzyskać efekty podobne do możliwości metody AJAX. W 1998 r. Microsoft wprowadził Remote Scripting, a krótko potem - w IE 5.0 - wspomnianą klasę XMLHttpRequest, którą wykorzystano już w 2001 r. w Outlook Web Access. Również Macromedia Flash (od wersji 4) pozwalał ładować dane XML z serwera, bez przeładowywania strony. Flickr, jedna z aplikacji wymienianych najczęściej jako pokazowy przykład wykorzystania metody AJAX, została anonsowana na rok przed opublikowaniem artykułu Garretta. Według Garretta musiało potrwać, zanim zaczęto rozumieć, jak ich używać efektywnie. Być może zebranie tych technologii razem i nadanie im nazwy było swoistą cezurą. Od 2005 r. stosowanie technik łączenia się z serwerem w trybie nieblokującym zaczęło się upowszechniać. Ludzie, patrząc m.in. na sieciowe aplikacje Google, zaczęli sobie uświadamiać, co można dzięki takim technikom uzyskać.