AJAX

(ang. Asynchronous JavaScript and XML – asynchroniczny JavaScript i XML) – technologia tworzenia aplikacji internetowych, w której interakcja z użytkownikiem odbywa się bez przeładowywania całej strony. AJAX jest powszechnie używany w serwisach Web 2.0.
AJAX powstała w roku 1996 gdy Microsoft przedstawił technologię Remote Scripting. Innymi elementami wykorzystywanymi był znacznik IFRAME (tzw. pływająca ramka) zaprezentowany w przeglądarce Internet Explorer 3 oraz element LAYER (tzw. warstwa), zaprezentowana w przeglądarce Netscape 4 w 1997 roku). Obydwa znaczniki posiadały atrybut SRC, który pozwalał na załadowanie dowolnej treści z zewnątrz bez przeładowywania całej strony. Obydwa te elementy połączone ze sobą stały się podstawą DTHMLa (tzw. dynamicznego HTML’a). Z kolei firma Macromedia Flash od wersji 4 Flasha pozwalała na załadowanie plików XML i CSV z serwera bez odświeżania całej witryny. Microsoft’s Remote Scripting (zwany od 1998 roku MSRS) był najbardziej „elegancką” formą podmiany zawartości witryny przy użyciu odpowiedniej aplikacji w języku JavaScript. Rozwiązanie to działało w Internet Explorer 4 i Netscape Navigator 4. Potem Microsoft stworzył obiekt XMLHttpRequest w Internet Explorer 5 i przedstawił zalety tej technologii w aplikacji webowej Outlook Web Access (webowego odpowiednika „klasycznej” aplikacji Outlook) wchodzącej w skład Microsoft Exchange Server 2000.
Internetowa społeczność programistów i web-deweloperów, działająca najpierw na grupie dyskusyjnej microsoft.public.scripting.remote a później na blogach, opracowała szeroką gamę rozwiązań opartych na wielu przeglądarkach internetowych.

AJAX swoją nazwę zdobył dopiero w lutym 2005 roku, dzięki Jesse James Garrettowi i jego artykułowi „AJAX: nowe podejście do aplikacji” internetowych przedstawiającemu nową wizję i metodę tworzenia aplikacji webowych. Nazwa została ponoć wymyślona pod prysznicem…
Szeroka ekspansja AJAXa rozpoczęła się od takich serwisów jak Google Suggest (http://www.google.com/webhp?complete=1&hl=en), Gmail (http://mail.google.com/) oraz Google Maps (http://maps.google.com/). Serwisy te zapoczątkowały modę na technologię AJAX i pokazały jakie możliwości niesie ona za sobą.
AJAX nie jest nowym językiem czy nową technologią, nie wprowadza nowych elementów czy języków, ale łączy ze sobą znane dotąd elementy i technologie, takie jak HTML lub XHTML, kaskadowe arkusze stylów (CSS), JavaScript, obiektowy model dokumentu, XML, XSLT oraz XMLHttpRequest.
Wykorzystanie technologii AJAX powoduje, że aplikacje sieciowe są w stanie dokonywać szybkich, przyrostowych aktualizacji w interfejsie użytkownika bez potrzeby przeładowywania całej strony w przeglądarce. To sprawia, że aplikacja wydaje się szybsza i lepiej reaguje na akcje użytkownika. Niestety to powoduje, iż przycisk „Wstecz” w przeglądarce staje się bezużyteczny, gdyż próba cofnięcia się w historii nie odwraca zmian wprowadzonych na stronie (podobną wadą charakteryzuje się technologia Flash).
W tradycyjnej aplikacji sieciowej wykonanej w JavaScript aby pobrać dane z pliku, bazy lub serwera, należy stworzyć formularz w języku HTML wykorzystujący metodę GET lub POST wysyłającą żądanie do serwera. Użytkownik po kliknięciu przycisku „Wyślij” wysyła do serwera zapytanie, czeka na jego odpowiedź, po czym w przeglądarce ładuje się strona z rezultatami zapytania. Ponieważ każde zapytanie do serwera powoduje przeładowanie całej strony internetowej za każdym razem, stąd tradycyjna aplikacja działa wolno i wydaje się nieprzyjazna dla użytkownika. AJAX zmienia całkowicie podejście do programowania, tworzenia i działania aplikacji webowych.

Zamiast ładować całą stronę, przeglądarka ładuje na początku AJAXowy silnik strony wykonany w JavaScripcie. Silnik ten jest odpowiedzialny za tworzenie widzialnego interfejsu aplikacji (czyli strony internetowej i elementów na niej się znajdujących) oraz za komunikację aplikacji z serwerem. Silnik AJAXa pozwala na asynchroniczną interakcję użytkownika ze stroną – niezależną od komunikacji z serwerem. Dzięki temu użytkownik nigdy nie wpatruje się w pusty ekran okna przeglądarki czy też kursor z klepsydrą w oczekiwaniu na załadowanie się strony. Każda akcja ze strony użytkownika w standardowej aplikacji internetowej generuje zapytanie HTTP. W tym jednak przypadku zapytanie kierowane jest do AJAXowego silnika strony. Każda akcja, która nie wymaga żądania danych od serwera (np. walidacja wprowadzonych do formularza danych, obliczenia, przetwarzanie danych załadowanych do pamięci), jest przetwarzana lokalnie. Jeśli silnik wymaga jednak danych od serwera, wysyła zapytanie do serwera w tle, nie powodując przerw w działaniu aplikacji. Gdy zapytanie zostanie przetworzone, jego wynik zostaje wyświetlony na ekranie zastępując wynik poprzedniego zapytania. Użytkownik pozostaje cały czas na tej samej stronie i w większości przypadków nawet nie zauważa wysyłanych i przetwarzanych w tle zapytań do serwera. Otrzymuje od razu wynik zapytania.

Obiekt XMLHttpRequest jest obsługiwany przez następujące wersje przeglądarek:

  • Internet Explorer 5.0 i wzwyż,
  • Safari 1.2,
  • Mozilla 1.0 / Firefox,
  • Opera 8+,
  • Netscape 7.

    Zalety i wady AJAXa

    I. Interfejs użytkownika
    Najważniejszym celem i zaletą AJAXa jest usprawnienie interfejsu użytkownika. Strony AJAXowe wydają się bardziej samodzielne i autonomiczne niż typowe witryny Web 1.0. Kliknięcie na link na klasycznej witrynie powoduje odświeżenie całego okna przeglądarki, co wydaje się operacją „ciężką”. Z AJAXem strona może być aktualizowana kawałkami często pozwalając na szybsze odpowiedzi na reakcję użytkownika.

    II. Użycie łączy internetowych
    Generowanie całego kodu lokalnie w przeglądarce i ściąganie tylko aktualnie potrzebnych danych powoduje, że strony AJAXowe mogą ładować się szybciej, wykorzystując mniejsze pasmo łącza internetowego i zużywając mniejszą ilość zazwyczaj płatnego transferu na serwerze. Dodatkowo zazwyczaj przesyłane są surowe dane w formacie XML, a szablon strony, który nierzadko stanowi nawet ponad połowę rozmiaru strony jest przesyłany tylko raz.

    III. Oddzielenie treści od formy, danych od wyglądu
    Kolejnym profitem korzystania z AJAXa jest dążenie do oddzielenia treści od formy strony internetowej. Dane (treść) przesyłane są zazwyczaj w formacie XML. Dane te trafiają dopiero do etapu wizualizacji, który można w łatwy sposób modyfikować i zmieniać. Przyjęto, że w technologii AJAX wygląd wszystkich elementów strony jest sterowany dzięki stylom CSS. To pozwala w łatwy sposób sterować wizualizacją.
    Funkcjonalność strony zależy od 3 czynników:
    a) mechanizmu obsługi JavaScript przeglądarki po stronie użytkownika
    b) warstwy pośredniej między użytkownikiem a serwerem – silnik AJAXa
    c) skryptów typu server-side wykonywanych po stronie serwera
    Odpowiednie dopasowanie tych trzech elementów pozwala na zbudowanie idealnego i niezawodnego serwisu Web 2.0.

    IV. Przeglądarka integralną częścią serwisu
    Dynamicznie tworzenie strony nie powoduje zapisania każdego przeładowania elementu na stronie w historii odwiedzanych stron przeglądarki. Stąd użycie przycisku „Wstecz” w sposób, który zapewne życzyłby sobie użytkownik nie jest możliwe. Deweloperzy próbują różnymi sposobami rozwiązać ten problem. Serwis Google Maps używa niewidzialnej pływającej ramki IFRAME, do której ładuje wyniki wyszukiwania, po czym dopiero wyświetla ją na ekranie użytkownika. Organizacja World Wide Web Consortium (W3C) nie włączyła jednak znacznika IFRAME do specyfikacji języka XHTML 1.1 i sugeruje użycie znacznika OBJECT.
    Dynamiczna strona uniemożliwia również dodanie jej do zakładek w pewnym określonym stanie, np. po wywołaniu pewnych danych za pomocą formularza i zwróceniu wyników wyszukiwania. Zazwyczaj więc po kliknięciu w zapisaną wcześniej zakładkę zamiast wyników wyszukiwania otrzymamy stronę główną serwisu. Rozwiązaniem może być fragment identyfikatora adresu URL po znaku krzyżyka „#”. Wtedy zazwyczaj działa również przycisk „Wstecz” przeglądarki. Niestety nie jest to wystarczającym rozwiązaniem we wszystkich przypadkach.

    V. Czas odpowiedzi
    Podczas projektowania serwisu AJAXowego należy wziąć pod uwagę opóźnienie sieci, czas odpowiedzi serwera i czas reakcji użytkownika. Bez jasnej informacji dla użytkownika o tym co się w chwili obecnej dzieje na ekranie, przez nieodpowiednie serwowanie zwracanych danych, brak mądrze rozwiązanego preloadowania (wcześniejszego pobierania danych przed wizualizacją ich na ekranie) danych i niezoptymalizowaną obsługę zapytań obiektu XMLHttpRequest, użytkownik może doświadczyć opóźnień w działaniu interfejsu, których może się nie spodziewać lub nie rozumieć. W Web 1.0 jeśli strona się przeładowywuje w całości, użytkownik wie, że musi chwilę odczekać i naocznie widzi ile już się załadowało i ile brakuje do końca. Jeśli jednak przeładowywana jest tylko mała porcja danych, a opóźnienie jest identyczne, to jest to bardziej zauważalne i dotkliwe dla użytkownika. Stąd zalecane jest stosowanie komunikatów czy jasnych oznaczeń dla użytkowników o przetwarzaniu zapytania (np. pasek postępu, znikający samoczynnie komunikat o ładowaniu, zaciemnianie tła aplikacji na czas ładowania krytycznych do jej działania danych etc.)

    VI. Optymalizacja dla wyszukiwarek internetowych
    Strony w AJAXie, które używają danych, które powinny zostać zaindeksowane przez roboty indeksujące wyszukiwarek internetowych, muszą dostarczać te dane w sposób publiczny, jawny jako możliwe do zlinkowania zasoby w formacie, który robot wyszukiwarki może przeczytać. Robot indeksujący nie czyta kodu JavaScript niezbędnego w technologii AJAX. Stąd należy mu zaserwować dane w postaci statycznych stron. Gdy już użytkownik wejdzie na naszą stronę, po wykryciu obsługi AJAXa, można mu już zaserwować dynamiczną formę strony. Przydatnym i rozumianym przez roboty indeksujące jest znacznik <NOSCRIPT> </NOCSRIPT>.

    VII. Poleganie na JavaScript
    AJAX opiera się na języku JavaScript, który może być inaczej interpretowany na różnych przeglądarkach i ich wersjach. Stąd strona powinna być testowana na wielu różnych platformach sprzętowych w celu zapewnienia pełnej kompatybilności. Zazwyczaj kod musi być pisany dwa razy: raz dla przeglądarki Internet Explorer, raz dla przeglądarek kompatybilnych z Mozillą.
    Kolejnym problemem jest to, że trzeba zapewnić działanie strony (przynajmniej podstawowe) w przypadku gdy użytkownik wyłączy obsługę JavaScript.

    VIII. Dostępność
    Twórca strony w AJAXie napotka wiele wyzwań związanych z dostępnością strony dla wielu platform sprzętowo-programowych i dla osób niepełnosprawnych. Dobry serwis powinien spełniać wymogi standardu WAI (Web Accessibility Initiative) – zbioru reguł opracowanych przez organizację standaryzacyjną W3C (World Wide Web Consortium). Webmaster powinien zapewnić działanie aplikacji internetowej w wielu przeglądarkach i wielu konfiguracjach. Należy przewidzieć taką sytuację, że użytkownik wyłącza JavaScript w swojej przeglądarce, lub chce skorzystać z tekstowej przeglądarki internetowej. Wtedy należy zaserwować użytkownikowi wersję alternatywną strony, która nie będzie się już opierała na AJAXie, ale zapewni przynajmniej w większości te funkcje, które posiadała wersja AJAXowa.

    Użytkownicy trafili tutaj szukając: synchroniczne a asynchorniczne odswiezanie strony