AJAX i jQuery (cz. 1)
W tym wpisie przedstawię jak załadować dane na stronę internetową bez jej przeładowywania. Wykorzystam w tym celu popularną bibliotekę JS o nazwie jQuery. Upraszcza ona operacje pobierania i wyświetlania danych na stronie i zapewnia działanie we wszystkich popularnych przeglądarkach.
Dzięki zastosowaniu AJAX'a możemy osiągnąć mnóstwo ciekawych rzeczy, ale przede wszystkim możemy przyspieszyć wyświetlanie informacji na stronie.
Zaczynamy
Na początek w sekcji head strony musimy załadować plik z biblioteką jQuery:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
Od teraz możemy używać jQuery na stronie. Stwórzmy przykładową stronę:
[code=html]
Nasze logo
[/code]
Po dodaniu kilku stylów CSS otrzymamy coś takiego:
Zakładam, że pliki podane w odnośnikach istnieją i zawierają zawartość dla odpowiednich stron. Tworząc strony, których działanie oparte jest na JS musimy wziąć pod uwagę, że nie wszyscy użytkownicy mają włączoną jego obsługę. W związku z tym powinniśmy zapewnić działanie strony również bez włączonego JS. Są na to rożne sposoby i w rożnych sytuacjach różne się sprawdzą. Na potrzeby tego ćwiczenia proponuje przyjąć następującą zasadę. Pliki podane w linkach w menu posiadają pełną strukturę strony. Dzięki temu po ich kliknięciu z wyłączonym JS wgra się normalnie strona. Oprócz tego w katalogu "ajax" znajdują się pliki o tych samych nazwach, które zawierają tylko treść, która ma się znaleźć w prawej kolumnie. Jest to oczywiście bardzo proste rozwiązanie i nie określił bym go jako najbardziej optymalne, ale nie wymaga znajomości, żadnego dodatkowego języka programowania.
Szybko i prosto
Cały kod jaki musimy teraz dodać w sekcji head to:
<script type="text/javascript"> </script>
Kod $("#menu a").click(fn) przejmuje kliknięcie we wszystkie linki w elemencie o id równym "menu" i wykonuje funkcję podaną w nawiasach. Używamy tutaj funkcji anonimowej, w której wykorzystujemy metodę .load() dostępna w jQuery. Metodę "podpinamy" pod element, do którego ma być załadowana nowa treść. Jako argument podajemy adres url pliku do załadowania - pobieramy wartość atrybutu href linku i dodajemy do niego katalog "ajax". Na koniec wykonujemy e.preventDefault(); co zapobiega przejściu przeglądarki do adresu podanego w linku.
I to by było na tyle. Od teraz strony są ładowane bez przeładowywania strony.
Trochę więcej możliwości
jQuery nie ogranicza nas do tej jednej metody. Posiada szereg innych metod, które można wykorzystywać w zależności od potrzeb. Jest metoda $.getJSON, która ładuje obiekty JSON (JavaScript Object Notation ), jest $.get(), która pobiera plik jako tekst, ale rozpoznaje pliki XML i zwraca drzewo DOM XML, jest metoda $.getScript(), która ładuje skrypty JS itd. Nie czas i miejsce, żeby je wszystkie opisywać. Przejdę teraz do opisu metody $.ajax().
Pełen zakres możliwości
Wszystkie metody wykorzystywane w jQuery do obsługi AJAX są ostatecznie odwzorowywane przez jQuery na metodzie $.ajax(). Ta metoda daje nam największy zakres możliwości i też największą kontrolę nad ładowaniem danach do i z serwera. Dzięki zastosowaniu tej metody możemy np wyświetlać wstępną informację o ładowaniu się treści, komunikat błędu itp. Zmieńmy lekko strukturę naszej podstawowej strony. Dodamy do niej komunikat o ładowaniu strony oraz miejsce na tytuł strony:
[code=html]
Nasze logo
Tytuł strony
[/code]
Element loader dzięki CSS ukrywamy, będziemy go pokazywać za pomocą JS podczas ładowania danych.
Tym razem oprócz ładowania treści strony będziemy też poobierać jej tytuł. Aby to zrobić zmienimy strukturę naszych plików, które ładujemy. Nie będą to już zwykłe pliki HTML, ale pliki przechowujące dane w postaci JSON. Dla przykładu plik "ajax/oferta.html" wygląda następująco:
{"tytul":"Oferta","tresc":"Jestesmy wspaniałą firmą z wspaniałą ofertą."}
Kod JS, który załaduje treści:
[code=javascript]$(function(){ $("#menu a").click(function(e){ var content=$("#content"); var title=$("#title"); var loader=$("#loader"); $.ajax({ url: "ajax/"+$(this).attr('href'), dataType: "JSON", beforeSend: function(){ content.empty(); title.empty(); loader.show(); }, success: function(obj){ content.html(obj.tresc); title.html(obj.tytul); }, error : function(){ content.html("Przepraszamy, ale strona jest chwilowo niedostępna
"); }, complete: function(){ loader.hide(); } }); e.preventDefault(); }) })[/code]
Co tu się dzieje? Jak poprzednio przechwytujemy kliknięcie. Potem zapisujemy do zmiennych obiekty jQuery, które reprezentują treść strony, tytuł strony i element informujący o ładowaniu się treści. Dallej wykonanie metody $.ajax() i jak poprzednio wykonujem e.preventDefault();.
Metoda ajax() ma wiele parametrów, które podajemy jako zbiór par klucz:wartosc w nawiasach klamrowych. Użyte w przykładzie wartości to tylko mała część dostępnych, ale do tego zadania wystarczą. Po kolei:
url
Adres pliku, który ma zostać wywołany. W naszym przykładzie, są to pliki html, ale mogły by być pliki PHP, które pobierają dane z bazy danych i po odpowiednim ich sformatowaniu zwracają
dataType
Typ danych, jakich ma oczekiwać metoda. W naszym przykładzie to JSON, ale może być kilka innych np XML,HTML,text.
beforeSend
Kod, który zostanie wykonany przed rozpoczęciem pobierania danych. W naszym przypadku wykorzystujemy funkcje anonimową, w której czyścimy zawartość treści i tytułu strony i za pomocą metody .show() pokazujemy div z informacją o ładowaniu się danych
success
Ta funkcja wykona się jeśli pobieranie danych zakończy się sukcesem. Jako argument przyjmujemy obiekt zwrócony przez wywołany plik (obj). Wewnątrz za pomocą metody html() dodajemy zawartość strony i jej tytuł do naszego szkieletu strony. Dostęp do danych w objekcie obj mamy za pomocą kropek.
error
Funkcja, która wykona się, gdyby z jakiegoś powodu nie udało się pobrać danych np. plik nie istnieje. U nas funkcja wyświetla odpowiedni komunikat.
complete
Ta funkcja wykona się po zakończonym pobieraniu danych, niezależnie od tego czy się powiodło czy nie. Za jej pomocą ukrywamy element strony informujący o pobieraniu danych.
Teraz po kliknięciu w link podczas ładowania strony wyświetli się komunikat ładowaniu danych, dzięki czemu użytkownik nie będzie miał wrażenia, że nic się nie dzieje - zwłaszcza jeśli pobieranie trwa dłużej.
Jeśli stworzycie tak prostą stronę jak ja i będziecie testować to lokalnie, to prawdopodobnie nie zobaczycie komunikatu, albo tylko "błyśnie". To dlatego, że dane są tak pobierane w ułamku sekundy. Sposobem na zobaczenie komunikatu jest użycie php zamiast plików html i na ich początku użycie funkcji sleep(x) gdzie x to ilość sekund, na ile zostanie wstrzymany skrypt.
Po załadowaniu przykładowej strony z ofertą zobaczymy:
Podsumowanie
Na dzisiaj to tyle. Mam nadzieję, że przybliżyłem Wam temat. W następnej części opiszę jak wysyłać dane do serwera i przyjmować odpowiedź. Zrobimy to na przykładzie formularza kontaktowego.
Link
Link do działającego przykladu: http://przyklady.blog.abryser.pl/jquery1/index.html
HTML w JSON
Ponieważ pojawiły się wątpliwości w komentarzach zaktualizowałem przykład w linku o taki, w którym przez JSON wysyłany jest tekst zawierający HTML i CSS. Po kliknięciu linku "Usługi" wysyłane do przeglądarki jest coś takiego:
{"tytul":"Usługi","tresc":"<style type=\"text\/css\">\r\n.jakasKlasa{color:red}\r\n<\/style><p>Nasze usługi - tutaj jest ich opis<br \/>Lista usług:<\/p><ul class=\"jakasKlasa\"><li>Usługa 1<\/li><li>Usługa 2<\/li><li>Usługa 3<\/li><li>Usługa 4<\/li><\/ul>"}
Cała rzecz w tym, żeby odpowiednie znaki (ukośniki, cudzysłowy) poprzedzić znakiem backslash.
Część 2
http://www.dobreprogramy.pl/slepciu/AJAX-i-jQuery-cz,31833.html