Dziudek's jogger

Plik ajax.js zawiera klasę Ajax, która jest rozszerzeniem poznanej w poprzedniej części kursu klasy XHR. Klasa Ajax zawiera 4 metody i posiada dodatkowe zdarzenie... Poza tym mamy do dyspozycji wszystkie metody, opcje i zdarzenia klasy XHR.

Stworzenie nowego obiektu tej klasy wygląda następująco:

obiekt = new Ajax(adres,opcje);

Gdzie zmienna adres to najczęściej adres pod którym znajduje się skrypt przetwarzający otrzymane dane. Zmienna opcje to tak naprawdę cały obiekt, przechowujący parametry wywołania obiektu klasy Ajax. Oprócz opcji znanych z klasy XHR mamy jeszcze do dyspozycji 4 dodatkowe opcje:

• data - opcja ta przechowuje dane jakie chcemy wysłać zapytaniem Ajax. Może być zarówno ciągiem znaków urlescape jak i obiektem gdzie rolę pól pełnią nazwy zmiennych. Trzecią możliwością jest umieszczenie w tym miejscu odwołania do elementu formularza.
• update - w tej opcji określamy element w którym pojawią się pobrane przez zapytanie dane.
• evalScripts - jeżeli pobieramy za pomocą zapytania kod JavaScript to po jego pobraniu możemy go wykonać wtedy gdy opcja ta ustawiona jest jako true. Domyślna wartość tej opcji to false.
• evalResponse - ta opcja ma podobne działanie do poprzedniej z tą różnicą, że wykonuje skrypty JS niezależnie od tego jakiego typu są pobierane dane... Domyślna wartość tej opcji to false.

Jak już wspominałem klasa Ajax udostępnia nam jedno dodatkowe zdarzenie - onComplete, które jest wywoływane w momencie zakończenia wykonywania zapytania. Jaka jest różnica pomiędzy zdarzeniem onComplete, zdarzeniem onSuccess znanym z klasy XHR ? Opcje takie jak update czy evalScripts i evalResponse zadziałają tylko w momencie wywoływania zdarzenia onComplete - stosując zdarzenie onSuccess stosowanie tych opcji mija się z celem.

Przejdźmy teraz do tego co nas najbardziej interesuje - do metod udostępnianych przez klasę Ajax.

Request

Metoda request to podstawa działania klasy Ajax - służy do wysłania zapytania zgodnie z podanymi parametrami.

Metodę tę możemy wywoływać na dwa sposoby:

obiekt = new Ajax(adres,opcje);
obiekt.request();

lub:

new Ajax(adres,opcje).request();

Pierwszy sposób jest lepszy gdy chcemy wykonywać dane zapytanie wielokrotnie, a drugie rozwiązanie jest przydatne w wypadku pojedynczych wywołań.

Wykonajmy zatem zapytanie Ajax, które pobierze tekst z danej strony i umieści go w odpowiednim elemencie. Żeby było ciekawiej to będziemy mogli pobrany tekst umieścić w wybranym przez nas elemencie. Ponieważ będziemy wykonywać kilka zapytań warto skorzystać z pierwszego sposobu zapisu by nie tworzyć kilku-kilkunastu instancji klasy Ajax - będziemy po prostu dynamicznie zmieniać wartość jednej z opcji naszego obiektu.

Ponieważ wszystko będzie najlepiej widoczne w przykładzie tu skupię się tylko na samym schemacie działania skryptu.

Stworzymy listę wyboru typu select, która pozwoli nam na wybór elementu w którym znajdzie się pobrany przez zapytanie tekst. Zapytanie zostanie wykonane w momencie kliknięcia przycisku. Zatem w tym momencie musimy zmienić wartość opcji update obiektu klasy Ajax (który utworzymy wraz ze zdarzeniem onload obiektu window).

Tworzymy obiekt klasy Ajax przy zdarzeniu onload :

window.addEvent("load",function(){
   zapytanie = new Ajax('http://adres.pl');
});

Dodajemy zdarzenie onclick do przycisku, które pobiera wartość pola select i na tej podstawie zmienia opcję update obiektu klasy Ajax i wykonuje zapytanie:

window.addEvent("load",function(){
   zapytanie = new Ajax('http://adres.pl');

   $('btn').addEvent("click",function(){
      zapytanie.options.update = $($('select').value);
      zapytanie.request();
   });
});

Powyższy kod w akcji prezentuję w poniższym przykładzie:

PRZYKŁAD 1

evalScripts

Metoda evalScripts służy do wykonywania skryptów zawartych w zwróconym przez zapytanie tekście, zgodnie z podanymi opcjami. Metody tej z reguły nie stosujemy ręcznie, ponieważ jest ona automatycznie wywoływana w momencie zaistnienia zdarzenia onComplete, gdy opcja evalResponse lub evalScripts ma wartość true.

Oczywiście można użyć tej metody ręcznie w momencie, gdy chcemy wykonać kody JS zawarte w wyniku zapytania w innym momencie działania naszego skryptu - czyli niekoniecznie zaraz po zakończeniu wykonania zapytania.

Przykładowo pobraliśmy kod skryptu i chcemy go wykonać na przykład w momencie kliknięcia jakiegoś elementu. Jeżeli pobraliśmy tylko kod skryptu to nie musimy zmieniać wartości opcji obiektu klasy Ajax - gdy chcemy skorzystać z właściwości opcji evalResponse to przed wywołaniem tej metody musimy zmienić wartość tej opcji na true (gdyby miała ona taką wartość od momentu inicjalizacji obiektu to nie moglibyśmy wykonać skryptu w dowolnym momencie, gdyż wykonałby się on wraz ze zdarzeniem onComplete obiektu).

Tworzymy zatem nowy obiekt klasy Ajax przy zdarzeniu onload:

window.addEvent("load",function(){
   zapytanie = new Ajax('http://adres.pl');
});

Tworzymy też dwa przyciski - btn1 i btn2 z których pierwszy będzie wykonywał zapytanie, a drugi wykona zawarty w zapytaniu kod JS.

Zatem:

window.addEvent("load",function(){
   zapytanie = new Ajax('http://adres.pl');

   $('btn1').addEvent("click",function(){
      zapytanie.request();
   });

   $('btn2').addEvent("click",function(){
      zapytanie.evalScripts();
   });
});

Jeszcze by się przydało dać jakiś sygnał, że zapytanie się wykonało - dodajemy do obiektu klasy Ajax zdarzenie onComplete:

window.addEvent("load",function(){
   zapytanie = new Ajax('http://adres.pl',{onComplete: function(){alert('zapytanie zakończone...')}});

   $('btn1').addEvent("click",function(){
      zapytanie.request();
   });

   $('btn2').addEvent("click",function(){
      zapytanie.evalScripts();
   });
});

Oczywiście powyższy kod dotyczy sytuacji gdzie pobieramy czysty kod JS - z odpowiednim Content-Type lub kod zawarty pomiędzy znacznikami script:

PRZYKŁAD 2

To teraz wersja dla pobierania kodu JS ale bez Content-Type - to samo tylko z drobnymi modyfikacjami:

window.addEvent("load",function(){
   zapytanie = new Ajax('http://adres.pl',{onComplete: function(){alert('zapytanie zakończone...')}});

   $('btn1').addEvent("click",function(){
      zapytanie.request();
   });

   $('btn2').addEvent("click",function(){
      zapytanie.options.evalResponse = true;
      zapytanie.evalScripts();
   });
});

Jak widać zmieniła się tylko jedna linijka kodu w funkcji wykonywanej przy zdarzeniu onclick dla drugiego przycisku.

I oczywiście kod w działaniu:

PRZYKŁAD 3

getHeader

Metoda getHader służy do pobierania zawartości danego nagłówka odpowiedzi. Jako jej argument podajemy nazwę nagłówka - w wypadku gdy takowy nagłówek nie istnieje zwrócona zostaje wartość null.

Składnia tej metody wygląda następująco :

obiekt_ajax.getHeader('nazwa_naglowka');

Przykładowo gdybyśmy chcieli pobrać nagłówek Content-Type to zapiszemy:

obiekt_ajax.getHeader('Content-Type');

No i musimy pamiętać by umieścić kod pobierający zawartość nagłówka tak by wykonał się po wykonaniu zapytania - na przykład w zdarzeniu onComplete.

Przykład używający tej metody poniżej:

PRZYKŁAD 4

Object.toQueryString

Funkcja Object.toQueryString zamienia podany jako argument obiekt na ciąg znaków urlescape. Składnia tej funkcji:

Object.toQueryString(obiekt);

Na przykład:

Object.toQueryString({imie: "Tomek",nick: "Dziudek", www: "dziudek.jogger.pl"});

Powyższy kod zamieni podany obiekt na następujący ciąg znaków:

imie=Tomek&nick=Dziudek&www=dziudek.jogger.pl

Myślę, że przykład działania niepotrzebny bo podobne funkcje już poznawaliśmy i powinniście już wiedzieć kiedy ta funkcja się przyda ;)

send

Ostatnia metoda w pliku ajax.js - jest rozszerzeniem klasy Element, a co za tym idzie możemy ją łączyć z wybranym elementem - w tym wypadku formularzem. Jej działanie polega na wysyłaniu za pomocą Ajax danego formularza. Składnia funkcji:

$('formularz').send(opcje);

Opcje to w tym wypadku opcje klas Ajax i XHR - oczywiście poza parametrami typu adres czy dane, które są generowane automatycznie na podstawie zawartości formularza.

Przykładowo zapis:

$('form').send();

Spowoduje wysłanie formularza posiadającego identyfikator "form" pod adres zgodny z atrybutem action elementu form i z danymi automatycznie zamienionymi na format urlescape. Warto jeszcze dodać, że dane w tym wypadku są wysyłane metodą post.

I przykład korzystający z tej metody:

PRZYKŁAD 5

Może jest mało ciekawy, ale ma po prostu pokazać jak to mniej więcej działa ;]

To by było na tyle w temacie pliku ajax.js . W następnej części kursu zajmę się plikiem assets.js, który pozwala na dynamiczne dołączanie skryptów, styli i grafik do stron.