Ajax.Updater jeszcze bardziej upraszcza obsługę obiektu XMLHttpRequest. Klasy tej używa się w przypadku kiedy mamy jakiś element, którego treść chcemy odświeżyć. Jego składnia jest następująca:
new Ajax.Updater(kontener, url, opcje);
Gdzie kontener to identyfikator elementu, w który chcemy załadować nową treść, url to adres pliku z którego chcemy pobrać treść. Opcje oddziela się przecinkami. Jeśli jest ich więcej niż jedna trzeba umieścić cały kod opcji w nawiasach klamrowych {opcja1: wartość, opcja2: wartość}. Dostępne opcje to:
- asynchronous - Definiuje czy zapytanie ma być asynchroniczne czy nie. Wartość domyślna to true.
- evalScripts - Definiuje czy przetwarzać skrypty które zostały załadowane łącznie z treścią. Wartość domyślna to false.
- method - Pozwala ustawić w jaki sposób przesyłane są zmienne tzn. czy metodą POST czy GET. Domyślnie POST
- contentType - pozwala ustawić typ zawartości przesyłanych danych. Domyślnie 'application/x-www-form-urlencoded'
- encoding - Ustawia typ kodowania znaków w informacji przesyłanej na serwer. Domyślnie 'UTF8'
- parameters - Definiuje parametry (dane) jakie chcemy aby zostały przesłane. W przypadku przesyłania danych z formularza najprostszą metodą jest zapis: parameters:Form.serialize(this).
- postBody - Definiuje dane, które chcemy przesłać metodą POST. Konstrukcja parametru musi być poprawnym ciągiem zapytania URL. Np: postBody: 'param=true&name=Tomek'
- onComplete - Definiuje nazwę funkcji do wywołania kiedy zapytanie Ajax zostanie przetworzone
- onSuccess - Definiuje nazwę funkcji do wywołania kiedy zapytanie Ajax wykona się poprawnie
- onFailure - Definiuje nazwę funkcji do wywołania kiedy zapytanie Ajax zakończy się niepowodzeniem
- onException - Definiuje nazwę funkcji do wywołania kiedy zapytanie Ajax spowoduje wygenerowanie wyjątku
- on + Kod odpowiedzi serwera - Definiuje nazwę funkcji do wywołania kiedy zapytanie Ajax uzyska określony kod odpowiedzi serwera. np: on404 - czyli co ma zrobić Ajax.Updater w przypadku kiedy podany plik nie istnieje
- insertion - Umożliwia zamiast całkowitej wymiany treści ustawienie Insertion.Top, Insertion.Bottom, Insertion.Before or Insertion.After, które wstawią treść w już istniejącą w wyróżnionym miejscu np: Insertoin.Top - przed istniejącą treścią
Należy pamiętać, że jeśli wywołujemy funkcje dla parametrów, które to umożliwiają to podajemy samą jej nazwę bez parametrów., którą definiujemy później. Możemy też skorzystać z tworzenia funkcji ‘w locie’:
onFailure: function { alert('Zapytanie się nie powiodło'); }
Teraz prześledzimy działanie klasy na przykładzie. Powiedzmy, że mamy taką strukturę dokumentu:
<div class="head" id="head">
<div class="main" id="main">
<div class="left" id="left">Lewe Menu<div>
<div class="right" id="right">Treść ulegająca modyfikacji
zależnie od wyboru pozycji menu<div>
<div>
<div class="foot" id="foot">
Czyli nagłówek, panel lewy z menu i panel prawy z wymienną treścią oraz stopka. Chcemy oczywiście wymieniać zawartość prawego panelu po kliknięciu w link z menu nie przeładowując całej strony. W każdym linku będziemy musieli wywołać funkcje Ajax (nie jest to jedyna metoda, istnieje metoda "nieinwazyjna" ale opiszę ją innym razem). Przykładowy kod może być taki:
<a title="Strona Główna" href="index.htm"
onclick="return MyUpdate('main.htm');">Strona Główna</a>
<a title="Oferta" href="oferta.htm"
onclick="return MyUpdate('a_oferta.htm');">Oferta</a>
<a title="Kontakt" href="kontakt.htm"
onclick="return MyUpdate('a_kontakt.htm');">Kontakt</a>
A zatem nasze menu będzie wywoływać w przypadku kliknięcia w link funkcje, którą zaraz stworzymy, a której parametrami są pliki z których chcemy pobrać i wymienić treść.
Nasza funkcja (umieszczona w sekcji nagłówkowej dokumentu lub w osobnym pliku) dzięki Ajax.Updater będzie niezwykle prosta:
function MyUpdate(plik)
{
new Ajax.Updater('right', plik, {asynchronous:true});
return false;
}
Funkcja ta powoduje, że Ajax.Updater załaduje nam do elementu 'right' zawartość pliku, który podaliśmy jako parametr funkcji. Zwrócenie false spowoduje zatrzymanie działania klasycznej obsługi linka która by spowodowała, że załadowałaby się cała strona podana w linku. Jedyne co nam pozostało to zbudowanie treści każdego z plików które będziemy ładować. Najlepiej przygotować wersje pełne stron: index.htm już mamy więc zostaje nam stworzenie oferta.htm i kontakt.htm oraz wersje dla Ajax'a: main.htm, a_oferta.htm i a_kontakt.htm, które są po prostu kopią części pełnych plików - powinny zawierać tylko to co ma się pojawić w prawym panelu. Dzięki tej dwoistości uzyskujemy w pełni funkcjonalną stronę, która korzysta z funkcjonalności Ajax o ile jest ona dostępna (użytkownicy mogą mieć wyłączony js w przeglądarkach) a w przeciwnym wypadku ładuje klasycznie (przeładowując stronę) pełne pliki.
Listing
Ranga: Administrator serwisu Punktów: 0