3. AJAX (INT)

3. (INT) Asynchroniczna komunikacja z serwerem HTTP w technologii AJAX
Co to jest AJAX?
AJAX (czyli Asynchronous JavaScript and XML), mimo że czasem zwany „nową technologią”,
jest jedynie nowym sposobem użycia od lat istniejących metod (działających po stronie
klienta a nie serwera) do tworzenia interaktywnych aplikacji sieciowych. Główną ideą AJAX’a
jest umożliwienie dynamicznego pobierania i umieszczania w treści strony informacji bez
konieczności przeładowywania całej strony.
Podstawowe elementy AJAX
Na technologię tę składa się parę elementów:
• XMLHttpRequest (w skrócie XHR) – obiekt języków skryptowych umożliwiający
asynchroniczne przesyłanie danych przez sieć; dzięki asynchroniczności, w trakcie
pobierania danych, użytkownik może wykonywać inne czynności, można także
pobierać dane jednocześnie z wielu miejsc.
• JavaScript – mimo użycia w nazwie, może to być dowolny język skryptowy
funkcjonujący po stronie użytkownika (np. JScript czy VBScript), który obsługuje
obiektowy model dokumentu (DOM); przetwarzanie danych po stronie użytkownika
jest kluczowe, ponieważ odebrane dane muszą zostać wstawione na stronę.
• XML – język znaczników, poprzez który miałyby być opisane odbierane informacje. W
praktyce jednak dane często przekazywane są w innym formacie, przy czym
odbierane są wtedy jako tekst. Mogą to być zarówno gotowe fragmenty HTML, jak i
fragmenty kodu JavaScript (zob. JSON), może to być też format specyficzny dla
danego zastosowania.
Teoretycznie są to wszystkie wymagane elementy, jednak w praktyce bardzo często używane
są jeszcze odpowiednie skrypty funkcjonujące po stronie serwera i współpracujące z bazą
danych. Oczywiście nie są one konieczne, jeśli wszystkie potrzebne dane zostały już
wcześniej wygenerowane (np. zawartość poszczególnych stron prostego serwisu).
Trochę historii
W 1999 roku, Microsoft stworzył i zaimplementował w Internet Explorerze 5, obiekt ActiveX
o nazwie XMLHTTP, który stał się prekursorem dla zaadoptowanego później przez Mozillę,
Safari, Operę i inne przeglądarki obiektu JavaScript – XMLHttpRequest (pojawił się on
również w Internet Explorerze od wersji 7, wciąż pozostawiając wsparcie dla stworzonego
wcześniej obiektu ActiveX). Technika wykonywania w tle asynchronicznych żądań HTTP do
serwera była raczej mało rozpowszechniona dopóki nie zaczęła pojawiać się na dużą skalę w
aplikacjach sieciowych takich jak Outlook Web Access (2000) czy Oddpost (2002). Jednak
prawdziwą popularność przyniosło użycie AJAX’a przez Google w Gmail’u (2004) i Google
Maps (2005). W kwietniu 2006, konsorcjum W3C wydało pierwszy szkic specyfikacji dla
obiektu XMLHttpRequest.
Dlaczego warto używać AJAX?
Na stronach stworzonych bez użycia AJAX’a, każda akcja podejmowana przez użytkownika
wymaga przeładowania całej strony. Ma to oczywiście uzasadnienie jeśli otwierana strona
znacznie różni się od tej na której użytkownik aktualnie się znajduje, jednak bardzo często
wiele elementów na stronie pozostaje stałych, a zmienia się jedynie jej fragment – a w
związku z tym, ciągłe przeładowywanie strony jest zbędne, powoduje mało komfortowe dla
użytkownika znikanie i pojawianie się na nowo tych samych treści i generuje niepotrzebny
ruch w sieci. AJAX rozwiązuje wszystkie te problemy, a dodatkowo dzięki asynchroniczności
pozostawia użytkownikowi możliwość dalszego korzystania ze strony w czasie gdy dane są
pobierane z serwera.
Zasada działania
Ogólną zasadę działania, najlepiej obrazuje schemat na kolejnej stronie. Działanie AJAX’a
rozpoczyna się w momencie, gdy użytkownik wyzwoli odpowiednie zdarzenie powodujące
konieczność pobrania danych z serwera. W tym momencie, po stronie klienta, na poziomie
JavaScript (lub innego języka skryptowego), tworzony jest obiekt XMLHttpRequest.
• następnie przy pomocy metody open() tego obiektu, określany jest URL
pobieranych danych, metoda żądania (GET lub POST) oraz sposób obsługi żądania
(asynchroniczny bądź nie – zgodnie z ideą AJAX’a powinien być oczywiście
asynchroniczny).
• jeśli
wybrano
metodę
POST,
dodatkowo
przy
pomocy
metody
setRequestHeader() ustawia się nagłówki dla żądania.
• jeśli żądanie ma być obsłużone asynchronicznie, należy do atrybutu
onreadystatechange przypisać funkcję (lub referencję do niej), która obsłuży
wynik zapytania.
• wysłanie żądania następuje przy pomocy metody send().
Dane zwracane przez serwer obsługiwane są przez wskazaną wcześniej funkcję – do
sprawdzania stanu żądania służy jego atrybut readyState przyjmujący jedną z 5 wartości:
• 0 = zapytania niezainicjowane
• 1 = połączenie z serwerem ustabilizowane
• 2 = zapytanie wysłane
• 3 = odbieranie odpowiedzi
• 4 = żądanie zakończone
Najistotniejszą jest oczywiście ostatnia z nich, która informuje o tym, że można rozpocząć
przetwarzanie odpowiedzi. Zanim to jednak nastąpi, mamy dodatkowo możliwość
sprawdzenia kodu odpowiedzi HTTP, aby upewnić się, że żądanie zostało poprawnie
obsłużone (o czym informuje kod 200) – możemy go odczytać z atrybutu status obiektu
XHR. Odebrane dane zawierają atrybuty responseText / responseXML (odpowiednio
jako tekst lub jako XML) i w zależności od tego jak chcemy je przetwarzać, korzystamy z
odpowiedniego z nich.
Wady
•
•
•
•
•
•
duże ograniczenie możliwości korzystania z historii odwiedzanych stron (a tym samym
poruszanie się do przodu i wstecz w przeglądarce). Implementacja odpowiedniego
mechanizmu spoczywa na twórcy strony. To samo tyczy się również np. tworzenia
zakładek do danego stanu aplikacji.
ograniczenie dostępu dla użytkowników celowo blokujących skrypty, czy korzystających z
urządzeń, w których obsługa skryptów może być mocno ograniczona (czytniki ekranowe,
telefony komórkowe, palmtopy…); obejściem problemu jest udostępnienie
alternatywnego, bardziej tradycyjnego rozwiązania przynajmniej dla podstawowych
funkcji serwisu internetowego (np. portale posiadające obsługę kont pocztowych
udostępniają czasem starsze wersje interfejsu)
utrudnione automatyczne pobieranie stron (z punktu widzenia właścicieli serwisu nie
zawsze jest to wada)
utrudnione indeksowanie przez wyszukiwarki (należy zadbać o dostarczanie linków
wyświetlających całą treść strony lub stworzyć mapę witryny)
utrudniona analiza ruchu na stronie (głównie przy starszych skryptach, nowsze potrafią
już uwzględnić właściwy pomiar oglądalności stron)
utrudnione debugowanie
Więcej informacji (lub jak kto woli – źródła na podstawie których powstało opracowanie)
•
•
•
•
•
•
•
http://en.wikipedia.org/wiki/Ajax_%28programming%29 (trochę teorii, głównie dla
tych co by chcieli poczytać odrobinę obszerniej o historii AJAX’a) [EN]
http://www.w3schools.com/ajax/ (biblia ;D ) [EN]
http://www.xul.fr/en-xml-ajax.html (dość obszerny i całkiem fajny tutorial) [EN]
http://www.staff.amu.edu.pl/~ttomek/pzr/cwiczenia14.html (kolejny przyzwoicie
napisany tutorial) [PL]
http://pl.wikipedia.org/wiki/Kod_odpowiedzi_HTTP (tu szukać tabelek z kodami
odpowiedzi HTTP, czyli co znaczy 200, 404, 503 itp.) [PL]
http://pl.wikipedia.org/wiki/XMLHttpRequest (szczegółowy opis metod i atrybutów
tytułowego obiektu XHR) [PL]
http://pl.wikipedia.org/wiki/AJAX (hasło tak sobie opracowane – to co najlepsze to
macie już tutaj; wrzucam link dla porządku) [PL]