Kurs jQuery. Część 3: Dynamiczna witryna. AJAX i efekty interfejsu

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.

Spis treści
Wprowadzenie Prosty przepis na dynamiczną stronę WWW Metody zdarzeń ajaksowych AJAX w pełni kontrolowany Pobieranie danych z zewnętrznej usługi – przykład Metoda ajax() Efekty – miły oku interfejs zawsze w cenie Metoda animate() Na zakończenie – przykład praktyczny Podsumowanie

Spis treści

Wprowadzenie
Prosty przepis na dynamiczną stronę WWW
Metody zdarzeń ajaksowych
AJAX w pełni kontrolowany

Efekty – miły oku interfejs zawsze w cenie

Metoda animate()

Na zakończenie – przykład praktyczny
Podsumowanie

Wprowadzenie

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.

«poprzednia 1 2 3 4 ... 10 następna »

Podoba Ci się ten tekst? Powiedz o tym innym na Fb: lub na G+:

publikuj:

wydrukuj

6 skomentuj »

Komentarze

#1 matiiiiii 2009-09-09 10:39:09 0
jestem slepy albo nie widze wersji live zrobionego przykładu? siedze sobie pozadomem i chiałbym zobaczyc efekt działania tego a tu zonk nie ma :) ciesze sie ze powstał ten kurs ale czy jest mozliwosc dodawania linka z przykładem działającym?
IP: 83.13.247.[...] Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; pl; rv:1.9.0.13) Gecko/2009073021 Firefox/3.0.13
#2 albatros^® 2009-09-09 15:24:08 0
Również proszę o jakieś demo ;)
IP: 87.205.240.[...] Opera/9.80 (X11; Linux i686; U; pl) Presto/2.2.15 Version/10.10
#3 Marcin Modestowicz^® 2009-09-12 10:50:30 0
Przykład w wersji "live" dodany, zgodnie z życzeniem.
IP: 83.9.188.[...] Mozilla/5.0 (Windows; U; Windows NT 6.0; pl; rv:1.9.0.13) Gecko/2009073022 Firefox/3.0.13 (.NET CLR 3.5.30729)
#4 MicNeo^® 2009-09-21 21:26:07 0
A ja mam takie pytanie odnośnie podstrony 5. Jest tam taki link: http://www.blogger.com/feeds/2288246019824540336/posts/default?alt=json-in-script&max-results=5&callback=?

Pytanie, jak coś takiego zrobić dla np wordpressa? Nie rozumiem skąd się ten link wziął.

pzd.
IP: 89.174.30.[...] Mozilla/5.0 (Windows; U; Windows NT 5.1; pl; rv:1.9.1.3) Gecko/20090824 Firefox/3.5.3
#5 archer 2010-03-19 11:10:25 0
Witam. Jak za pomocą JSON pobrać cały element DIV znajac jego ID ? ALbo jak sie odnieść do konkretnego elementu strony? Strona jeste generowana pezez php.
IP: 193.19.165.[...] Mozilla/5.0 (Windows; U; Windows NT 5.1; pl; rv:1.9.2) Gecko/20100115 Firefox/3.6
#6 starr^® 2011-01-02 10:57:48 0
Animacja w Jquery jest jednak bolesna dla IE nawet w wersji 8.0

Okazuje się mianowicie, jQuery nie radzi sobie z animacją bloków zawierających teksty zapisane czcionką z atrybutem bold (po animacji litery są wyraźnie postrzępione), problem dotyczy też plików PNG zawierających cienie lub inne przejścia przeźroczystości, w efekcie pojawia się fatalnie wyglądająca czarna obwódka.

Ja widzę temat już dawno nie aktualizowany, ale może autor zna rozwiązania dla tych problemów?
IP: 83.18.228.[...] Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US) AppleWebKit/534.10 (KHTML, like Gecko) Chrome/8.0.552.224 Safari/534.10

Aby dodać komentarz, musisz podać swój nick, treść komentarza oraz poprawnie przepisać oba słowa z obrazka (słowa muszą być rozdzielone spacją).
W treści komentarza można używać języka formatowania BBcode.