Narzędzia XAJAX: Łatwy AJAX dla programistów PHP Paweł Grzesiak Stopień trudności: Na fali fascynacji AJAX-em powstało wiele bibliotek mających jednocześnie ułatwić i przyspieszyć proces projektowania witryn internetowych. Prezentujemy XAJAX, rozwiązanie zorientowane na programistów PHP, uwzględniające minimum programowania w JavaScript. W SIECI http://www.xajaxproject.org/ strona główna projektu XAJAX. http://wiki.xajaxproject.org/ dokumentacja wiki do projektu. http://adaptivepath.com/ publications/essays/ archives/000385.php artykuł Ajax: A New Approach to Web Applications. http://developer.mozilla.org/ pl/docs/ajax więcej informacji o samej technice AJAX na stronach Mozilla Developer Center. AJAX to podejście do tworzenia aplikacji internetowych polegające na połączeniu możliwości istniejących już technologii w nową jakość. Termin AJAX użył po raz pierwszy Jesse James Garrett w swoim artykule pt. Ajax: A New Approach to Web Applications opublikowanym na początku roku 2005. Jego tekst był próbą odpowiedzenia na pytanie, które wówczas zadawało wiele ludzi, niekoniecznie profesjonalnie związanych z tworzeniem stron www. Pytanie to brzmiało i brzmi nadal czym jest ta rewolucyjna technologia wprowadzona przez Google? Z perspektywy czasu można powiedzieć, że to właśnie Google zapoczątkowało światowy boom na AJAX, prezentując przełomowe na dzień dzisiejszy produkty. Aplikacje internetowe zaoferowane przez Google charakteryzują się ponadprzeciętnymi wartościami użytkowymi, ale to co je wyróżnia od innych, to wysoki stopień interakcji z użytkownikiem. Re- wolucją jest tu bowiem fakt, że zmiany w aplikacjach internetowych Google dokonują się nieomal w czasie rzeczywistym. Wszystko to właśnie dzięki AJAX. Źródła inspiracji? Od strony użytkownika korzyści są widoczne gołym okiem. Dla zwykłego internauty witryna wykorzystująca AJAX to strona, która niekoniecznie musi się przeładować by zmienić swoją zawartość. W taki sposób można najkrócej wyjaśnić ideę AJAX. Niestety, rozumo- Powinieneś wiedzieć: Wymagana jest dobra znajomość PHP oraz nabyte pewne podstawowe umiejętności posługiwania się JavaScript. Obiecujemy: Szybki start w tworzeniu stron opartych o AJAX. Szybkie wdrażanie nowych pomysłów dzięki XAJAX. 2 www.phpsolmag.org
XAJAX Narzędzia wanie wyłącznie w kontekście samego AJAX-a nie daje prawdziwego obrazu zastosowania tej techniki. Najlepiej więc zasięgnąć przykładów, kierując się w stronę działających aplikacji Google. Rysunek 1 prezentuje aplikację Google Spreadsheets (http://spreadsheets.goog le.com), która nie tylko wyglądem, lecz i funkcjonalnością przypomina typowy arkusz kalkulacyjny. Co więc robi ta aplikacja, tkwiąc uwięziona w przeglądarce internetowej? Odpowiedź jest dość prosta działa, i to wcale nie najgorzej. Czy już czas zmienić swoje przyzwyczajenia i pisać dokumenty w edytorze tekstu umieszczonym na stronie www? Rysunek 2 to przykład aplikacji internetowej niemal żywcem przeniesionej z pakietu biurowego. Writely (http:// writely.com) to produkt Google aspirujący do miana internetowego Worda. Inne duże korporacje internetowe też nie próżnują. Yahoo ze swoim serwisem zdjęciowym Flickr (http://www.flickr.com) także aktywnie wykorzystuje możliwości AJAX. Choćby obracanie zdjęć bez konieczności przeładowania to tylko jedna z robiących wrażenie na użytkownikach funkcji. Jak to działa? AJAX (ang. Asynchronous JavaScript and XML) wykorzystuje do pracy komplet istniejących technologii. Najczęściej do stworzenia aplikacji AJAX wykorzystuje się taki zestaw: Rysunek 1. Google Spreadsheets, internetowy arkusz kalkulacyjny HTML/XHTML odpowiedzialny za budowę struktury strony www.; CSS oprawa graficzna witryny; JavaScript realizacja żądań po stronie klienta (wysyłanie/pobieranie/ przetwarzanie w ograniczonym stopniu); DOM obiektowy dostęp do struktury dokumentu (X)HTML; XML pełniący tu rolę protokołu transportowego (do wymiany pakietów danych); PHP (lub dowolny inny język skryptowy: ASP/JSP/Ruby) realizacja żądań po stronie serwera (wysyłanie/ odbieranie danych/przetwarzanie danych ograniczone przez możliwości serwera), głównie obejmuje wymianę informacji z bazą danych (np. Postgre- SQL, MySQL, SQLite); XMLHttpRequest interfejs dzięki któremu możliwe jest wysłanie i odbieranie danych przez przeglądarkę w czasie rzeczywistym (bez konieczności przeładowania strony). Rysunek 2. Writely, internetowy edytor tekstu od Google Typowa strona www oparta jest o mechanizm żądań i odpowiedzi realizowanych pomiędzy aplikacją kliencką (przeglądarki) a serwera www przy użyciu protokołu HTTP. Rysunek 4 ilustruje metodę, w której przeglądarka wysyła żądanie metodą GET lub POST i oczekuje odpowiedzi ze strony serwera. Serwer odpowiada wysyłając użytkownikowi kompletny kod strony, zawierający kod HTML, CSS, jak również JavaScript przy każdym wywołaniu strona się przeładowuje. Przy zastosowaniu techniki AJAX początek procesu wygląda dokładnie w ten www.phpsolmag.org 3
Narzędzia XAJAX Rysunek 3. Flickr, serwis zdjęciowy od Yahoo! sam sposób, jak przy metodzie klasycznej patrz rysunek 5. Strona zostaje w pełni załadowana. Gdy użytkownik strony wykonania określoną akcję (kliknie na przycisk), pałeczkę przejmuje JavaScript. Odpowiedni skrypt napisany w tym języku najpierw pakuje odpowiednie dane wejściowe (parametry, które chcemy przekazać) do formatu XML, a następnie tworzy instancję klasy XMLHttpRequest. To właśnie ta klasa okazuje się kluczowa. XMLHttpRequest pozwala na wysyłanie i odbieranie przez przeglądarkę żądań w formie osobnej sesji, niezależnej od aktualnie wyświetlonej strony. W ten sposób do serwera trafia żądanie o określonych parametrach i do pracy zabiera się skrypt przygotowany do wygenerowania odpowiedzi. To właśnie do skryptu pracującego po stronie serwera (napisanego np. w PHP) dostarczone są informacje. Na podstawie dostarczonych danych realizowana jest określona procedura, np. na bazie danych (np. zmiana wartości w bazie, dodanie nowego rekordu). Gdy operacja dobiegnie końca, skrypt tworzy odpowiedź i odsyła ją do skryptu JavaScript, który pierwotnie wywołał akcję. Na podstawie tego, co skrypt otrzyma, dokonywana jest określona akcja. Zazwyczaj polega ona na zamianie zawartości elementu html o określonym identyfikatorze (id) na nowy, nadesłany z serwera. AJAX pozwala na dokonanie wielokrotnej akcji polegającej na wysłaniu i pobraniu danych. Za każdym razem nie wymaga to od przeglądarki przeładowania. AJAX może równie i dobrze pracować w pełni w tle przeglądarki. W takiej sytuacji użytkownik nawet nie spostrzeże, iż dane, które wpisuje do formularza są defacto wysyłane do serwera. Możliwości, jakie daje zastosowanie techniki AJAX pozwalają zatem na tworzenie witryn, które swoim wyglądem i zachowaniem przypominają tradycyjne programy komputerowe. Wywołania AJAX mogą być obsługiwane: Synchronicznie w określonych odstępach czasu (przydatne przy zapisie kopii aktualnie pisanego dokumentu); Asynchronicznie na żądanie (uruchamiane na akcję użytkownika). Rysunek 4. Schemat działania klasycznej strony www Stronę w AJAXie raz, proszę Rolą web designera jest spełnianie potrzeb klientów. Jako projektant stron www spotkałem się wielokrotnie z klientami, których podstawowym wymogiem wobec strony było wykorzystanie technologii AJAX. Klientów urzeka sposób, w jaki dobrze zaprojektowany AJAX pozwala poprawić interakcję z użytkownikiem, zapewnić mu szybki i intuicyjny dostęp do funkcji na stronie. Google dociera do ogromnej rzeszy internautów. Klient zapytany wprost o AJAX zapewne nie będzie zdawał sobie sprawy z istnienia takiej technologii. Gdy jednak zapytam go o serwisy, które powinienem przyjąć za wzór, często uzyskuję odpowiedź zbieżną z moimi przewidywaniami. Serwisy, które podobają się wszystkim (wyróżniają się) generalnie wykorzystują w mniejszym, bądź większym stopniu możliwości AJAX. Z AJAXem jest jednak podobnie jak z innymi nowinkami. Wśród programistów zawsze znajdują się konserwatyści, uważający AJAX za nic nadzwyczajnego oraz liberałowie, mniej lub bardziej zafascynowani techniką i skorzy do jej wdrażania. Prędzej, czy później każdy z nich będzie zmuszony do tworzenia aplikacji AJAX. Większość obecnie tworzonych stron w żaden sposób nie przypomina aplikacji w rodzaju Google Spreadsheets, czy Writely. Dlatego też rzadziej używamy w stosunku do nich terminu strona www. Strona powinna raczej pełnić rolę informacyjną (dostarczać treści), a zadaniem tych aplikacji jest wyłącznie realizacja konkretnej usługi. Klienci indywidualni i korporacyjni zainteresowani stworzeniem nowego rozwiązania w sieci, zdecydowanie najrzadziej decydują się na stworzenie tego typu usługi. Trudno więc pisać o technologii AJAX w kontekście odsuniętym od realiów rynku. Strony internetowe potrzebują prze- 4 www.phpsolmag.org
XAJAX Narzędzia AJAX posiada wady, z których główne to: myślanej dawki technologii AJAX. W myśl tego twierdzenia dochodzimy do wniosku, że AJAX mógłby być wykorzystany na witrynie firmowej, czy na forum dyskusyjnym. Czemu nie. Jest wiele sytuacji, w których zastosowanie techniki AJAX ma ogromne znaczenie. Witryny i portale tematyczne, serwisy usługowe i informacyjne napotykają na co najmniej kilka sytuacji, w których użycie AJAX mogłoby pomóc w zapewnieniu wyższej funkcjonalności strony. Kluczem do poprawnego wdrażania technik AJAX jest przestrzeganie kilku reguł przy projektowaniu: Ładowanie dużych partii tekstu za pomocą AJAX, np. kolejnych części długiego artykułu jest niezgodne ze sztuką. Kolejne partie tekstu nie zostaną zaindeksowane przez wyszukiwarkę, a użytkownik i tak nie odczuje znacznego przyspieszenia ładowania nowej treści. Większość witryn techniki AJAX powinno traktować jako dodatek do dotychczasowej funkcjonalności strony. Zapewni to lepszą funkcjonalność strony, ale nie zmniejszy dostępności witryny, wówczas gdy klient posiada wyłączoną obsługę JavaScript. W tym celu konieczne jest zapewnie odpowiedniego zaplecza programistycznego po stronie serwera, które sprawi, że strona nie będzie całkowicie bezużyteczna. Znacznie bezpieczniej jest stworzyć kompleksowy serwis bez użycia AJAX, a następnie dodać do niej AJAX. W ten sposób bez AJAX strona może poprawnie funkcjonować; Rysunek 5. Schemat działania strony opartej o AJAX AJAX doskonale nadaje się do tworzenia przełączników, np. dodaj to zdjęcie do obserwowanych, które aktualizują bazę i zmieniają napis na przełączniku usuń z obserwowanych. Dzięki AJAX można umożliwić szybkie dokonywanie zmian, np. zmiana tytułu artykułu bez konieczności klikania na wyślij i przeładowania strony. W momencie, gdy użytkownik przestanie pisać, uruchamiane jest żądanie AJAX a treść tytułu zapisywana do bazy. Pomimo oczywistej korzyści dla użytkownika, konieczne jest zapewnienie oprogramowania, które zadziała przy wyłączonej obsłudze JS. Wciśnięcie w przeglądarce przycisku wstecz nie powoduje odwrócenia żadnego z procesów AJAX. Taka jest niestety wada tej technologii, która pod tym względem przegrywa z przyzwyczajeniami internautów; Elementy stron wstawiane przez AJAX nie są indeksowane przez wyszukiwarki; Wyłącznie obsługi JavaScript powoduje, że AJAX przestaje działać. Powyższe rady nie dotyczą oczywiście aplikacji internetowych, które zbudowano kompleksowo w oparciu o AJAX, takich jak opisywany Writely, czy G. Spreadsheets. W takich sytuacjach wyłączenie obsługi JavaScript powoduje całkowitą niedostępność usługi. Biblioteki W celu ułatwienia pracy przy tworzeniu aplikacji internetowych opartych o AJAX programiści sięgają po gotowe biblioteki. Nie ma nic w tym złego, bo biblioteki realizują większość krytycznych funkcji, będąc odpowiedzialne za faktyczny transport danych pomiędzy klientem a serwerem. Biorąc pod uwagę ciągły proces udoskonalania i popularność niektórych bibliotek, można śmiało stwierdzić, że tworzenie całej aplikacji od zera mija się z celem, podwyższając w dodatku budżet produkcyjny. Rysunek 6. XAJAX to narzędzie do szybkiego wdrażania AJAX na strony tworzone w oparciu o PHP www.phpsolmag.org 5
Narzędzia XAJAX Rysunek 7. Wygląd gotowego systemu zakładek Możemy rozróżnić dwa rodzaje bibliotek wspomagających programowanie, ze względu na nacisk, który położono na programowanie w: JavaScript; PHP. Położenie większego nacisku, na któryś z powyższych języków programowania może wydawać się nieco niejasne. W bibliotece, w której nacisk położono na PHP zadania programisty ograniczają się w zasadzie wyłącznie do pisania nowych funkcji obsługi żądań po stronie serwera. Biblioteka poradzi już sobie z resztą generując odpowiednie skrypty JavaScript do obsługi. Oczywiście nie obędzie się całkowicie bez JavaScriptu, lecz stosunek kodu pisanego w PHP do JavaScript będzie jak jeden do pięciu. Biorąc pod uwagę, iż większość programistów traktuje JavaScript jak trudne do kontrolowania dziecko, warto postawić na biblioteki z tej rodziny. Taki jest też XAJAX, biblioteka, której poświęcono tej artykuł. XAJAX XAJAX to biblioteka udostępniana w formie klasy PHP. Oparta o otwarty kod źródłowy udostępniana jest na licencji LGPL. Oznacza to, iż można na niej opierać aplikacje, za które dostaniemy zapłatę. Jak to działa? XAJAX składa się z dwóch bibliotek napisanej w PHP oraz napisanej w JavaScript. Każda z nich przyjmuje na siebie część zadań. Biblioteka XAJAX pracująca w formie obiektu PHP dla każdej funkcji PHP (która ma mieć możliwość asynchronicznej wymiany danych) generuje skrypt Java- Script odpowiedzialny za obsługę żądań. W momencie, gdy nastąpi żądanie, uruchamiany jest ten skrypt, który poprzez obiekt XMLHttpRequest komunikuje się z obiektem xajax mieszczącym się po stronie serwera. Ten wywołuje już tylko funkcję PHP odpowiedzialną za realizację żądania. Gdy funkcja PHP zostanie zrealizowana, xajax zwróci odpowiedź w formie dokumentu XML. Ta zostanie przetworzona parser xajax pracujący po stronie klienta (JavaScript). Odpowiedź zostanie zwrócona przez tenże skrypt JavaScript zazwyczaj w formie aktualizacji danych na stronie. XAJAX posiada wiele interesujących cech i właściwości: XAJAX jest aplikacją zorientowaną obiektowo. Rozszerzanie funkcjonalności oraz separowanie kodu od danych jest tu zadaniem bardzo łatwym. XAJAX łatwo też wdrożyć do już istniejących systemów. Stworzenie dodatkowych klas do obsługi ajax sprawia, iż programista zapomina całkowicie o tej technologii skupiając się na najbardziej dla niego istotnej logice biznesowej; XAJAX pracuje poprawnie na przeglądarkach z rodziny Mozilla (Firefox, Mozilla lub inna oparta o silnik Gecko), Internet Explorer i Safari; Istnieje możliwość bardzo łatwego i szybkiego zastępowania istniejących wartości nowymi. W ten sposób łatwo zmienić nie tylko porcję wyświetlanego aktualnie tekstu, ale także i styl css elementów, czy zaznaczyć pola checkbox lub radio formularzy; XAJAX posiada przyjazny mechanizm umożliwiający debugowanie napisanego wcześniej kodu. W formie okien JavaScript, XAJAX informuje o aktualnie podejmowanych przez bibliotekę działaniach. To przyspiesza programowanie i wyklucza przypadkowe błędy; XAJAX oferuje bardzo prosty mechanizm obsługi formularzy. Przy użyciu jednej funkcji otrzymujemy tablicę z danymi, które następnie można obrobić, wrzucić do bazy danych lub zwrócić użytkownikowi informację o błędnie wypełnionych polach; Przy obsłudze żądania możliwe jest zwrócenie dodatkowej funkcji Java- Rysunek 8. Wygląd gotowego systemu dodawania do obserwowanych 6 www.phpsolmag.org
XAJAX Narzędzia Script, która zrealizuje bardziej zaawansowane zadanie (np. wyśle formularz, gdy ten zostanie sprawdzony przez AJAX na obecność błędów); XAJAX porównuje dane, które mają zostać uaktualnione na stronie, z tymi, które już w danym miejscu się znajdują. Jeżeli nic nie ulega zmianie, xajax nie podejmuje działań. W ten sposób Listing 1. Kod źródłowy systemu zakładek. <?php require('lib/xajax.inc.php'); function tabarea($tabid) { sleep(1); $objresponse = new xajaxresponse(); for($x=1; $x<=6; $x++) { $x == $tabid? $classname = 'active' : $classname = ''; $objresponse->addscript("document.getelementbyid('tab".$x."'). classname='$classname'"); $objresponse->addassign("maintabarea", "innerhtml", implode('', file('tpl/tab_content_'.$tabid.'.html'))); return $objresponse->getxml(); $xajax = new xajax(); $xajax->registerfunction('tabarea'); $xajax->processrequests();?> <html> [..] <?=$xajax->printjavascript()?> </head> <body> <script type="text/javascript"><!-- xajax.loadingfunction = function(){xajax.$('loading') style.display='block';; function hideloadingmessage() { xajax.$('loading'). style.display='none'; xajax.doneloadingfunction = hideloadingmessage; // --></script> <div class="content"> <ul class="tabs" id="maintab"> id="tab1" class="active"><a href="?show= tab1" onclick="xajax_tabarea('1'); return false;">tab 1</a></li> <li id="tab2"><a href="?show=tab2" onclick= "xajax_tabarea('2'); return false;">tab 2</a></li> id="tab3"><a href="?show=tab3" onclick= "xajax_tabarea('3'); return false;">tab 3</a></li> id="tab4"><a href="?show=tab4" onclick= "xajax_tabarea('4'); return false;">tab 4</a></li> id="tab5"><a href="?show=tab5" onclick= "xajax_tabarea('5'); return false;">tab 5</a></li> id="tab6"><a href="?show=tab6" onclick= "xajax_tabarea('6'); return false;">tab 6</a></li> </ul> <div class="insider"> <div id="loading">ładowanie...</div> <div id="maintabarea"> <? include('tpl/tab_content_1.html')?> </div> </div> </div> </body> </html> nie obserwujemy migania charakterystycznego dla aplikacji XAJAX opartych o model synchroniczny; Dla każdej z funkcji PHP może zostać przypisana inna metoda obsługi (POST lub GET). To pozwala zwiększyć nieco bezpieczeństwo całej aplikacji i zapobiega przypadkowym błędom; Dane przesyłane pomiędzy klientem a serwerem są kodowane w standardzie UTF-8. To zapewnia poprawną obsługę narodowych znaków diaktrycznych; XAJAX bardzo łatwo integruje się z wszelkimi systemami szablonowymi. Od strony systemu szablonowego konieczne jest dodanie wyłącznie jednej zmiennej. W jej miejsce zostaną wygenerowane odwołania do skryptów JavaScript odpowiedzialnych za realizację żądań; XAJAX w bardzo dobry sposób radzi sobie z wszelkimi skryptami Java- Script. Kod źródłowy strony przed i po wprowadzeniu tej biblioteki w życie nie różni się znacząco. Instalacja XAJAX Zadaniem tego artykułu jest zaprezentowanie praktycznych rozwiązań, które można niemal od zaraz wdrożyć na własną stronę. Zanim jednak przystąpimy do programowania, warto zapoznać się ze strukturą biblioteki oraz dostępnymi metodami. XAJAX można pobrać ze strony mieszącej się pod adresem: http:// www.xajaxproject.org/. Dokumentację do projektu w formie wiki można odnaleźć pod adresem: http://wiki.xajaxproject.org/. Do prawidłowej implementacji XAJAX potrzebne są trzy pliki. Dwa z nich pracują po stronie serwera. Są to następujące skrypty PHP: xajax.inc.php główna klasa biblioteki; xajaxresponse.inc.php klasa do generowania odpowiedzi; Po stronie klienta pracuje jeden skrypt JavaScript; xajax.js klasa do obsługi żądań po stronie klienta; Przyglądając się kodowi źródłowemu xajax.js łatwo zauważyć, iż został on pozbawiony biały znaków. Ze względu na utrudnienia w dokonywaniu zmian w takim skrypcie udostępniono wersję z typowym formatowaniem xajax_uncompressed.js. Do późniejszej kompresji posłuży biblioteka xajaxcompress.php. Wymagania sprzętowe odnośnie biblioteki: Serwer Apache lub IIS (Windows XP/ 2003); PHP 4.3.x lub 5.x; Przeglądarka IE 5.5, Firefox 1.0, Safari 1.3, Opera 8.5. www.phpsolmag.org 7
Narzędzia XAJAX Opis podstawowych metod Zaletą biblioteki XAJAX jest możliwość bardzo szybkiego startu. Podczas codziennej pracy z XAJAX wykorzystamy stosunkowo niewielką ilość metod, będących częścią dwóch klas PHP. Warto pokrótce nakreślić charakterystykę najważniejszych z nich. Klasa xajax (xajax.inc.php): debugon() / debugoff() włącza / wyłącza przydatny tryb usuwania błędów; registerfunction($nazwafunkcji) lub registerfunction(array($nazwa- Funkcji, $nazwaklasy, $nazwametody)) rejestruje funkcję PHP, do której będzie można odwołać się poprzez JavaScript; processrequests() uruchamia silnik odpowiedzialny za obsługę przychodzących wywołań; printjavascript() / getjavascript wyświetla / zwraca kod JavaScript, który musi zostać umieszczony w sekcji head strony. Klasa xajaxresponse (xajaxresponse. inc.php): addassign($idelementu, $atrybut, $dane) pozwala na zamianę wartości elementu HTML o id $idelementu; addscript($kodjs) uruchamia kod JavaScript umieszczony w zmiennej $kodjs; getxml() zwraca odpowiedź do przeglądarki użytkownika; Część XAJAX odpowiedzialna za kod JavaScript (xajax.js) także posiada swój zestaw metod. Wykorzystuje się je w kodzie HTML strony: x a j a x _ N a z w a F u n k c j i ( $ p 1, $p2,...) wywołuje zarejestrowaną funkcję PHP o nazwie NazwaFunkcji, przekazując parametry $p1, $p2,...; xajax.getformvalues($idformul arza) pobiera wszystkie dane, które użytkownik wpisał do formularza o id $idformularza. Zakładki Jednym z najbardziej praktycznych i najpopularniejszych efektów stosowanych na stronach www są obecnie zakładki. Choć podobny mechanizm można zrealizować bez użycia techniki ajax, pokażemy jak Listing 2. Kod źródłowy systemu zakładek. <?php mysql_connect('localhost', 'root', 'root'); mysql_select_db('test'); require('lib/xajax.inc.php'); function fetchobserve($id) { return @mysql_result(mysql_query('select 1 FROM obserwowane WHERE article_id = "'.$id.'"'), 0); function checkobserve($id) { if(fetchobserve($id)) // zaprzestan obserwowania return 'Nie obserwuj'; else //rozpocznij obserwowanie return 'Obserwuj'; function observe($id) { if(fetchobserve($id)) mysql_query('delete FROM obserwowane WHERE article_id = "'.$id.'"'); else mysql_query('insert INTO obserwowane VALUES ("", "'.$id.'")'); $objresponse = new xajaxresponse(); $objresponse->addassign($id, "innerhtml", checkobserve($id)); return $objresponse->getxml(); $xajax = new xajax(); $xajax->registerfunction('observe'); $xajax->processrequests();?> <html> <head> [..] <?=$xajax->printjavascript()?> </head> <body> <div class="content"> <h3>tematy zbliżaj±cych się artykułów</h3> <p style="color: red;">klikaj±c na [..]</p> <h5>51: Użyteczność[..]</h5> <p>[..]</p> <p><a href="" onclick="xajax_observe('51'); return false;" id="51"><?=checkobserve('51')?></a></p> <h5>50: Okiełznać[..]</h5> <p>[..]</p> <p><a href="" onclick="xajax_observe('50'); return false;" id="50"><?=checkobserve('50')?></a></p> <h5>49: SEO[..]</h5> <p>[..]</p> <p><a href="" onclick="xajax_observe('49'); return false;" id="49"><?=checkobserve('49')?></a></p> </div> </body> 8 www.phpsolmag.org
XAJAX Narzędzia ich wszędzie tam, gdzie dojdzie do zmian na stronie. Podstawowym kontenerem, do którego trafia tekst jest maintabarea. Jak łatwo zauważyć poprzedza go kontener loading, który domyślnie jest schowanych. W momencie, gdy XAJAX przystępuje do załadowania nowej zawartości, pojawia się informując użytkownika o trwającym procesie ładowania. Bez takiej informacji użytkownik może poczuć się zdezorientowany. Dokument XHTML jest skonstruowany tak, by nawet po wyłączeniu obstworzyć zakładki, do których dane są pobierane dopiero w momencie kliknięcia na nieaktywną zakładkę. Tworzenie systemu zakładek rozpoczynamy od zbudowania podstawowego kodu XHTML, składającego się z kilku kontenerów oraz listy punktowanej (druga połowa listingu 1). Przy użyciu stylów CSS dokonujemy zmiany wyglądu poszczególnych elementów, tak, by przypominały zakładki. XAJAX rozpoznaje elementy po ich identyfikatorach, stąd istotne jest dodanie Listing 3. Kod źródłowy systemu logowania część pracująca po stronie serwera <?php mysql_connect('localhost', 'root', 'root'); mysql_select_db('test'); define ('XAJAX_DEFAULT_CHAR_ENCODING', 'ISO-8859-2'); require('lib/xajax.inc.php'); if($_server['query_string'] == 'wszystko_ok_loguj') { echo 'yeah! zalogowany'; return 0; function loginform($d) { $objresponse = new xajaxresponse(); $email = $d['aemail']; $pass = $d['apass']; // pytam baze o istnienie loginu $data = @mysql_fetch_array(mysql_query ('SELECT email, password, registered FROM uzytkownicy WHERE email="'.$email.'"')); if(!$email OR!$pass) $out = 'Proszę podać e-mail i login.'; else { if($email!= $data['email']) { $out = 'Konto o podanym adresie nie istnieje.'; else { if($pass!= $data['password']) $out = 'Hasło do konta jest nieprawidłowe.'; else { if($data['registered'] == '0') $out = 'Użytkownik nie potwierdził rejestracji.'; else { $out = 'Proszę czekać. <b>logowanie</b>...'; $objresponse->addscript('document.loginform.submit();'); $objresponse->addassign("logblad", "innerhtml", $out); return $objresponse->getxml(); $xajax = new xajax(); $xajax->registerfunction('loginform'); $xajax->processrequests();?> sługi JavaScript strona pracowała w miarę poprawnie. Stąd linki do kolejnych zakładek posiadają parametry?show=tabx. Oczywiście z uwagi na brak miejsca, w powyższym kodzie brakuje obsługi takiej sytuacji. Poszczególne funkcje w XAJAX wywołuje się stosując konstrukcję xajax_ NazawFunkcji (Parametry). Jak łatwo zauważyć, ilość kodu JavaScript zastosowanego w tym przykładzie jest znikoma. Zastosowany dodatkowy parametr przy właściwości onclik return false powoduje, iż przeglądarka nie podąża za linkiem (element href). Parametr przekazywany do funkcji xajax_tabarea pozwala rozróżnić poszczególne zakładki, które odczytamy z plików szablonowych. Pierwsza połowa Listingu 1 zawiera kompletny kod potrzebny do obsługi wszystkich zdarzeń. Programowanie rozpoczynamy od załadowania części biblioteki XAJAX napisanej w PHP. Opuśćmy na chwilę deklarację funkcji tabarea, by przyjrzeć się instancji klasy xajax mieszczącej się zaraz poniżej. Wszystkie funkcje, które mają być zbierane przez bibliotekę JavaScript xajax muszą zostać uprzednio zarejestrowane. Nazwa funkcji jest oczywiście zgodna z nazwą występującą w kodzie XHTML. Metoda processrequest() generuje odpowiedni kod JavaScript, który jest odpowiedzialny za obsługę żądań. Skompletowany w ten sposób kod JS wrzucamy sekcji HEAD dokumentu XHTML, korzystając z funkcji printjavascript(). Wynik działania tej funkcji to dołączenie do strony części biblioteki XAJAX napisanej w JavaScript. Funkcja zwraca ponadto do kodu źródłowego strony także wszystkie inne dane potrzebne bibliotece do obsługi żądań. Ponieważ w systemie zakładek mamy do czynienia wyłącznie z jedną funkcją, do jej obsłużenia musimy odpowiednio stworzyć jedną funkcję PHP. Nazwa tej funkcji musi być zgodna z zarejestrowaną nazwą oraz nazewnictwem używanym w kodzie strony. Zawartość funkcji tabarea to już praca na zupełnie innej klasie. XajaxResponse odpowiada za generowanie odpowiedzi dla klienta. Parametr wejściowy funkcji $tabid to liczba z zakresu 1-6. W kolejnych plikach mieszących się w katalogu tpl umieszczona jest zawartość kolejnych zakładek. Oczywiście w tym miejscu można posłużyć się bazą danych lub bardziej skomplikowanym skryptem do pobierania danych, www.phpsolmag.org 9
Narzędzia XAJAX np. z bazy tekstowej. Tworząc nową instancję obiektu XajaxResponse przystępujemy do zamiany zawartości elementu DIV o identyfikatorze maintabarea. Wykorzystujemy metodę addassign, która dokona zamiany pobierając dane z jednego z plików szablonowych. Po kliknięciu zakładki chcielibyśmy by zmieniała się ona na aktywną. Zakładka jest aktywna, jeżeli przypisana do elementu LI klasa to active. Przy każdej zmianie zakładki konieczne jest ponowne ustawienie klasy active. W tym celu, dla wszystkich zakładek dokonujemy zresetowania wartości. Tylko zakładce, która jest aktualnie aktywna przypisujemy klasę active. Wysłanie danych z powrotem do użytkownika odbywa się przy użyciu metody getxml(). Funkcja usypiająca skrypt sleep użyta została by pokazać w zwolnieniu działanie skryptu pojawiający się element ładowanie. Dodaj do obserwowanych Kolejny przykład może wydawać się banalny, lecz jego zastosowanie jest nie do podważenia. Zakładamy, iż użytkownik jest zalogowany na naszej stronie. Chcemy mu umożliwić dokonywanie szybkich wyborów, polegających na dodawaniu wybranych zdjęć, artykułów, filmów do listy swoich ulubionych. W klasycznym wydaniu oznacza to konieczność przeładowania strony. AJAX pozwala taką operacje przeprowadzić w tle. Użytkownik klika na element, którym jest zainteresowany. Baza danych jest uaktualniana, a jego przycisk z dodaj do obserwowanych automatycznie zamienia się na usuń z obserwowanych. Mechanizm widoczny na Listingu 2 jest bardzo zbliżony do tego, który obserwowaliśmy w pierwszym przykładzie. Posiadamy trzy przełączniki, odwołujące się do funkcji o nazwie observe. Ładując po raz pierwszy stronę pobieramy z bazy danych informacje o aktualnie ustawionych przełącznikach. Jeżeli rekord dla danego identyfikatora artykułu istnieje, wówczas przełącznik został już włączony. W ten sposób powstaje strona pamiętająca poprzednie ustawienia użytkownika. Klikając na przycisk na stronie, z bazy danych pobierana jest informacja o aktualnym stanie przełącznika i podejmowana jest akcja dodanie lub usunięcie rekordu z informacją. Rysunek 9. Wygląd gotowego systemu logowania Listing 4. Kod źródłowy systemu logowania część pracująca po stronie klienta <html> <head> [..] <?=$xajax->printjavascript()?> </head> <body> moj@email.pl<br/> mojehaslo<br/> <div class="bar"> <h3>zaloguj się</h3> <form action="?wszystko_ok_loguj" method="post" class= "login" name="loginform" id="loginform" style="margin:0;"> <table> <tr> <td><label for="name">e-mail:</label></td> <td class="f"><input type="text" name= "aemail" value=""></td> </tr> <tr> <td><label for="name">hasło:</label></td> <td class="f"><input type="password" name= "apass"></td> </tr> <tr> <td></td> <td style="text-align: right;"><div id= "logblad"></div><input type="submit" value= "Loguj" onclick="xajax_loginform (xajax.getformvalues('loginform')); return false;"></td> </tr> </table> </form> </div> </body> </html> 10 www.phpsolmag.org
XAJAX Narzędzia Logowanie Proces logowania na stronie www przebiega szablonowo. Gdy użytkownik wypełni formularz, ten wysyłany jest metodą POST do serwera użytkownik jest logowany. Co się jednak dzieje, gdy wpisany przez niego login lub hasło są nieprawidłowe? Użytkownik trafi czas, otrzymując komunikat o niepoprawnych danych dopiero po przeładowaniu strony. Stwórzmy zatem system logowania, który po wciśnięciu przycisku loguj sprawdzi poprawność wprowadzonych danych. Jeżeli będą one poprawne, formularz zostanie wysłany metodą POST, a użytkownik zostanie zalogowany. Jeżeli dane będą niepoprawne, użytkownik bez konieczności przeładowania strony otrzyma informację o niepoprawnym loginie, bądź haśle. Ten sposób rozumowania zapewnia, że nawet przy wyłączonej obsłudze AJAX użytkownik będzie mógł skorzystać z usługi. W poprzednich przykładach pominęliśmy kwestię kodowania. Problem nie był zauważalny. By dane przesyłane z serwera poprzez XAJAX miały poprawne kodowanie, należy ustalić domyślny standard kodowania. Mechanizm działania tego przykładu uwzględnia nową właściwość, a mianowicie pobieranie danych, które użytkownik wprowadził do formularza. Na końcu Listingu 4 widoczne jest odwołanie do skryptu JS odpowiedzialnego za obsługę żądania. Wewnątrz funkcji xajax_loginform znajduje się metoda xajax.get- FormValues, gdzie jej parametrem jest identyfikator przypisany do formularza. To właśnie ta linijka jest esencją tego przykładu. Do funkcji loginform widocznej na Listingu 3 trafiają wszystkie dane wprowadzone przez użytkownika w formie tablicy asocjacyjnej $d. Na podstawie danych, które wprowadził użytkownik pobieramy z bazy danych użytkowników informacje. W tym przykładzie może rozpatrujemy zbyt dużą ilość przypadków w których użytkownik popełnia błąd, lecz ma to na celu pokazanie jak szybko i łatwo przekazać użytkownikowi informację o niepoprawnym wprowadzeniu danych. Dopiero, gdy informacje są w pełni poprawne, następuje logowanie. Polega ono na wyświetleniu informacji proszę czekać oraz uruchomieniu skryptu, który automatycznie wyśle formularz. Podsumowanie XAJAX to biblioteka, która pozwala programiście przejść od nauki do programowania po zaledwie kwadransie. Poprawne działanie oraz pełnia automatyzacja sprawia, iż implementacja technik opartych o AJAX staje się nieskomplikowana i przez to osiągalna dla każdego. W XA- JAX-ie urzeka nie tylko prostota i efektywność działania, lecz także mała inwazyjność w kod już istniejących aplikacji. Przykładem na to jest kod JavaScript, o którym praktycznie zapomina się w momencie dołączenia biblioteki xajax.js do sekcji head strony. Pozostałe czynności związane z JS ograniczają się już tylko do tworzenia odwołań do funkcji PHP. XAJAX spisuje się dobrze, nawet gdy pod uwagę wziąć kwestię obsługi rodzimych znaków diaktrycznych. Bibliotekę tą można uznać za idealną dla wszystkich tych programistów PHP, którzy cenią sobie stałość i przewidywalność środowiska programistycznego jakim jest język PHP. Umiejętnie napisany kod PHP do obsługi XAJAX pozwala na bardzo szybkie zmiany, dzięki czemu nakłady dodatkowej pracy przy usuwaniu usterek są minimalne. W artykule udało się pokazać tylko najpopularniejsze metody oferowane przez biblioteki XAJAX. Więcej informacji o pozostałej funkcjonalności biblioteki można znaleźć w dokumentacji. O autorze Paweł Grzesiak jest projektantem witryn internetowych z sześcioletnim doświadczeniem. Zajmuje się tworzeniem rozbudowanych witryn w oparciu o system CMS własnego autorstwa. Jest autorem ponad 50 publikacji w Magazynie Internet, Internet Maker oraz phpsolutions. Obecnie pracuje nad książką, która ukaże się nakładem wydawnictwa Helion pod koniec tego roku. Kontakt: pawel@grzesiak.com.pl www.phpsolmag.org 11