Technologia Ajax

Pewnie wielu z Was słyszało juz gdzieś termin "Ajax" i to wcale nie w znaczeniu płynu do mycia szyb :) Co kryje się pod tą tajemniczą i intrygującą nazwą? Czym jest, jak się tego używa? W tym artykule postaram się przedstawić odpowiedzi na te i inne pytania związane z Ajax'em.

Czym jest Ajax ?

Ajax to skrót od "Asynchronous JavaScripting and XML" czyli "Asynchroniczny JavaScript i XML" (zakładam że znasz choć trochę te pojęcia). Co to właściwie oznacza ? Najprościej mówiąc Ajax jest połączeniem kilku już istniejących technologii (takich jak JavaScript, XML, XSLT, XMLHttpRequest, CSS, DOM, HTML lub XHTML), nie jest więc do końca technologią sam w sobie. Pozwala nam na łatwy dostęp do serwera internetowego bez odświeżania strony. Co nam to daje w praktyce ? Szybkie, dynamiczne aktualizacje elementów stron www, szybkie zmiany w interfejsie użytkownika, przyśpieszenie wykonywania różnego rodzaju zadań. Jeśli nadal do Ciebie to nie przemawia to rozważmy prosty przykład... Na pewno wiele razy zetknąłeś się, drogi Czytelniku, z tzw. "shoutboxami" na różnych stronach WWW czy forach dyskusyjnych. Zwykle są to bardzo proste, napisane w PHP, skrypty, wykorzystujące najczęściej do działania pływające ramki (iframe) - w jednej ramce znajduje się strona z całą treścią i komunikatami użytkowników, w drugiej specjalny formularz do dodawania nowych wpisów. Jak często męczące jest wielokrotne, samoistne odświeżanie strony z treścią, w celu pobrania z bazy nowych danych... Nie mówiąc już o opóźnieniu z jakim inni zobaczą naszą wiadomość. A jak by to wyglądało gdybyśmy użyli Ajax'a ? Strona nie musiałaby się odświeżać ani razu, wykonywał by się za to, co określony czas, skrypt w JavieScript, który w magiczny sposób pobrał by dane z serwera za pomocą XMLHttpRequest i zaktualizował je na stronie używając DOM. Czy nie brzmi wspaniale ? Zapewne wtedy taki shoutbox zaczął by wreszcie przypominać "prawdziwy" chat, użytkownicy mogli by na nim prowadzić normalne dyskusje, strona działała by szybciej.
Jak już jednak pisałem, możliwości Ajax'a są naprawdę ogromne, wystarczy spojrzeć na różne serwisy Google (maps.google.com, gmail.google.com), które zostały stworzone właśnie z użyciem Ajax'a. I jak ? Jesteś gotowy poznać sekrety używania Ajax'a w PHP ?

Mało źródeł...

Niestety Ajax, jako "technologia" bardzo młoda, nie posiada wielu źródeł skąd można by czerpać informacje. Mnie, w języku polskim, nie udało się znaleźć niczego. Z obcojęzycznymi materiałami było niewiele lepiej. Postaram się jednak przekazać Wam wiedzę, którą sam zdobyłem przeglądając kody źródłowe różnych aplikacji w Ajax'ie, w prosty i klarowny sposób.

Zaczynamy!

Nareszcie coś się dzieje! Zaczniemy od wyboru biblioteki, na dzień dzisiejszy można wyróżnić 2:

·Sajax (http://www.modernmethod.com/sajax/)
·JPSPAN (http://jpspan.sourceforge.net/wiki/doku.php)

Zajmiemy się tutaj biblioteką Sajax (Simple Ajax), prostszą, dającą nieco mniejsze możliwości niż JPSPAN, jednak wspierającą różne języki server side. Należy pobrać zatem paczkę zawierającą bibliotekę Sajax i, po rozpakowaniu, przekopiować plik Sajax.php do miejsca, w którym będziemy tworzyli nasze skrypty :)

Hello world!

(Uwaga! Wszystkie przedstawione tutaj pliki zapisujemy z rozszerzeniem *.php i uruchamiamy po stronie serwera!)

Aby tradycji stało się zadość przedstawię na bardzo prostym przykładzie ogólny szkielet strony stworzonej przy użyciu Sajax'a. Nasz skrypt będzie prosty i za jego pomocą wyświetlimy prosty komunikat...

Tworzymy sobie zatem w naszym katalogu (tym, do którego przekopiowaliśmy Sajax.php) plik, dajmy na to - hello_world.php. Na początku musimy dołączyć bibliotekę Sajax'a:

 <?
 require("Sajax.php");
  
 Następnie napiszemy naszą wymyślną funkcję w PHP
  
 function funkcja($tekst)
 {
 return $tekst;
 }
 ?>

Tak właściwie funkcja nie robi nic konkretnego, poza zwracaniem wartości podanej w pierwszym i jedynym argumencie... Czas ją wyeksportować do JavyScript!

 <?
 sajax_init();
 sajax_export("funkcja"); // tutaj podajemy nazwe funkcji, ktora eksportujemy
 sajax_handle_client_request();
 ?>

Zainicjalizowaliśmy (trudne słowo) oraz wyeksportowaliśmy (jeszcze trudniejsze słowo), za pomocą Ajaxa, naszą funkcję... Co dalej ?

 <html>
 <head>
 <title>Test</title>
 <script>
 <? sajax_show_javascript(); ?>

Stop! Tutaj mamy już tradycyjny nagłówek html'a (bez wszelkich doctypów i kodowań, gdyż nie to jest istotą artykułu). W nagłówku tym umieszczamy funkcję PHP z biblioteki Sajax.php – sajax_show_javascript();. Tutaj Sajax umieszcza swój tajemniczy kod (którego nie będziemy omawiać) w JaviaScript – w tym naszą “wyeksportowaną” funkcję. Popatrzmy co dalej...

 <?
 //.....
 function wyswietl_rezultat(rezultat) {
 alert(rezultat);
 }
  
 function wykonaj_funkcje(tekst) {
 x_funkcja(tekst, wyswietl_rezultat);
 }
  
 </script>
 </head>
 //......
 ?>

Tutaj widzimy dalszą część bloku <script> a w nim 2 funkcje. Nazywałem je po polsku, aby łatwiej było zrozumieć co takiego robią. W pierwszej funkcji ustaliliśmy co stanie się ze zwracanym przez wyeksportowaną funkcję PHP rezultatem. Widzimy tu, że funkcja przyjmuje jeden argument – rezultat. To jest właśnie zmienna w której znajdzie się rezultat funkcji PHP. Podajemy zatem prostą instrukcję alert(); aby wyświetlić ten rezultat na ekranie. Jak to się jednak dzieje, że wykonana będzie właśnie TA funkcja? Zobaczmy zatem drugą funkcję – wykonaj_funkcję(tekst). Ta funkcja jest już obudowaniem naszej wyeksportowanej funkcji PHP. Widzimy w niej wywołanie jednej funkcji JavaScript – x_funkcja(tekst, wyswietl_rezultat) – taką nazwę przyjęła nasza wyeksportowana funkcja PHP, jako pierwszy argument przyjmuje ona argument funkcji w której ją wykonujemy. Oczywiście nie musi tak być i możemy ją wykonać np. x_funkcja(“bardzo ciekawy tekst”, wyswietl_rezultat); Oczywiście musi być podany ten jeden argument, gdyż tak zadeklarowaliśmy funkcję w PHP, która przyjmuje jako argument zmienną $text. Gdyby było więcej argumentów w funkcji PHP musielibyśmy dodać te argumenty przy wywołaniu funkcji x_funkcja, to chyba oczywiste. Jednak ponad te argumenty zawsze podajemy jeszcze jeden, zawsze ostatni, argument – nazwę funkcji JavaScript do której trafi rezultat z wykonania naszej x_funkcja(); - podajemy tutaj zatem nazwę pierwszej funkcji JavaScript – wyswietl_rezultat. I już wszystko jasne. Teraz tylko dopisać do kodu blok i wykonać w nim funkcję wykonaj_funkcje();

 <body onLoad="wykonaj_funkcje('czesc!');">
 <p>Witaj! Ten komunikat zostal wyswietlony dzieki Ajax'owi!</p>
 </body>
 </html>

Voila! To już koniec, nie pozostaje nic innego jak zapisać plik i uruchomić go na jakimś serwerze. Cóż, może wyskakujące okienko z wiadomością nie jest zbyt imponującym przykładem użycia Ajax'a (to samo moglibyśmy uzyskać pisząc po prostu onLoad=”alert('czesc');”), ale... Wyobraź sobie teraz, że do funkcji funkcja(); możesz wstawić każdy kod PHP, który wykona się w “czasie rzeczywistym”. Jeśli pisalibyśmy wspomnianego wcześniej “shoutboxa” moglibyśmy w naszej funkcji łączyć się z bazą danych (np. MySQL), pobierać z niej odpowiednie dane, formatować i zwracać (return). Potem w funkcji wyświetl_rezultat(); wyświetlilibyśmy piękną tabelkę z wynikami. Teraz wystarczy wykonywać te “wyeksportowaną” funkcję w JavaScript i mamy chat z prawdziwego zdarzenia! Warunek jest jeden – nie możemy wypisać na ekran nic przed “wyeksportowaniem” funkcji. Do tego wszystkie funkcje “wyeksportowane” muszą zwracać wyniki operacji, nie mogą ich w żaden sposób wyświetlać. O tym jak wyświetlimy wyniki decydujemy w opisanej już funkcji. Możemy zatem w funkcji PHP sformatować odpowiedni kod HTML, zwrócić go i potem (za pomocą np. DOM) wyświetlić. Dla przykładu trochę przebudujmy nasz kod – tym razem stworzymy prosty kalkulator. Nie będę omawiał tym razem każdego fragmentu kodu, ale opisze go pod koniec:

 <?
 require("Sajax.php");
  
 function funkcja($liczba1, $liczba2, $rodzaj)
 {
 if ($rodzaj == "dodaj")
 {
 return $liczba1 + $liczba2;
 }
 else if ($rodzaj == "odejmij")
 {
 return $liczba1 - $liczba2;
 }
 }
  
 sajax_init();
 sajax_export("funkcja");
 sajax_handle_client_request();
 ?>
  
 <html>
 <head>
 <title>Test</title>
 <script>
 <? sajax_show_javascript(); ?>
  
 function wyswietl_rezultat(rezultat) {
 document.getElementById('wynik').innerHTML = 'Wynik: ' + rezultat;
 }
  
 function wykonaj_funkcje(liczba1, liczba2, rodzaj) {
 x_funkcja(liczba1, liczba2, rodzaj, wyswietl_rezultat);
 }
  
 </script>
 </head>
  
 <body>
 liczba 1: <input id="liczba1" type="text"><br>
 liczba 2: <input id="liczba2" type="text"><br>
 <input type="button" onClick= "wykonaj_funkcje(document.getElementById('liczba1').value, document.getElementById('liczba2').value, 'dodaj');" value="dodaj">
 <input type="button" onClick= "wykonaj_funkcje(document.getElementById('liczba1').value, document.getElementById('liczba2').value, 'odejmij');" value="odejmij"><br>
 <div id="wynik"> </div>
 </body>
 </html>

Tym razem nasza funkcja w PHP przyjmuje aż 3 argumenty – 2 liczby i tajemniczą zmienną $rodzaj. W ciele funkcji okazuje się, że w zależności od wartości zmiennej $rodzaj (“dodaj” lub “odejmij”) sumujemy lub odejmujemy podane w dwóch pierwszych argumentach liczby. Potem widzimy znajomy fragment kodu służący do wyeksportowania funkcji za pomocą Sajax'a. Dalej, widzimy zmianę w funkcji wyswietl_rezultat(); - Tym razem pobiera ona “uchwyt” do elementu DIV i zmienia jego zawartość (zakładam, że znasz choć trochę JavaScript). W wykonaj_funkcje przybyło tylko kilka argumentów które zadeklarowaliśmy w funkcji PHP. W bloku mamy 2 pola typu “text” oraz 2 przyciski, w ich zdarzeniach onClick dodajemy, lub odejmujemy liczby, podane w polach “text”, za pomocą odpowiedniego wywołania funkcji wykonaj_funkcje. Na końcu widzimy blok którego zawartość zmieniamy w funkcji wyswietl_rezultat. Teraz tylko zapisać plik i możemy się cieszyć prostym "kalkulatorem".
Możemy dalej rozwijać te jedną funkcję, ale to chyba bez sensu. Możemy przecież użyć dowolnie dużej ilości funkcji, które potem eksportujemy. Rozbijmy nasz kalkulator na 2 funkcje:

 <?
 require("Sajax.php");
  
 function dodaj($liczba1, $liczba2)
 {
 return $liczba1 + $liczba2;
 }
  
 function odejmij($liczba1, $liczba2)
 {
 return $liczba1 - $liczba2;
 }
  
 sajax_init();
 sajax_export("dodaj", "odejmij");
 sajax_handle_client_request();
 ?>
  
 <html>
 <head>
 <title>Test</title>
 <script>
 <? sajax_show_javascript(); ?>
  
 function wyswietl_rezultat(rezultat) {
 document.getElementById('wynik').innerHTML='Wynik: ' + rezultat;
 }
  
 function dodaj(liczba1, liczba2) {
 x_dodaj(liczba1, liczba2, wyswietl_rezultat);
 }
  
 function odejmij(liczba1, liczba2) {
 x_odejmij(liczba1, liczba2, wyswietl_rezultat);
 }
  
 </script>
 </head>
  
 <body>
 liczba 1: <input id="liczba1" type="text"><br>
 liczba 2: <input id="liczba2" type="text"><br>
 <input type="button" onClick= "dodaj(document.getElementById('liczba1').value, document.getElementById('liczba2').value);" value="dodaj"><br>
 <input type="button" onClick= "odejmij(document.getElementById('liczba1').value, document.getElementById('liczba2').value);" value="odejmij"><br>
 <div name="wynik"> </div>
 </body>
 </html>

Skrypt wykonuje dokładnie to samo co poprzedni, tyle że z pomocą 2 funkcji. Na początku tworzymy te 2 funkcje w PHP (dodaj i odejmij). Następnie eksportujemy je obie, oddzielając je przecinkiem (“dodaj", "odejmij"). Obudowanie funkcji wygląda tak samo, obie korzystają z tej samej funkcji wyswietl_rezultat(); (która pozostała bez zmian). Równie dobrze moglibyśmy zrobić 2 różne funkcje (o różnych nazwach) i przypisać każdą innej wyeksportowanej funkcji (np. Jeśli chcemy aby wynik działania jednej pokazał się w inny sposób lub w innym miejscu niż drugiej). Należy jednak pamiętać że ta funkcja musi być podana jako ostatni argument funkcji wyeksportowanej. Jeśli nie chcemy aby funkcja robiła cos z rezultatem to ciało funkcji wyświetlającej zostawiamy puste.

Ograniczenia

Niestety Ajax, jako technologia bardzo młoda, niesie ze sobą pewne ograniczenia i wymagania. Dotyczą ona przede wszystkim rodzajów i wersji przeglądarek internetowych. Ajax głównie używa JavaScript, zatem potrzebna będzie przeglądarka z jego obsługą. Niestety czasem ten sam kod generowany przez Sajax'a różnie działa na różnych przeglądarkach. Do tego od przeglądarki wymagany jest obiekt XMLHttpRequest. Większość nowych przeglądarek radzi sobie jednak doskonale z Ajaxem (Mozilla, Opera, IE) i błędy zdarzają się sporadycznie...

Zakończenie

To już koniec tego "krótkiego" artykułu. Opisałem tu zaledwie czubek góry lodowej, ale mam nadzieję, że to wystarczy do dalszego, samodzielnego zgłębiania zagadnień Ajax'a. Polecam przy tym dokładne przestudiowanie przykładów na stronie Sajax'a. Poniżej podaję jeszcze liste stron, które warto odwiedzić:

Link 1 – dokładne wytłumaczenie terminu Ajax [ANG]
Link 2 - dużo informacji o Ajaxie, przykłady użycia [ANG]
Link 3 – definicja na wikipedii

Dragomir @ 12-07-2006 00:00

#1

Artykuł ciekawy i przydatny. Ale mam małe zastrzeżenie do kodów źródłowych. Niestety wkradły się małe błędy. Na szczęście udało mi się je wykryć i poprawić :). pozdro jakwos

noobek @ 01-06-2007 09:43

#2

Ciekawy artykuł. Racja, były błędy. Należy poprawić <? na <?php. Pozdrawiam

PHPcoder @ 06-02-2008 15:42

#3

Ciekawy artykuł. Racja, były błędy. Należy poprawić <? na <?php. Pozdrawiam

PHPcoder @ 06-02-2008 16:30