Do czego przydaje się AJAX

2011-04-16 22:44

Kiedyś wymyślono, że statyczne strony WWW są nieco nudne i że trochę bardziej zaawansowanej logiki mogłoby dodać im funkcjonalności. Powstał więc język JavaScript, który po pewnym czasie (gdy minął okres wykorzystywania go do animowanych zegarków, spadających płatków śniegu i innych niepoważnych zastosowań) znacząco zyskał na funkcjonalności. Dorobił się między innymi możliwości wysyłania dodatkowych żądań HTTP, niezależnie od pierwotnego requestu, wczytującego całą stronę.
Technika ta jest znana jako AJAX, czyli Asynchronous Javascript And XML. Ten łatwo wpadający w oko akronim jest notabene jednym z najbardziej nietrafnych, jakie da się znaleźć w całej szerokiej domenie informatyki. Jest tak dlatego, gdyż żądania HTTP wysyłane ze skryptów strony WWW:

  • wcale nie muszą być asynchroniczne, chociaż zwykle są
  • wcale nie muszą być kodowane w języku JavaScript (chociaż niemal zawsze są)
  • wcale nie muszą zwracać wyniku w formacie XML, bo zwykle używa się prostszych formatów

Ważna jest tu zwłaszcza uwaga ostatnia. Chociaż API do wysyłania żądań HTTP składa się z klasy o nazwie XMLHTTPRequest, to w istocie nie ma obowiązku korzystania z wbudowanego w nią parsera XML. Równie dobrze potrafi ona zwrócić odpowiedź serwera HTTP w postaci tekstowej, którą możemy potem przetworzyć ręcznie. W praktyce chyba najbardziej popularnym formatem zwrotnym dla zapytań AJAX-owych jest opisywany już przeze mnie JSON.
Oczywiście, nikt przy zdrowych zmysłach nie pisze samodzielnie kodu do owego “przetwarzania ręcznego” odpowiedzi z serwera. Zarówno ten końcowy etap, jak i samo wysyłanie żądania zostało bowiem opakowane w kilka użytecznych frameworków. Jednym z nich jest choćby jQuery, który poza ukrywaniem zbędnych szczegółów AJAX-u posiada też mnóstwo innych przydatnych funkcji ogólnego przeznaczenia.

Do czego może przydać się możliwość łączenia się z serwerem HTTP z poziomu Javascript? Żeby znaleźć odpowiedź, wystarczy dobrze przyjrzeć się właściwie dowolnej bardziej skomplikowanej stronie internetowej..Prawie na pewno znajdziemy na niej mechanizmy, które w tle pobierają dodatkowe dane z macierzystego serwera lub wysyłają doń jakieś informacje. Dzięki temu mogą one realizować takie funkcje jak:

  • Dynamicznie pobieranie nowych treści, które pojawiły się od czasu przeładowania witryny. Ładnym przykładem takie zachowania jest Twitter. Jeśli zostawimy stronę otwartą w zakładce przeglądarki, wówczas po jakimś czasie możemy odnaleźć na niej ramkę z napisem w rodzaju “2 new tweet(s)”, po kliknięciu której zobaczymy od razu nowe statusy.
  • Doczytywanie starszych elementów w trakcie przewijania. To odwrotny (chronologicznie) przypadek do powyższego, będący alternatywą dla stronicowania. Przykładem strony świetnie stosującej to rozwiązanie jest dzone.
  • Wyświetlanie szczegółów elementu, na przykład w dymku (tooltip) po najechaniu na niego kursorem myszy lub po rozwinięciu do większej postaci. Oczywiście ma to sens głównie wtedy, gdy treść do pobrania jest na tyle duża, że nie jest rozsądne dostarczanie jej wraz z pierwotną treścią strony.
  • Wysyłanie formularzy bez przeładowywania strony. Normalnie przesłanie formularza na stronie skutkuje jej przeładowaniem w wyniku żądania typu POST (rzadziej GET). Można jednak przechwycić zdarzenie wysłania formularza i zamiast niego przesłać zapytanie AJAX-owe. Sensownym wykorzystaniem tej techniki jest weryfikacja nazwy użytkownika po wciśnięciu osobnego przycisku w formularzy rejestracyjnym do wielu serwisów sieciowych.
  • Podpowiadanie zapytań w przypadku wyszukiwania. Tutaj nietrudno o przykłady, bo robią to wszystkie wyszukiwarki internetowe ogólnego przeznaczenia, a także sporo dedykowanych mechanizmów wyszukiwania obecnych w serwisach sieciowych.
  • Synchronizacja edytowanego dokumentu (Google Docs), obsługa czata (Facebook), map (Google Maps) i wielu innych zaawansowanych logicznie aplikacji webowych.
Be Sociable, Share!
Be Sociable, Share!
Tags: , , ,
Author: Xion, posted under Internet, Programming »


6 comments for post “Do czego przydaje się AJAX”.
  1. WiecznyWem:
    April 17th, 2011 o 8:11

    Ładnie opisałeś AJAX. Czy jest szansa, że opiszesz go szerzej? Może jakiś kurs, albo praktyczne zastosowanie?

  2. Xion:
    April 17th, 2011 o 22:19

    Praktycznie zastosowanie AJAX-u jest dość ściśle zależne od konkretnej strony, więc jakiekolwiek przykłady wymagałyby pokazania współpracy między kodem klienckim w JS i odpowiednią logiką po stronie serwera. Musiałbym więc założyć co nieco o tym drugim elemencie układanki, a to nie wydaje się specjalnie rozsądne zważywszy na fakt, że liczba używanych obecnie w webdevie języków i/lub frameworków jest naprawdę spora, a różnice między nimi bywają istotne.

    Ale fakt, temat jest interesujący i można by rozszerzyć chociażby o:

    • zagadnienia związane z bezpieczeństwem wywołań AJAX-owych, takie jak same origin policy i jej “obejścia”
    • jak linkować do stron, które częściowo są generowane dynamicznie, czyli o modyfikowaniu URL-i (hashbang) i historii (w HTML5)
    • jakie są alternatywy dla ciągłego pytania serwera, czy są już nowe dane – czyli pomysły typu Comet, że o WebSocketach (HTML5) nie wspomnę
  3. Asmodeusz:
    April 18th, 2011 o 20:27

    A i tak, jak wiadomo, AJAX przydaje się tylko do trzech rzeczy: wkurzania użytkownika brakiem poprawnie funkcjonującego “Wstecz” i “Dalej”, wkurzania użytkownika z przeglądarką w no-history-porn-browse-only-get-only-never-send mode (tryb czysto pasywny) i mycia szyb (AJAX jako marka chemii gospodarczej) ;-)

    W sumie… niegłupie i użyteczne rozwiązanie, szkoda że masa twórców stron zapomina o jednym drobiazgu: nie każdy używa aktualnej przeglądarki (czy nawet dużej przeglądarki) a wypadałoby, żeby pod links/telnet ze strony też dało się jakieś podstawowe informacje wyciągnąć. Brak wersji very-lite wkurza.

  4. Piotr:
    April 21st, 2011 o 15:22

    Fajnie napisany artykuł, ale nic nowego tu nie ma :-). AJAX jest już w użyciu od paru lat. Można powiedzieć, że boom nastąpił w 2005 roku, pomimo tego, że obiekt XMLHttpRequest był w JavaScript dostępny znacznie wcześniej. Niemniej jednak, obecne rozwiązania są bardziej zaawansowane i rozbudowane względem ówczesnych.

    Odnośnie “Wstecz” i “Dalej”, to rzeczywiście standardowo biblioteki AJAX-owe tego nie obsługują w standardzie, ale da się uzyskać taką funkcjonalność.

  5. Xion:
    April 23rd, 2011 o 20:47

    W HTML5 można już manipulować historią przeglądarki, więc możliwe jest też uniknięcie AJAX-owych niedogodności związanych z dziwnym zachowaniem przycisku Wstecz. Robi to na przykład opisywany przeze mnie niedawno jQuery Mobile.

  6. Kacper Kołodziej:
    May 6th, 2011 o 19:16

    Wydaje mi się, że najczęściej używanym formatem danych jest JSON, bo bardzo łatwo radzi sobie z nim zarówno JS jak i PHP, który jest najczęściej używanym do tworzenia stron językiem. Poza tym, te same informacje zapisane w JSON zajmują mniej miejsca niż gdyby były zapisane w XML.
    Ogólnie to dobry wynalazek. Szkoda tylko, że tak różni się implementacją w różnych przeglądarkach. Ale od czego jest jQuery ;)

Comments are disabled.
 


© 2023 Karol Kuczmarski "Xion". Layout by Urszulka. Powered by WordPress with QuickLaTeX.com.