Nie ma już obecnie nowoczesnej aplikacji sieciowej, która nie korzystałaby z technologi AJAX i cieszących oko efektów wizualnych. Niestety, niskopoziomowa obsługa obu zagadnień jest żmudna i wymaga znajomości wielu szczegółowych kwestii. Biblioteka jQuery może tę pracę znacznie ułatwić, dostarczając prosty i zwięzły interfejs. Przyjrzyjmy się więc bliżej, jak stworzyć dynamiczną witrynę internetową z wykorzystaniem narzędzi JavaScriptu.
Wzrost popularności technologii AJAX przypadł na rok 2005, wraz z pojawieniem się usług firmy Google takich jak Gmail i Maps, choć sam mechanizm był dostępny w przeglądarkach internetowych już wcześniej. Dziś trudno sobie wyobrazić zaawansowane aplikacje internetowe bez tej technologii. Korzystanie z niej nie jest jednak usłane różami z dwóch zasadniczych powodów. Po pierwsze, Internet Explorer w wersji 6 i starszych wymaga użycia innego sposobu tworzenia obiektu JavaScript XMLHttpRequest odpowiedzialnego za komunikację z serwerem. Po drugie, wspomniany obiekt wymusza obsługę kilku stanów, co wiąże się z koniecznością poznania szczegółów jego budowy.
Korzystając z jQuery, unikamy wspomnianych problemów, gdyż biblioteka ukrywa przed nami całą, zbędną z punktu widzenia dewelopera aplikacji sieciowej, „bazę technologiczną”. Nie musimy nawet znać niskopoziomowego obiektu odpowiedzialnego za komunikację. Z odnoszących się do niego kwestii warto jedynie pamiętać o tym, że obecnie żądania ajaksowe za pomocą obiektu XMLHttpRequest mogą być zasadniczo realizowane tylko w obrębie tej samej domeny.
Gdy już pobierzemy dane, warto wyświetlić je użytkownikowi w przyjazny sposób, najlepiej wskazując miejsce dokonania zmian. Przeglądarki nie zawierają specjalnych obiektów efektów, więc wszystkie operacje trzeba by realizować ręcznie, tworząc dodatkowy kod wykonywany asynchronicznie (by nie blokować interfejsu użytkownika), wielokrotnie w ciągu sekundy. Zadanie to nie należy do najprostszych, szczególnie dla osób nie znających szczegółów działania DOM i funkcji czasowych JavaScript.
Także w tym aspekcie jQuery oferuje swoją pomoc, definiując kilka efektów wizualnych i dostarczając metody pozwalające w prosty sposób realizować dowolnie złożone kombinacje. W dalszej części artykułu pokażemy, jak wykorzystać te mechanizmy do tworzenia własnych efektów.
Na potrzeby pierwszego z przykładów załóżmy, że tworzymy witrynę, która na pasku bocznym przedstawiać będzie informacje o najnowszych wpisach na forum. W standardowym rozwiązaniu (pobieranie całej strony) nowe wpisy pokazują się, gdy użytkownik odwiedzi inną stronę lub przeładuje bieżącą. By być na czasie, chcemy użytkownikom z włączoną obsługą JavaScriptu umożliwić aktualizację informacji o nowych wpisach co minutę. Dodatkowo, by wskazać miejsce zmian, zastosujemy prosty efekt. Spójrzmy więc na poniższy listing:
<html> <head> <title>Moja witryna</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript"> $(function() { setInterval(function() { $("ul").slideUp('fast', function() { $(this).load("load.html", null, function() { $(this).slideDown('slow'); }); }); }, 60000); }); </script> </head> <body> <h1>Moja witryna</h1> <p>Główna treść witryny</p> <h2>Pasek boczny</h2> <ul> <li>Odp: jQuery najlepsze -- 2009-06-27 10:27</li> <li>jQuery najlepsze -- 2009-06-27 10:23</li> <li>Test -- 2009-06-27 10:21</li> </ul> </body> </html> |
| Listing 1 – Wykorzystujemy AJAX do okresowej aktualizacji zawartości strony |
Dodatkowo, oprócz standardowego pliku testowego powinniśmy stworzyć także osobny dokument load.html, który będzie zawierał aktualizowany fragment kodu:
| <li>Odp: jQuery najlepsze -- 2009-06-27 10:28</li> <li>Odp: Test -- 2009-06-27 10:28</li> <li>Odp: jQuery najlepsze -- 2009-06-27 10:27</li> |
| Listing 2 – Fragment HTML wczytywany dynamicznie za pomocą technologii AJAX |
Zanim przystąpimy do omawiania całości, warto zauważyć, że prezentowany kod strony będzie działał poprawnie, choć bez automatycznej aktualizacji, także u tych użytkowników, którzy w swoich przeglądarkach wyłączyli JavaScript. Dla wszystkich innych bieżąca zawartość co minutę będzie powoli przesuwała się do góry, by po wczytaniu nowych danych ponownie się pojawiać. Efekt rozsuwania po pobraniu nowej treści przedstawia poniższa ilustracja:
Przeanalizujmy teraz skrypt wiersz po wierszu. Jak przyzwyczaiły nas przykłady z poprzednich artykułów tej serii, cały właściwy kod znajduje się w funkcji anonimowej, wywoływanej w momencie wygenerowania całego drzewa DOM.
Drugi wiersz wykorzystuje wbudowaną w JavaScript funkcję o nazwie setInterval() pobierającą nazwę lub kod funkcji, którą należy wywoływać co wskazany w drugim parametrze przedział czasu. Czas podaje się w milisekundach, więc 60000 oznacza jedną minutę. Przeglądarka będzie wykonywała kod z funkcji co minutę tak długo, jak będzie otwarta strona WWW.
W trzecim wierszu skryptu wywołany zostaje mechanizm poszukujący na stronie elementów ul, a następnie wykonujący dla nich operację zsunięcia o nazwie slideUp(). Wbudowane w jQuery funkcje animacyjne przyjmują trzy predefiniowane wartości szybkości: fast, normal i slow. Jeśli okaże się, że żadna z nich nie jest dla nas odpowiednia, możemy także przekazać czas wykonywania efektu mierzony w milisekundach. Jako drugi parametr funkcje efektów przyjmują oznaczenie opcjonalnej funkcji zwrotnej, wykonywanej po zakończeniu animacji. Ten mechanizm stanowi podstawę jednego ze sposobów tworzenia złożonych kombinacji efektów.
Polecenia zawarte w czwartym wierszu będą wykonane po zakończeniu animacji zsunięcia. Zapis $(this) daje dostęp do dopasowanego obiektu ul. Metoda load() wczytuje do niego kod HTML znajdujący się pod adresem przekazanym w pierwszym parametrze. Drugi parametr (opcjonalny) pozwala określić dodatkowe informacje przekazywane w momencie wykonania żądania. Trzeci parametr (również niewymagany) to, podobnie jak w metodach efektów, funkcja zwrotna wykonywana po zakończeniu pobierania danych.
Zawartość piątego wiersza, dzięki funkcji zwrotnej, zostanie wykonana dopiero po zakończeniu procesu uzyskiwania informacji. W tym wypadku dla obiektu ul przeprowadzimy operację rozwinięcia, wywołując metodę slideDown(). Ponieważ nie interesuje nas moment jej zakończenia, nie przekazujemy funkcji zwrotnej.
Zauważmy, że gdyby nie efekty dodatkowe, samo pobranie nowej treści jako fragmentu HTML i wstawienie jej w wybrane miejsce moglibyśmy zrealizować za pomocą kodu postaci $('ul').load("load.html");. Okazuje się, że korzystając z dodatkowych metod zdarzeń ajaksowych dostępnych w jQuery, można oba zdarzenia od siebie oddzielić.
Ponieważ AJAX jest stosowany niezwykle często, w jQuery zdecydowano się zdefiniować kilka metod umożliwiających łatwe konstruowanie globalnych funkcji wykonywanych w różnych momentach cyklu życia żądania. Spójrzmy na poniższą tabelę:
Metody obsługi zdarzeń AJAX |
|
|---|---|
| Nazwa | Opis |
| ajaxStart() | Rozpoczęcie obsługi AJAX. |
| ajaxStop() | Zakończenie obsługi AJAX. |
| ajaxSend() | Moment tuż przed rozpoczęciem wysyłania żądania. |
| ajaxSuccess() | Otrzymanie poprawnej odpowiedzi. |
| ajaxError() | Otrzymanie błędu lub brak odpowiedzi. |
| ajaxComplete() | Zakończenie obsługi odpowiedzi, wywoływane niezależnie od sukcesu lub błędu. |
Każdą z metod wywołuje się dla wybranego elementu DOM i przekazuje jako parametr funkcję, która ma zostać wykonana. Wszystkie wspomniane metody reagują na dowolną komunikację ajaksową, chyba że jawnie wskażemy, iż powinno być inaczej.
Zaprezentowany przykład stosuje dynamiczne pobieranie danych tylko w jednym miejscu, więc możemy łatwo przenieść operacje zsunięcia i rozsunięcia odpowiednio do metod ajaxStart() i ajaxStop(). Poniższy listing przedstawia zmodyfikowany kod JavaScript, który w praktyce działa tak samo jak poprzedni:
| $(function() { $("ul").ajaxStart(function() { $(this).slideUp('fast'); }).ajaxStop(function() { $(this).slideDown('slow'); }); setInterval(function() { $("ul").load("load.html"); }, 60000); }); |
| Listing 2 – Obsługa animacji przeniesiona do funkcji zdarzeń ajaksowych |
Globalne funkcje zdarzeń są bardzo pomocne, gdy chcemy informować użytkownika o pobieraniu danych dokładnie w ten sam sposób, niezależnie od powodu inicjacji procesu. W ostatnim przykładzie wykonamy komunikat dotyczący uzyskiwania informacji znany chociażby z aplikacji Gmail lub Reader firmy Google.
Zanim zajmiemy się omówieniem najbardziej zaawansowanej i ogólnej metody jQuery dotyczącej komunikacji ajaksowej, przyjrzyjmy się kilku metodom pomocniczym, skracającym kod w standardowych sytuacjach. Spośród przedstawionych w poniższej tabeli poleceń dotychczas poznaliśmy jedynie pierwsze – load().
Metody pomocnicze komunikacji za pomocą AJAX |
|
|---|---|
| Nazwa | Opis |
| load() | Wczytuje kod HTML znajdujący się pod adresem przekazanym w pierwszym parametrze. Drugi i trzeci parametr zawierają dodatkowe dane oraz wskazują funkcję zwrotną. |
| get() | Wykonuje żądanie metodą GET z HTTP, przyjmując jako parametry adres URL, dodatkowe dane do zakodowania w adresie i funkcję zwrotną wywoływaną po zakończeniu komunikacji (udanej lub nieudanej); |
| post() | Działa identycznie jak poprzednia metoda, ale wykonuje żądanie metodą POST z HTTP i dodatkowe dane przesyła w treści żądania, a nie jako część adresu URL; |
| getJSON() | Działa jak metoda get(), ale jest nakierowana na pobieranie danych w formatach JSON lub JSONP; |
| getScript() | Specjalna wersja metody get(), która dołącza do strony kod JavaScript znajdujący się pod wskazanym adresem, co umożliwia między innymi ładowanie w locie modułów dodatkowych aplikacji. |
Wszystkie wymienione metody pomocnicze nie oferują same opcji konfiguracyjnych, takich jak: działanie synchroniczne, wymuszenie niekorzystania z cache lub maksymalny czas oczekiwania na odpowiedź. Wykorzystują one w tym celu konfigurację globalną, definiowaną poleceniem $.ajaxSetup(). Metoda ta przyjmuje tylko jeden parametr będący obiektem z właściwościami ustawionymi dla nowych danych. Oto kilka przydatnych ustawień globalnych:
Wybrane ustawienia globalne AJAX |
|
|---|---|
| Nazwa | Opis |
| async | Określa, czy komunikacja ma się odbywać asynchronicznie (true), czy synchronicznie (false). Korzystając z tego ustawienia, warto pamiętać, że dostęp synchroniczny blokuje działanie przeglądarki internetowej do czasu otrzymania odpowiedzi. |
| cache | Definiuje, czy jQuery powinien wymuszać każdorazowe pobieranie nowych danych (false), czy w miarę możliwości je buforować (true). |
| timeout | Określa czas oczekiwania na odpowiedź w milisekundach – jeśli odpowiedź nie nastąpi, jQuery wykona zdarzenie błędu. |
| jsonp | Dotyczy nazwy klucza używanego do przekazania funkcji wywołania zwrotnego do serwera (domyślnie callback). |
Po dużej dawce teorii, czas na trochę praktyki. Przypuśćmy, że w naszej witrynie chcemy wyświetlać tytuły najnowszych wpisów z bloga działającego w systemie Blogger. Standardowy AJAX nie pozwala pobierać danych znajdujących się w innej domenie, ale technika zwana JSONP umożliwiająca ominięcie tej niedogodności. JSONP też ma jednak swoje ograniczenia, między innymi dopuszcza używanie tylko i wyłącznie metody GET z HTTP.
Poniższy listing przedstawia kod strony, która wczytuje i wyświetla w formie listy tytuły pięciu najnowszych wpisów:
| <html> <head> <title>Najnowsze wpisy</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript"> <!-- $(function() { $.getJSON('http://www.blogger.com/feeds/2288246019824540336/posts/default?alt=json-in-script&max-results=5&callback=?', function(dane){ var tytuly = []; for (var i=0; i < dane.feed.entry.length; ++i) { tytuly.push(dane.feed.entry[i].title.$t); } $("ol").html('<li>' + tytuly.join('</li><li>') + '</li>'); }); }); --> </script> </head> <body> <h1>Najnowsze wpisy</h1> <ol></ol> </body> </html> |
| Listing 3 – Pobieranie i wyświetlanie najnowszych wpisów z bloga |
Efekt wykonania powyższego kodu można obejrzeć na poniższej ilustracji:
Przeanalizujmy kod, zaczynając od drugiego wiersza, w którym używamy dwuparametrowej wersji metody getJSON(). Jako pierwszy parametr przekazujemy adres URL powodujący pobranie pięciu najnowszych wpisów bloga w formacie JSON. Fragment callback=? informuje jQuery, by zamiast standardowego żądania JSON skorzystał z JSONP i tym samym pozwolił uzyskać dane z innej domeny. Drugi parametr to funkcja obsługi odpowiedzi otrzymująca pobrane informacje.
W kolejnych wierszach, od 3 do 6, wykonywane są standardowe zadania utworzenia nowej tablicy, przetwarzania w pętli otrzymanych danych (wpisów), wyodrębniania z każdego wpisu tytułu i umieszczania go w tablicy.
Dopiero w wierszu siódmym znajdziemy polecenie, które wstawi do elementu ol wygenerowaną z tytułów listę. Prezentowany kod wykorzystuje sztuczkę pozwalającą zmniejszyć czas wykonywania operacji, jeśli konieczne okaże się przetworzenie większej liczby wpisów. Metoda join() wywołana dla tablicy łączy wszystkie wpisy tekstem podanym jako parametr.
Metoda ajax() jest najbardziej zaawansowaną spośród metod obsługujących dynamiczną komunikację z serwerem, ale i najbardziej elastyczną. Przyjmuje tylko jeden parametr będący obiektem z właściwościami. Jeśli nie określi się inaczej (przez przekazanie we właściwościach nowych danych), korzysta z ustawień globalnych zdefiniowanych poleceniem $.ajaxSetup(). Metoda ajax() potrafi symulować dowolną z wcześniej prezentowanych metod. By się o tym przekonać, zmodyfikujmy przykład z listingu nr 3. Poniższyfragment prezentuje tylko kod JavaScript – pozostała część dokumentu nie uległa zmianie.
| $(function() { $.ajax({ global: false, type: 'GET', url: 'http://www.blogger.com/feeds/2288246019824540336/posts/default', data: {'alt': 'json-in-script', 'max-results': 5}, dataType: 'jsonp', success: function(dane){ var tytuly = []; for (var i=0; i < dane.feed.entry.length; ++i) { tytuly.push(dane.feed.entry[i].title.$t); } $("ol").html('<li>' + tytuly.join('</li><li>') + '</li>'); } }); }); |
| Listing 4 – Nowy kod wykorzystujący metodę ajax() |
Prezentowany skrypt przekazuje do metody ajax() kilka opcji. Oto ich krótki opis:
właściwość global ustawiona na false wyłącza dla tego żądania globalne funkcje zdarzeń ajaksowych;
właściwość type ustawia metodę GET z HTTP (wymagana przy JSONP), ale w innych wypadkach można również użyć metod POST, PUT i DELETE;
właściwość url jest obligatoryjna i określa adres URL (zauważmy, że parametry zapytania zostały z adresu usunięte);
właściwość data określa dodatkowe dane do przekazania wraz z żądaniem (w wypadku metody GET jest to alternatywa dla parametrów zapytania);
właściwość dataType określa rodzaj pobieranych danych, np. JSON, HTML, XML;
właściwość success definiuje funkcję, którą jQuery wywoła po udanym pobraniu danych.
Choć metoda ajax() daje pełną kontrolę nad wysyłanym żądaniem, to najczęściej jej wykorzystywanie łączy się z pisaniem dłuższego kodu. Jeśli więc nie potrzebujemy pełnej elastyczności, lepiej jest stosować metody uproszczone i definiować globalne ustawienia za pomocą ajaxSetup().
Biblioteka jQuery dostarcza trzy predefiniowane efekty: zanikanie i pojawianie się – metody fadeOut(), fadeIn() i fadeTo(), zsuwanie i rozsuwanie – metody slideUp(), slideDown() i slideToggle() oraz wyświetlanie i ukrywanie – metody show(), hide() i toggle().
Każda z metod, za wyjątkiem fadeTo(), przyjmuje dwa parametry: szybkość animacji (patrz wcześniejsza część artykułu) i opcjonalną funkcję zwrotną wywoływaną po jej zakończeniu. Metoda fadeTo() dysponuje aż trzema opcjami ustalającymi: szybkość, docelową przezroczystość i funkcję zwrotną.
Metody fade... odpowiadają za zmianę przezroczystości elementów, slide... – modyfikują ich wysokość, zaś show() i hide() animują jednocześnie wysokość, szerokość i przezroczystość, dając ciekawy efekt dwuwymiarowego rozwijania. Metody z toggle w nazwie to metody pomocnicze, które naprzemiennie wywołują jedną z dwóch głównych metod animacyjnych – dzięki nim oszczędzimy sobie pisania dłuższego kodu, jeśli animacja zależna będzie na przykład od stanu przycisku. Część metod przećwiczyliśmy już we wcześniejszym przykładzie, kilkoma innymi zajmiemy się w ostatnim fragmencie kodu prezentowanym w tym odcinku kursu.
Jeśli nie zależy nam na animacji i chcemy po prostu ukryć lub wyświetlić element, możemy skorzystać z metod show(), hide() lub toggle() bez podawania argumentów. W takiej sytuacji operacja wykonana zostanie natychmiast.
Zanim przejdziemy do najbardziej elastycznej metody animate(), warto jeszcze wspomnieć o metodzie i właściwości związanej z wyłączaniem efektów przejściowych. Ustawienie wartości właściwości $.fx.off jako true na stałe wyłącza wszystkie animacje – w tym trybie jQuery natychmiast przechodzi do stanu docelowego. Metoda stop() zatrzymuje aktualnie trwająca animację elementu, jeśli pierwszy parametr będzie równy false. Przekazanie wartości true spowoduje anulowanie wszystkich efektów obiektu, także tych będących w kolejce.
Podczas gdy wymienione wcześniej metody animacji ograniczają się do modyfikacji wymiarów, widoczności lub przezroczystości, metoda animate() umożliwia niemalże dowolne, płynne zmiany właściwości CSS elementów. Animacje można kolejkować (wykonywać jedna po drugiej) lub realizować równolegle. Działanie tej metody najlepiej zaprezentować na przykładzie.
Poniższy listing przedstawia kod, który pozwoli nam stworzyć prostą animację kwadratu. Obiekt w pierwszym etapie zmieni kolor z czerwonego na niebieski i jednocześnie przemieści się po skosie w dół i w prawo, następnie zostanie przeniesiony do góry, zmieniając przezroczystość, a na końcu przesunie się w lewo, powracając do wyjściowych wartości koloru i przezroczystości.
| <html> <head> <title>Animacja</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script> <style> div { position: absolute; width: 100px; height: 100px; top: 50px; left:50px; background-color: #f00} </style> <script type="text/javascript"> function cykl() { $('div').animate({backgroundColor: '#0000ff', top: '250px', left: '250px'}, 1000) .animate({opacity: 0.4, top: '-=200px'}, {duration: 1000, easing: "linear"}) .animate({opacity: 1, left: '50px', backgroundColor: '#ff0000'}, 500, 'swing', cykl); }; $(function() { cykl(); }); </script> </head> <body> <h3>Animacja</h3> <div></div> </body> </html> |
| Listing 5 – Kod cyklicznej animacji kwadratu |
Na poniższej ilustracji można zobaczyć efekt wykonania przedstawionego fragmentu kodu:
Zauważmy, że kod wczytuje bibliotekę dodatkową o nazwie jQuery UI. Powinniśmy ją dodać do naszego projektu, jeśli chcemy animować kolory elementów (tło, kolor podstawowy, kolor obramowania). Standardowo jQuery animuje bowiem tylko numeryczne właściwości CSS. Poza wczytaniem wymienionej biblioteki nie musimy jednak wykonywać już żadnych dodatkowych kroków – jQuery zacznie bowiem automatycznie rozpoznawać w animacji notację dotyczącą kolorów (nawet ich nazwy).
Cały cykl animacji znajduje się w osobnej funkcji cykl(), by można go było powtórzyć. Jeśli dla jednego elementu definiujemy po kolei kilka animacji, domyślnie wykonają się one jedna po drugiej, więc trzy wywołania animate() pozwalają osiągnąć opisany wcześniej efekt.
Pierwszym parametrem metody animate() jest zawsze obiekt określający właściwości CSS, które chcemy animować. Wskazują one albo bezwzględne docelowe wartości na koniec animacji (np. 250px), albo względną zmianę wartości w trakcie animacji (np. -=200px).
Metoda obsługuje dwa sposoby określania opcji efektu: jako obiektu z właściwościami opisującymi zachowanie animacji (w naszym przykładzie drugie wywołanie metody) lub jako trzech dodatkowych parametrów: czasu trwania, sposobu wykonania i funkcji zwrotnej (pierwsze i trzecie wywołanie metody). Biblioteka jQuery domyślnie obsługuje dwa sposoby wykonywania efektu: liniowy (linear) i ze spowolnieniem na końcu (swing). Możemy również tworzyć kolejne schematy, korzystając z modułów dodatkowych jQuery.
Czwarty parametr ostatniego wywołania metody przekazuje nazwę funkcji do wywołania na zakończenie. Ponieważ jest to funkcja definiująca cały cykl, uzyskujemy zapętlenie.
W ostatnim praktycznym przykładzie w tej części cyklu rozbudujemy prezentowany wcześniej skrypt czytnika najnowszych wpisów o następujące elementy: powiadamianie użytkownika o pobieraniu danych, doczytywanie osobnymi żądaniami podsumowań (w wypadku API Bloggera nie jest to co prawda konieczne – dane są dostępne po głównym żądaniu – ale w ten sposób wzbogacimy nasz przykład) oraz efekt ich wyświetlania. Spójrzmy więc na poniższy fragment kodu:
| <html> <head> <title>Czytnik</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <style> #czytam { position: fixed; font-size: 10px; top: 0; left:0; background-color: #f00} body { width: 600px; margin: 0 auto;} </style> <script type="text/javascript"> <!-- $(function() { $("#czytam").ajaxStart(function() { $(this).show(); }).ajaxStop(function() { $(this).fadeOut('slow'); }).hide(); $.getJSON('http://www.blogger.com/feeds/2288246019824540336/posts/default?alt=json-in-script&max-results=5&callback=?', function(dane){ var tytuly = []; var adresyUrl = []; for (var i=0; i < dane.feed.entry.length; ++i) { tytuly.push('<li id="l' + i + '"><p>' + dane.feed.entry[i].title.$t + '</p><div id="d' + i + '"></div></li>'); adresyUrl.push(dane.feed.entry[i].link[3].href); } $("ol").html(tytuly.join('')) .find('li').one('click', function() { var ident = $(this).attr('id').substring(1); $.getJSON(adresyUrl[parseInt(ident)] + '?alt=json-in-script&callback=?', function(dane) { $('#d' + ident).hide().text(dane.entry.summary.$t).show('slow'); }); }); }); }); --> </script> </head> <body> <h1>Czytnik</h1> <ol></ol> <p id="czytam">Wczytywanie danych...</p> </body> </html> |
| Listing 6 – Lista najnowszych wpisów z doczytywaniem podsumowań |
Poniższa ilustracja prezentuje wygląd strony chwilę po otrzymaniu danych podsumowania. Warto zwrócić uwagę na zanikający komunikat o pobieraniu informacji. Polecamy także przykład na żywo.
Kilka pierwszych wierszy kodu JavaScript tworzy funkcje zdarzeń ajaksowych odpowiedzialne za natychmiastowe wyświetlanie komunikatu o pobieraniu danych (metoda show()) i jego powolne zanikanie po zakończeniu komunikacji (metoda fadeOut()). Ostatnia z metod łańcucha wywołań (hide()) zapewnia wstępne ukrycie informacji.
Wiersze 7 i 8 skryptu zostały bez zmian przeniesione z pierwotnego przykładu. Już w wierszu 9 znajdziemy jednak definicję dodatkowej tablicy do przechowywania adresów URL z danymi poszczególnych wpisów.
Kolejne polecenia umieszczają w tablicy kod HTML dla pojedynczej informacji, zapamiętując oznaczenie jego indeksu w atrybucie id. Dodatkowo przygotowany zostaje element div dla podsumowań. Adres URL wpisu program zapamięta w dodatkowej tablicy, stosując ten sam indeks.
Następnie do elementu ol zostaje wpisany kod HTML stanowiący połączenie wszystkich wygenerowanych wcześniej, a teraz wyszukanych elementów li. Do tych ostatnich przyporządkujemy jeszcze działającą jednokrotne funkcję zdarzenia kliknięcia. Kolejne polecenie wydobywa z elementu li identyfikator, a następnie usuwa pierwszy znak, by uzyskać indeks.
Teraz można już wysłać żądanie do serwera, generując adres URL do pobrania na podstawie zapamiętanego w tablicy adresu, wydobytego indeksu oraz parametrów dodatkowych.
Na zakończenie całość informacji wpiszemy do odpowiedniego, wcześniej ukrytego elementu div i później, za pomocą metody show(), pokażemy go użytkownikowi.
Wykorzystanie AJAX oraz zastosowanie w projektowanym interfejsie prostych efektów i animacji z jQuery okazuje się czystą przyjemnością. W artykule przedstawiono tylko drobny fragment tego, co jest możliwe do wykonania za pomocą kilku omówionych metod. Warto pamiętać, że elastyczność jQuery umożliwia nam korzystanie w dziedzinie komunikacji i efektów wizualnych z rozwiązań uproszczonych, ale jeśli tylko okaże się to konieczne, framework udostępni także zaawansowane metody ajax() i animate(). W kolejnym odcinku kursu poznamy szczegóły zaawansowanej obsługi modelu DOM.