«

»

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ę:

<div id="all">
    <div id='header'>
        <h3>Nasze logo</h3>
    </div>
    <div id="menu">
        <a href="index.html">Home</a>
        <a href="oferta.html">Oferta</a>
        <a href="uslugi.html">Usługi</a>
        <a href="kontakt.html">Kontakt</a>
    </div>
    <div id="content">
        <p>Zawartość strony</p>
    </div>
</div>

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">
<!--
    $(function(){
       $("#menu a").click(function(){
           $("#content").load("ajax/"+$(this).attr('href'));
               return false;
       })
    })
-->
</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 koniez zwracamyfalse 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:

<div id="all">
    <div id="loader">Ładuję...</div>
    <div id='header'>
        <h3>Nasze logo</h3>
    </div>
    <div id="menu">
        <a href="index.html">Home</a>
        <a href="oferta.html">Oferta</a>
        <a href="uslugi.html">Usługi</a>
        <a href="kontakt.html">Kontakt</a>
    </div>
    <div id="right">
        <h4 id="title">Tytuł strony</h4>
        <div id="content">
            <p>Zawartość strony</p>
        </div>
    </div>
</div>

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:

$(function(){
       $("#menu a").click(function(){
               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("<p>Przepraszamy, ale strona jest chwilowo niedostępna</p>");
                   },
                   complete: function(){
                       loader.hide();
                   }
              });
              return false;
       })
    })

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 zwracamy false.

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

Podziel się na:
  • Drukuj
  • Facebook
  • Wykop
  • Google Bookmarks
  • Blogger.com
  • Blip
  • Digg
  • Dodaj do ulubionych
  • Gadu-Gadu Live
  • Grono.net
  • LinkedIn
  • Live
  • MySpace
  • Mój biznes
  • PDF
  • Poleć
  • RSS
  • Twitter
  • Śledzik

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *

Możesz użyć tych znaczników i atrybutów HTMLa: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>