Blog (16)
Komentarze (143)
Recenzje (0)
@slepciuAJAX i jQuery (cz. 1)

AJAX i jQuery (cz. 1)

16.04.2012 03:32, aktualizacja: 24.04.2012 00:22

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]

Zawartość strony

[/code]

Po dodaniu kilku stylów CSS otrzymamy coś takiego:

prosta strona
prosta strona

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]

Ładuję...
Wybrane dla Ciebie
Komentarze (39)