Nowe oblicze Internetu

Ajax, o którym mowa w tym artykule, nie ma nic wspólnego z popularnym środkiem czyszczącym. To pomysł na wykorzystanie kilku internetowych technologii, który zainteresował nie tylko komputerowych entuzjastów, ale także poważne firmy, jak Microsoft, Google czy Yahoo.


Ajax, o którym mowa w tym artykule, nie ma nic wspólnego z popularnym środkiem czyszczącym. To pomysł na wykorzystanie kilku internetowych technologii, który zainteresował nie tylko komputerowych entuzjastów, ale także poważne firmy, jak Microsoft, Google czy Yahoo.

Nowe oblicze Internetu

Ajax, o którym mowa w tym artykule, nie ma nic wspólnego z popularnym środkiem czyszczącym. To pomysł na wykorzystanie kilku internetowych technologii, który zainteresował nie tylko komputerowych entuzjastów, ale także poważne firmy, jak Microsoft, Google czy Yahoo.

Można bez przesady powiedzieć, że ta koncepcja zmieni oblicze internetowych aplikacji. Bo Ajax (Asynchronous JavaScript and XML - asynchroniczny JavaScript i XML) sprawia, że przeglądarka służy nie tylko do przeglądania stron WWW, ale staje się też, na równi z systemem operacyjnym, platformą uruchamiania aplikacji. Najciekawsze przykłady zastosowań Ajaksa omawiamy w innych artykułach na kolejnych stronach w tym wydaniu. W tym miejscu wyjaśniamy, czym jest Ajax.

Zbiór technologii

Tradycyjny, synchroniczny model komunikacji przeglądarki z serwerem (u góry) i asynchroniczny model Ajaksa (u dołu).

Tradycyjny, synchroniczny model komunikacji przeglądarki z serwerem (u góry) i asynchroniczny model Ajaksa (u dołu).

Ajax, podobnie jak DHTML, właściwie nie jest technologią, ale pomysłem na łączne wykorzystanie kilku dobrze znanych technologii: XHTML lub HTML, CSS, JavaScript, DOM, XML, oraz XMLHttpRequest. Odpowiednie zastosowanie powyższych składników daje rewolucyjny efekt: przeglądarka internetowa zaczyna w tle wymieniać małe porcje danych z serwerem i wyświetlać zmiany bez przeładowywania całej strony WWW. Pozwala to na większą interaktywność i funkcjonalność oraz szybsze wyświetlanie treści, a w praktyce umożliwia m.in. tworzenie aplikacji działających w oknie przeglądarki i funkcjonujących jak tradycyjne, uruchamiane w systemie operacyjnym, np. klient pocztowy Gmail czy edytor tekstu ajaxWrite. Przykłady można mnożyć.

Poszczególne składniki ajaksowej mieszanki spełniają następujące funkcje:

  • XHTML lub HTML oraz CSS służą do formatowania wyświetlanych treści.
  • DOM (obiektowy model dokumentu), wywoływany z wykorzystaniem języków skryptowych typu JavaScript i JScript, pozwala na dynamiczne wyświetlanie i interakcję z wyświetlaną zawartością.
  • XMLHttpRequest, zastosowany w większości przeglądarek WWW, umożliwia asynchroniczną wymianę danych z serwerem; z rzadka jest zastępowany obiektem IFrame.
  • XML jest formatem wymiany danych między przeglądarką i serwerem, ale można zastosować dowolny format, np. HTML lub czysty tekst.

Asynchroniczny?

Tradycyjna, trójwarstwowa architektura aplikacji internetowych (u góry) w porównaniu z architekturą Ajaksa (u dołu).

Tradycyjna, trójwarstwowa architektura aplikacji internetowych (u góry) w porównaniu z architekturą Ajaksa (u dołu).

W klasycznym modelu większość czynności użytkownika w przeglądarce WWW powoduje wysłanie żądania HTTP do serwera. Serwer odbiera żądanie, przetwarza je i zwraca kod strony WWW do przeglądarki. A co robi w tym czasie użytkownik? Czeka na przeładowanie strony. I tak za każdym razem, gdy kliknie gdziekolwiek w przeglądarce. Jak widać, reakcje serwera są zsynchronizowane z działaniami użytkownika (patrz ilustracja).

Ajax eliminuje cykl działania - oczekiwanie, pozwalając użytkownikowi na asynchroniczną interakcję ze stroną WWW. Na początku interfejs aplikacji internetowej zostaje wczytany do przeglądarki, a później można już z niej korzystać, nie czekając na odpowiedź serwera po wykonaniu każdej czynności. Co więcej, użytkownik może nawet nie zauważać, że ajaksowa strona komunikuje się z serwerem.

Asynchroniczną komunikację realizuje się, stosując napisany w JavaScripcie silnik Ajax w roli pośrednika między przeglądarką WWW a serwerem. Na początku sesji przeglądarka wczytuje go, zamiast jak zwykle stronę internetową. Silnik ma dwa zadania: wyświetlać stronę w przeglądarce i komunikować się z serwerem. Dzięki niemu użytkownik może korzystać ze strony czy aplikacji internetowej niezależnie od komunikacji z serwerem. Koniec wpatrywania się w puste okno przeglądarki i kursor w kształcie klepsydry w czasie oczekiwania na przeładowanie strony.

Każda czynność użytkownika, która standardowo generowałaby żądanie HTTP, przyjmuje formę wywołania, przesyłanego z wykorzystaniem JavaScriptu do silnika Ajax. Odpowiedź na działania użytkownika nie wymaga za każdym razem komunikacji z serwerem. Dotyczy to takich operacji, jak sprawdzanie poprawności danych, edycja danych w pamięci, a także nawigacja na stronie - tym silnik zajmuje się sam. Komunikacja z serwerem następuje, gdy trzeba wczytać dodatkową porcję kodu czy nowe informacje lub przesłać dane do przetworzenia.

Zalety

Ajaksowe aplikacje są uruchamiane głównie w komputerze użytkownika, a modyfikacja strony dokonuje się w przeglądarce WWW z wykorzystaniem obiektowego modelu dokumentu. Ajaksa można używać do edycji danych zapisanych na serwerze, do tworzenia zaawansowanych formularzy, zwracania wyników wyszukiwania czy edycji drzewa kategorii. Wszystkie te zadania są wykonywane bez przeładowywania całej strony w przeglądarce. Z reguły do serwera wysyłane jest żądanie zwrócenia tylko niewielkiej porcji danych.

Wady

Jednym z najczęściej wymienianych problemów jest zmiana działania przycisku Wstecz (Back) w przeglądarce WWW. Internauci są przyzwyczajeni, że naciśnięcie tego przycisku przenosi do ostatnio wczytanej strony, natomiast po wejściu na stronę i wykonaniu kilku czynności naciśnięcie przycisku Wstecz powoduje powrót nie do stanu strony z Ajaksem, ale poprzedniej statycznej strony. Po prostu wczytywanie kolejnych porcji kodu tą techniką nie powoduje dodania nowych pozycji do listy odwiedzonych witryn. Programiści radzą sobie z tym problemem na różne sposoby, np. stosując ukryte obiekty IFRAME.

Pokrewnym problemem jest dodanie do listy ulubionych stron odnośnika do określonego stanu aplikacji działającej z wykorzystaniem Ajaksa. Rozwiązaniem jest stosowanie specjalnych adresów URL, których część po znaku # (tzw. URL fragment identifier) jest opisem bieżącego stanu aplikacji i pozwala na powrót do niego. W większości przeglądarek można z wykorzystaniem JavaScriptu na bieżąco aktualizować adres URL, gdy użytkownik wykona jakąś czynność.

Kolejnym problemem jest tempo komunikacji między serwerem i przeglądarką. Gdy będzie za wolne, wydłuży się okres między wysłaniem żądania i przyjściem odpowiedzi od serwera. Użytkownik może obserwować wtedy opóźnienia w działaniu interfejsu ajaksowej aplikacji. Efekt ten łagodzi asynchroniczna natura komunikacji z serwerem.

Wprawdzie Ajax nie wymaga instalowania żadnej wtyczki w przeglądarce WWW, trzeba jednak włączyć obsługę JavaScriptu, a dodatkowo w Internet Explorerze 6 obsługę ActiveX, ponieważ w XMLHttpRequest zastosowano właśnie tę technologię. IE 7 ma obsługiwać XMLHttpRequest bez włączania ActiveX.

Mówią wieki

Na koniec warto wspomnieć o historii rozwoju technik asynchronicznej komunikacji. Termin "Ajax" jest stosunkowo nowy - pierwszy raz użyto go publicznie na początku 2005 roku - ale techniki asynchronicznej komunikacji z serwerem i aktualizacji zawartości bez przeładowywania całej strony pojawiły się już dziesięć lat wcześniej. W 1996 roku Microsoft wprowadził do Internet Explorera 3.0 służący do tego element IFRAME, a w 1997 roku w przeglądarce Netscape pojawił się element LAYER. Z elementu LAYER zrezygnowano w początkowym stadium prac nad Mozillą.

W 1998 Microsoft wprowadził Remote Scripting, który zastąpił obie wspomniane techniki. Działał w przeglądarkach IE oraz Netscape, a do asynchronicznej komunikacji wykorzystywał aplet Java. Pierwszy raz tę technikę Microsoft zastosował w Outlook Web Access, kliencie pocztowym działającym w oknie przeglądarki.

Nad dalszym rozwojem technik Remote Scripting pracowała społeczność programistów skupiona wokół grupynews://dyskusyjnejmicrosoft.public.scripting.remote . W 2002 roku do Remote Scripting wprowadzono przygotowaną przez nią modyfikację - XMLHttpRequest zastąpił aplet Java.