IDZ DO

PRZYKADOWY ROZDZIA
SPIS TRECI

KATALOG KSIEK
KATALOG ONLINE
ZAMW DRUKOWANY KATALOG

TWJ KOSZYK
DODAJ DO KOSZYKA

CENNIK I INFORMACJE
ZAMW INFORMACJE
O NOWOCIACH
ZAMW CENNIK

CZYTELNIA
FRAGMENTY KSIEK ONLINE

Wydawnictwo Helion
ul. Kociuszki 1c
44-100 Gliwice
tel. 032 230 98 63
e-mail: helion@helion.pl

AJAX i PHP. Tworzenie

interaktywnych aplikacji
internetowych
Autorzy: Cristian Darie, Bogdan Brinzarea,
Filip Chereche-Toa, Mihai Bucica
Tumaczenie: Julia Malinowska
ISBN: 83-246-0644-0
Tytu oryginau: Ajax And PHP:
Building Responsive Web Application
Format: B5, stron: 328
Poznaj moliwoci technologii AJAX
Utwrz aplikacje dziaajce po stronie klienta i serwera.
Wykorzystaj pliki w formacie XML.
Zaimplementuj mechanizmy przecignij i upu na stronach WWW.
Technologia AJAX powstaa w wyniku poczenia kilku technik, dziki ktrym moliwe
byo ograniczenie do minimum procesu przeadowywania stron WWW podczas ich
przegldania przez uytkownikw. AJAX, czcy w sobie moliwoci jzykw
JavaScript i XML, jest wietnym narzdziem do tworzenia interaktywnych witryn
internetowych, ktre pozwala na zaimplementowanie w nich mechanizmw dotychczas
kojarzonych z aplikacjami tradycyjnymi. Za pomoc technologii AJAX moemy
weryfikowa dane wprowadzane do formularzy, tworzy wykresy w czasie
rzeczywistym i dodawa do aplikacji internetowych wiele innych, przydatnych funkcji.
Ksika AJAX i PHP. Tworzenie interaktywnych aplikacji internetowych to przewodnik
po technologii AJAX i jej moliwociach. Czytajc j, nauczysz si pisa wydajny i atwy
w konserwacji kod AJAX-a, czy t technik z jzykiem PHP i baz danych MySQL
oraz tworzy systemy wielowtkowe. Dowiesz si, jak budowa aplikacje WWW,
ktrych obsuga nie bdzie rnia si od obsugi aplikacji dla systemu Windows.
Wykorzystasz moliwoci jzykw SVG i XML do kreowania interaktywnych
i dynamicznych elementw witryn WWW, a take poznasz najlepsze praktyki
programistyczne dla technologii AJAX.
Korzystanie z obiektowego modelu dokumentu (DOM)
Aplikacje AJAX dziaajce po stronie przegldarki
Poczenie techniki AJAX z PHP i MySQL
Weryfikacja danych z formularzy
Tworzenie komunikatora internetowego
Dynamiczne tworzenie tabel i wykresw
Przetwarzanie kanaw RSS
Mechanizmy przecignij i upu
Poznaj najnowoczeniejsz technologi tworzenia aplikacji WWW

Spis treci
O autorach

O recenzentach

Przedmowa

11

Rozdzia 1. Technologia AJAX a przyszo aplikacji internetowych

17

Dostarczanie nowych funkcjonalnoci przez internet

Zalety aplikacji internetowych
Tworzenie stron WWW od roku 1990
HTTP i HTML
PHP i inne technologie strony serwera
JavaScript i inne technologie po stronie klienta
Czego brakuje?
Rozumienie technologii AJAX
Tworzenie prostej aplikacji w AJAX i PHP
Podsumowanie

Rozdzia 2. Techniki po stronie klienta wykorzystujce ulepszony JavaScript

JavaScript i obiektowy model dokumentu
Zdarzenia w JavaScript i interfejs DOM
Jeszcze wicej o interfejsie DOM
JavaScript, DOM i CSS
Korzystanie z obiektu XMLHttpRequest
Utworzenie obiektu XMLHttpRequest
Inicjalizacja dania za pomoc obiektu XMLHttpRequest
Obsuga odpowiedzi serwera
Praca ze strukturami XML
Wicej o obsudze bdw i zwracaniu wyjtkw
Tworzenie struktur XML
Podsumowanie

19
20
20
21
22
23
24
25
29
41

43
44
48
52
55
58
59
64
67
74
79
83
84

Spis treci

Rozdzia 3. Techniki po stronie serwera z wykorzystaniem PHP i MySQL

PHP i DOM
Przekazywanie parametrw i obsuga bdw PHP
czenie si z serwerami zdalnymi a bezpieczestwo w JavaScript
Korzystanie ze skryptu serwera proxy
Szkielet aplikacji dla powtarzajcych si da asynchronicznych
Praca z MySQL
Tworzenie tabel bazy danych
Manipulacja danymi
czenie si z baz i wykonywanie zapyta
Pakowanie i porzdkowanie struktury
Podsumowanie

Rozdzia 4. Weryfikacja danych formularza AJAX

Implementacja weryfikacji danych formularza w AJAX
Wielowtkowy AJAX
Podsumowanie

Rozdzia 5. Czat AJAX

Wstp do AJAX czat
Rozwizania AJAX czat
Implementacja AJAX czat
Podsumowanie

Rozdzia 6. Podpowiadanie i autouzupenianie w AJAX

Wstp do autouzupeniania i podpowiadania w AJAX
Google Suggest
Implementacja autouzupeniania i podpowiadania w AJAX
Podsumowanie

Rozdzia 7. Tworzenie wykresw w czasie rzeczywistym z wykorzystaniem AJAX SVG

Tworzenie kodu wykresu powstajcego w czasie rzeczywistym
przy uyciu technologii AJAX i SVG
Podsumowanie

Rozdzia 8. Tabela AJAX

Implementacja tabeli danych AJAX przy uyciu transformacji XSLT po stronie klienta
Podsumowanie

Rozdzia 9. Czytnik RSS AJAX

Praca z RSS
Struktura dokumentu RSS
Google Reader
Implementacja czytnika RSS w AJAX
Podsumowanie

85
86
93
102
109
115
127
127
130
131
136
148

149
150
153
175

177
177
178
179
199

201
202
202
203
227

229
230
245

247
248
270

271
271
272
273
274
286

Spis treci

Rozdzia 10. Przecignij i upu w wykonaniu AJAX

Funkcja Przecignij i upu w sieci
Koszyki zakupw
Listy do sortowania
Tworzenie listy z moliwoci sortowania przy uyciu funkcji Przecignij i upu
w technologii AJAX
Podsumowanie

Dodatek A Przygotowanie rodowiska pracy

Przygotowanie rodowiska Windows
Instalacja serwera Apache
Instalacja MySQL
Instalacja PHP
Przygotowanie rodowiska *nix
Instalacja serwera Apache
Instalacja MySQL
Instalacja PHP
Instalacja phpMyAdmin
Przygotowanie bazy danych AJAX

Skorowidz

287
287
288
288
289
305

307
308
308
310
311
313
313
313
314
315
316

319

1
Technologia AJAX
a przyszo aplikacji
internetowych
Mj may kuzyn zwrci si do pierwszego widzianego w swoim yciu komputera z takimi
sowami: Komputerze, narysuj robota!. (Komputer nie przyj tej komendy, poniewa dosta
ode mnie cise instrukcje, by nie sucha nieznajomych). Jeli mylisz podobnie do mnie, to
pierwsz Twoj myl bdzie jakie to gupie lub jakie to zabawne ale to bd. Nasze
wyedukowane i wymodelowane mzgi opanoway do pewnego stopnia sztuk porozumiewania
si z komputerem. Ludzi szkoli si, aby dostosowywali si do komputerw, aby kompensowali
nieumiejtno maszyny do pojmowania ludzkiego sposobu mylenia. (Z drugiej strony, ludzie
nie przystosowuj si zbyt dobrze, ale to ju inna historia).
Ta anegdotka bardzo dobrze pokazuje podejcie wikszoci ludzi do pracy na komputerze.
W idealnym wiecie taka ustna komenda wystarczyaby, aby komputer podj prac, co z kolei
zadowolioby mojego maego kuzyna. Chocia rozwijajca si technologia jest coraz bardziej
przyjazna uytkownikowi, to nadal prawdziwie inteligentne maszyny znajduj si daleko poza
naszym zasigiem. Do czasu, gdy uda si nam takie skonstruowa, ludzie, wic rwnie Ty, s
skazani na mudn nauk pracy z komputerem. Niektrzy uytkownicy do tego stopnia powicaj si tej pasji, e kocz jako fanatycy czarnego ekranu z migajcym w linii komend
malekim znakiem zachty.
Nieprzypadkowo nawyki, ktre wikszo z nas wyksztaca w czasie pracy na komputerze,
powstaj podczas pracy z oprogramowaniem posiadajcym intuicyjny (oczywicie dla czowieka) interfejs. Std zapewne bierze si zawrotna kariera prawego przycisku myszy, fenomen
funkcji przecignij i upu czy malekiego okienka tekstowego, ktre potrafi przeszuka dla

AJAX i PHP. Tworzenie interaktywnych aplikacji internetowych

Ciebie ca zawarto internetu w poszukiwaniu podanego przez Ciebie hasa. I wszystko to

w cigu 0,1 sekundy (a przynajmniej tak twierdz jego projektanci)! Przemys zwizany z projektowaniem oprogramowania (czy te raczej ta jego cz, ktra przynosi zyski) obserwowa,
analizowa i uczy si. W rezultacie rynek oprogramowania jest zalewany programami, ktrych
interfejs obfituje w byszczce przyciski, ikonki, okna i kreatory, a ludzie pac cikie pienidze za takie produkty.
Przemys oprogramowania wycign ze swoich obserwacji wniosek, e odpowiednikiem potnego silnika w sportowym samochodzie jest program czcy w sobie uyteczno i przystpno. I naprawd wspaniaa jest sytuacja, kiedy dobro producenta idzie w parze z dobrem
klienta. Oznacza to, e zyski firm s mniej wicej proporcjonalne do stopnia zadowolenia
klienta.
Mamy zamiar precyzyjnie i zwile przekazywa nasz wiedz, lecz zanim przejdziemy do
Twojego ulubionego zajcia (pisania kodu), chcemy cofn si troszk i przypomnie cel i motywy
naszych dziaa. Jestemy pasjonatami wspczesnych technologii, a dwik uderzanego klawisza
przyprawia nas o dreszcze. Dlatego jest nam bardzo atwo zapomnie o tym, e technologia
zostaa stworzona, by suy ludziom, dawa im rozrywk w domu i wspiera w pracy.
Kluczem do stworzenia ostatecznych aplikacji jest poznanie sposobu dziaania ludzkiego mzgu.
I cho od tego jestemy dalecy, to rozumiemy, e uytkownik kocowy potrzebuje aplikacji
z intuicyjnym interfejsem. Tak naprawd uytkownika kocowego nie obchodzi, na jakim
systemie operacyjnym pracuje, dopki ten system dziaa zgodnie z jego oczekiwaniami. Jest
to rzecz, o ktrej musisz koniecznie pamita. Wielu programistw popenia bd, prbujc
pracowa z uytkownikiem kocowym i uywa technicznej terminologii (chocia w typowym
zespole projektanckim programista nie ma bezporednio do czynienia z uytkownikiem kocowym). Jeli si z tym nie zgadzasz, postaraj si przypomnie sobie, ile razy uye sw baza
danych w rozmowie z laikiem.
Obserwacje przyzwyczaje i potrzeb ludzi pracujcych z systemami komputerowymi zrodziy
okrelenie uyteczno oprogramowania. Odnosi si ono do sztuki wychodzenia naprzeciw
potrzebom uytkownika, zrozumienia dla charakteru jego pracy i budowania aplikacji zgodnie
z tymi wytycznymi.
Historycznie rzecz biorc, techniki zwikszania uytecznoci byy wykorzystywane do tworzenia aplikacji biurowych, gwnie dlatego, e twrcy aplikacji internetowych nie dysponowali
odpowiednimi narzdziami. Jednak wraz z rozwojem internetu, technologie dostpne dla niego
staj si coraz bardziej zaawansowane.
Wspczesne technologie internetowe nie tylko pozwalaj Ci na tworzenie lepszych stron
WWW, pozwalajcych zaistnie w sieci, ale daj narzdzia potrzebne do tworzenia aplikacji
dedykowanych na potrzeby intranetu. Dla dziaalnoci handlowej online przyjazna strona
WWW jest czym nieodzownym, poniewa internet nigdy nie pi, a klienci czsto migruj
do kolejnej nowinki, ktra wyglda lepiej lub sprawia wraenie szybszej. Jednoczenie moliwoci tworzenia przyjaznej strony WWW daj Ci alternatywne metody projektowania aplikacji dla intranetu. Poprzednio w tej dziedzinie krloway aplikacje biurowe.

18

Rozdzia 1. Technologia AJAX a przyszo aplikacji internetowych

Stworzenie przyjaznego programu byo zawsze prostsze, jeli chodzio o aplikacj biurow,
a nie internetow, gwnie dlatego, e internet by pomylany jako nonik tekstu i grafiki, a nie
kompleksowych rozwiza. Ten problem da si szczeglnie odczu w cigu kilku minionych
lat, kiedy to zaczo si pojawia coraz wicej rozwiza programowych dostarczanych przez
internet.
W rezultacie rozwino si wiele technologii (ktre nadal ewoluuj), majcych upikszy,
usprawni i uprzystpni aplikacje internetowe. Jako przykady mona tu poda aplety Java
i aplikacje Macromedia Flash. Wymagaj one od uytkownika zainstalowania oddzielnych
bibliotek do przegldarek.

Dostarczanie nowych funkcjonalnoci

przez internet
Aplikacje internetowe s szczeglnym rodzajem oprogramowania. Ich zadania s przetwarzane
na serwerze i dostarczane do uytkownika kocowego przez sie internet lub intranet. Do
uruchomienia aplikacji uytkownik korzysta z usug minimalnego klienta (przegldarki), ktry
potrafi wywietli i wywoa dane otrzymane z serwera. Ich przeciwiestwem s aplikacje
biurowe, korzystajce z usug penego klienta, ktrego zadaniem jest przetworzenie wikszoci
danych.
Aplikacje internetowe rozwijaj si, marzc, e pewnego dnia bd dziaa i wyglda jak ich
doroli (i potni) krewni aplikacje biurowe. Obecnie sposb dziaania aplikacji czynnie
wykorzystywanej przez ludzi jest jeszcze waniejszy ni w przeszoci. Dawniej z komputerami pracowali gwnie ludzie obyci z technik. Dzi krg uytkownikw komputerw jest
znacznie szerszy. W dzisiejszych czasach musisz przygotowa adnie wygldajcy raport dla
Kasi, kierownika dziau, i zapewni Dawidowi z dziau handlowego atwy dostp do danych.
Poniewa klient, a w naszym przypadku uytkownik, ma zawsze racj, programy, ktre stworzysz, bd musiay zadowala wszystkich, ktrzy si z nimi zetkn. W przypadku aplikacji
internetowych proces dojrzewania zakoczy si w momencie, gdy ich interfejs i zachowanie
nie bd zdradzay, czy dostpne funkcjonalnoci s otrzymywane z sieci, czy pobierane z lokalnego komputera. Dostarczenie uytecznych elementw interfejsu w aplikacjach internetowych nie byo dotd moliwe ze wzgldu na przywizanie uytkownikw do funkcji aplikacji biurowych, takich jak metoda przecignij i upu czy wykonywanie wielu zada w tym
samym oknie w jednej chwili. Takie funkcjonalnoci byy po prostu niedostpne dla aplikacji
internetowych.
Kolejnym problemem pojawiajcym si w trakcie tworzenia aplikacji internetowej jest standaryzacja. Dzi wszystko, co ma zwizek z sieci, musi by testowane przynajmniej w dwch
przegldarkach. Dopiero wtedy masz pewno, e gocie Twojej witryny bd mogli w peni
cieszy si jej moliwociami.

19

AJAX i PHP. Tworzenie interaktywnych aplikacji internetowych

Zalety aplikacji internetowych

Tak, dostarczanie pewnych funkcjonalnoci przez internet jest rdem niezliczonych bolczek. Dlaczego wic w ogle miaby zaprzta sobie tym gow, zamiast napisa zwyk aplikacj biurow? Poniewa nawet teraz, majc tyle problemw z przystpnoci interfejsu,
aplikacje internetowe maj przewag nad aplikacjami biurowymi. Std te ich ogromna popularno.
Q Aplikacje internetowe s niedrogie i atwe do dostarczenia. Korzystajc z aplikacji

internetowych, firma moe w znacznym stopniu zredukowa koszty utrzymania

dziau informatycznego, wynikajce z potrzeby instalowania oprogramowania na
komputerach uytkownikw. Aplikacje internetowe potrzebuj jedynie komputera
z przegldark i dostpem do sieci.
Q Aplikacje internetowe s niedrogie i proste w aktualizacji. Koszty utrzymania

oprogramowania zawsze byy wysokie. Zalety aplikacji internetowych, ktre

podalimy powyej, odnosz si rwnie do tego punktu, poniewa aktualizacja
posiadanego oprogramowania jest czynnoci podobn do jego pierwszej instalacji.
W przypadku aplikacji internetowej wystarczy dokona aktualizacji na serwerze,
a wszyscy uytkownicy automatycznie otrzymuj jej now wersj.
Q Aplikacje internetowe s bardzo elastyczne. Kiedy tylko zainstalujesz aplikacj

internetow na serwerze z dowolnym systemem operacyjnym, bdziesz mg

jej uywa przez internet, intranet, na maszynach Mac, windowsowych czy
linuksowych, itd. Kada waciwie napisana aplikacja bdzie spisywa si rwnie
dobrze w dowolnej przegldarce, niezalenie czy bdzie to Internet Explorer,
Mozilla Firefox, Opera czy Safari.
Q Aplikacje internetowe pozwalaj na atwiejsze przechowywanie danych.

Kiedy trzeba uzyska dostp do tych samych danych z rnych lokalizacji, znacznie
prociej osiga si ten cel, gdy dane przechowywane s w jednym miejscu, a nie
w oddzielnych bazach znajdujcych si w tych lokalizacjach. W ten sposb unikasz
potencjalnej synchronizacji danych i obniasz ryzyko zamania zabezpiecze.
Postaramy si zgbi sposoby wykorzystania wspczesnych technologii internetowych do
tworzenia lepszych aplikacji. Naszym celem bdzie wydobycie wszystkiego, co oferuje nam sie.
Ale zanim zaczniemy, chcemy Ci udzieli krtkiej lekcji historii.

Tworzenie stron WWW od roku 1990

Cho historia internetu siga nieco dalej wstecz, to rok 1991 by rokiem pojawienia si hipertekstowego protokou transferu (HTTP ang. HyperText Transfer Protocol). Jest on nadal
uywany do przesyu danych w internecie. W kilku pocztkowych wersjach nie robi nic poza
otwieraniem i zamykaniem poczenia. Pniejsze wersje (wersja 1.0 pojawia si w roku 1996,
a wersja 1.1 w 1999) to ju ten protok, ktry znamy i ktrego uywamy.

20

Rozdzia 1. Technologia AJAX a przyszo aplikacji internetowych

HTTP i HTML
Protok HTTP jest wspierany przez wszystkie przegldarki i doskonale radzi sobie z zadaniem,
do ktrego jest przeznaczony pobieraniem prostej zawartoci sieci. Za kadym razem gdy
podajesz swojej ulubionej przegldarce adres strony WWW, domylnie uywany jest protok
HTTP. Na przykad, gdy wpisujesz www.mozilla.org w pasek adresowy przegldarki Firefox,
domylnie przyjmie ona, e chciae napisa http://www.mozilla.org.
Standardowym formatem uywanym w internecie jest hipertekstowy jzyk znacznikw (HTML
ang. HyperText Markup Language), oparty o znaczniki, ktre przegldarki rozumiej,
parsuj i wywietlaj. HTML jest jzykiem, ktry okrela formatowanie i zawarto dokumentu.
Taki dokument skada si gwnie ze statycznego tekstu i obrazw. Zwr uwag, e HTML
nie by przeznaczony do tworzenia zoonych aplikacji internetowych z interaktywn zawartoci czy przyjaznym dla uytkownika interfejsem. Kiedy chcesz uda si na kolejn stron
HTML, korzystajc z protokou HTTP, musisz zainicjowa przeadowanie penej strony. I oczywicie strona HTML musi istnie we wskazanej lokacji, zanim wylesz danie jej wywietlenia.
Wyranie wida, e te ograniczenia nie zachcaj do tworzenia niczego interesujcego.
Pomimo to HTTP i HTML s par cieszc si niesabncym powodzeniem i rozumian zarwno przez serwery, jak i klientw (przegldarki). Stanowi one fundament internetu, ktry
znamy. Rysunek 1.1 przedstawia prost transakcj, podczas ktrej uytkownik wysya danie
wywietlenia strony z internetu, uywajc protokou HTTP.

Rysunek 1.1. Proste danie HTTP

Trzy rzeczy, o ktrych musisz pamita.
1. Transakcje HTTP zawsze maj miejsce midzy klientem sieciowym (oprogramowaniem wysyajcym
danie, na przykad przegldark internetow) a serwerem sieciowym (oprogramowaniem odpowiadajcym na danie, na przykad Apache lub IIS). Od tej pory, piszc o kliencie, bdziemy mieli
na myli klienta sieciowego, a piszc serwer, bdziemy odnosi si do serwera sieciowego.
2. Uytkownik to osoba korzystajca z klienta.
3. Nawet jeli HTTP (czy jego bezpieczna wersja HTTPS) jest najwaniejszym protokoem wykorzystywanym w internecie, to nie jest jedynym. Rne typy serwerw wykorzystuj rne protokoy to
wykonywania poszczeglnych zada, ktre z reguy nie maj nic wsplnego z surfowaniem po sieci.
Najczciej bdziemy tu mwi o protokole HTTP i przez danie w sieci bdziemy rozumieli danie wysane za porednictwem protokou HTTP. W innym razie dokadnie okrelimy, jaki protok
mamy na myli.

21

AJAX i PHP. Tworzenie interaktywnych aplikacji internetowych

Z pewnoci kombinacja HTTP-HTML ma spore ograniczenia. Pozwala jedynie na uzyskiwanie statycznej zawartoci (strony HTML) z internetu. Aby nadrobi te braki, rozwinito kilka
technologii.
Chocia wszystkie dania, o ktrych powiemy, bd uywa do przesyania danych protokou
HTTP, to same dane mog by tworzone dynamicznie na serwerze (na przykad przy uyciu
w tym celu informacji z bazy danych). Co wicej, wszystkie one mog zawiera nie tylko zwyky
HTML, ale mog pozwoli klientowi na zastosowanie pewnych funkcji, nie ograniczajc go
do zwykego wywietlenia statycznej strony.
Technologie, ktre pozwalaj inteligentniej wykorzysta sie, zgrupowalimy w dwch kategoriach:
Q Technologie po stronie klienta pozwalaj klientowi wykonywa bardziej interesujce

zadania ni tylko wywietlanie statycznych dokumentw. Zwykle s to rozszerzenia

jzyka HTML, ktre nie mog go cakowicie zastpi.
Q Technologie po stronie serwera to te, ktre pozwalaj przechowywa na serwerze

logik suc do tworzenia strony w locie.

PHP i inne technologie strony serwera

Technologie wystpujce po stronie serwera sprawiaj, e serwer moe wykonywa znacznie
wicej zada ni tylko zwraca dane pliki HTML. Z ich pomoc moe wykonywa zoone
obliczenia, wykonywa aplikacje zorientowane obiektowo, pracowa z bazami danych, a to
nadal nie wyczerpuje jego moliwoci.
Wyobra sobie tylko, ile danych musi przetworzy Amazon, by wykona obliczenia zgodnie
z indywidualnymi ustaleniami dla kadego klienta. Pomyl, jakie dziaania wykonuje Google
podczas wyszukiwania w swej ogromnej bazie, aby tylko odpowiedzie na Twoje danie. Tak,
to wanie przetwarzanie danych po stronie serwera jest motorem rewolucji internetowej.
Dziki niemu internet jest dla nas tak uyteczny.
Wane jest, aby pamita, e niezalenie od rodzaju dziaa wykonywanych po stronie serwera, odpowied, ktr otrzymuje klient, musi by podana w sposb dla niego zrozumiay. Na
przykad, moesz wykorzysta kod HTML, pamitajc o jego ograniczeniach, ktre podalimy
wczeniej.
PHP jest jedn z technologii uywanych do implementacji specyficznej logiki strony serwera.
W rozdziale 3. przedstawimy krtki wstp do tej technologii. Bdziemy te wykorzystywa
PHP podczas budowy kodu AJAX. Wane, by zapamita, e PHP ma wielu rnych konkurentw, np. ASP. NET (Active Server Pages, technologi projektowania aplikacji wprowadzon
przez Microsoft), Java Server Pages (JSP), Perl, Coldfusion, Ruby on Rails i wiele innych. Kady
z nich wymusza na programicie inny sposb tworzenia funkcjonalnoci po stronie serwera.

22

Rozdzia 1. Technologia AJAX a przyszo aplikacji internetowych

PHP nie jest jedynie technologi strony serwera. Jest to rwnie jzyk skryptowy, z ktrego
moesz korzysta przy pracy nad skryptem PHP. Na rysunku 1.2 pokazalimy, jak realizowane
jest danie przekazania strony PHP o nazwie index.php. Tym razem serwer nie odsya jej
zawartoci, tylko wykonuje skrypt i zwraca wynik swojego dziaania. Wynik musi by w postaci
HTML bd innej zrozumiaej dla klienta.

Rysunek 1.2. danie strony PHP wysyane przez klienta

Po stronie serwera bdziesz z reguy korzysta z usug serwera bazy danych, by sprawnie zarzdza swoimi danymi. W przykadach, ktre zamiecilimy w tej ksice, uywalimy bazy
MySQL, ale zaoenia s takie same dla kadej innej bazy. Podstawy pracy z bazami danych
i PHP poznasz w rozdziale 3.
Jednak nawet korzystajc z PHP, ktry tworzy odpowiedzi oparte na zawartoci bazy danych,
przegldarka nadal wywietla nudny, statyczny i niezbyt inteligentny dokument HTML.
To wanie potrzeba istnienia lepszych, inteligentniejszych narzdzi po stronie klienta spowodowaa powstanie oddzielnej gazi technologii, ktre nazywamy technologiami strony
klienta. Dzisiejsze przegldarki parsuj z powodzeniem nie tylko prosty kod HTML. Zobaczmy,
jak to dziaa.

JavaScript i inne technologie po stronie klienta

Technologie wystpujce po stronie klienta rni si od tych po stronie serwera pod wieloma
wzgldami, poczynajc od sposobu, w jaki s adowane i wykonywane. JavaScript jest jzykiem
skryptowym. Jego kod moesz tworzy w zwykym notatniku i wcza w kod strony HTML
w celu zwikszenia moliwoci Twojej strony. Klient wysya danie dotyczce przesania
strony HTML, ktra moe zawiera kod JavaScript. JavaScript jest obecnie wspierany przez
wszystkie przegldarki i nie wymaga instalowania dodatkowego oprogramowania.
JavaScript jest jzykiem, ktry rzdzi si wasnymi prawami (teoretycznie nie jest zwizany
z rozwojem aplikacji internetowych). Wspiera go wikszo klientw pod prawie wszystkimi
platformami systemowymi. Do tego ma pewne cechy jzyka zorientowanego obiektowo.
JavaScript nie jest jzykiem kompilowanym, wic nie nadaje si do wykonywania zaawansowanych oblicze czy pisania sterownikw. Ponadto, aby przegldarka interpretowaa go poprawnie, musi by do niej dostarczony w caoci, a to z kolei nie sprzyja podnoszeniu bezpieczestwa. Za to doskonale sprawdza si w aplikacjach internetowych.

23

AJAX i PHP. Tworzenie interaktywnych aplikacji internetowych

To wanie JavaScript da projektantom stron internetowych moliwo tworzenia stron, na

ktrych pada nieg, czy takich, na ktrych uytkownik nie spowoduje przeadowania caej
strony (i utracenia wpisanych danych), gdy nie wypeni poprawnie wszystkich pl stworzonego
formularza. Jednak mimo tych moliwoci JavaScript nigdy nie by konsekwentnie wykorzystywany przy poprawianiu interfejsu aplikacji internetowych.
Innymi popularnymi technologiami, jakie rozwiny si po stronie klienta, s aplety Java i pliki
Macromedia Flash. Aplety pisane s w popularnym i potnym jzyku Java, ale ich wykonanie wymaga instalacji Java Virtual Machine. Aplety s niewtpliwie rodkiem, ktry pozwala
bardziej rozwin projekt, ale ostatnio straciy na popularnoci ze wzgldu na zajmowanie
zbyt wielu zasobw komputera. Zdarza si, e aduj si bardzo dugo. Zasadniczo s zbyt potnym narzdziem do realizowania niewielkich potrzeb aplikacji internetowych.
Oprogramowanie Macromedia Flash dostarcza rwnie potnych narzdzi do tworzenia animacji i wszelkich efektw graficznych. De facto stao si standardem, w ktrym tego typu programy s rozprzestrzeniane w internecie. Flash rwnie wymaga instalowania specjalnej wtyczki
w przegldarce. Aplikacje oparte o Flasha stay si bardzo popularne i ich ilo cigle ronie.
Nasuwa si wic nastpujcy wniosek czenie HTML z technologiami po stronie serwera
i klienta daje Ci due moliwoci budowania aplikacji internetowych.

Czego brakuje?
Wida, e mamy pewne moliwoci. Po co wic ludzie poszukuj nowych rozwiza? Czego
nam brakuje?
Jak zauwaylimy na pocztku tego rozdziau, wszelkie technologie istniej po to, by suy
potrzebom rynku. A cz rynku potrzebuje wikszych moliwoci po stronie klienta bez uycia apletw Java, Flasha czy innych tego typu technologii. S zbyt krzykliwe lub z jakich powodw za due dla uytkownikw. W takich przypadkach projektanci zadowalali si stronami
WWW tworzonymi w HTML, JavaScript i PHP (czy dowolnej innej technologii strony serwera).
Przykad realizacji dania w opisany sposb staralimy si zilustrowa na rysunku 1.3.

Rysunek 1.3. HTTP, HTML i JavaScript w akcji

24

Rozdzia 1. Technologia AJAX a przyszo aplikacji internetowych

Widzisz na nim danie przesane protokoem HTTP i odpowied bdc kombinacj HTML
i JavaScript zbudowan za pomoc skryptu PHP. Ukrytym problemem tego rozwizania jest
fakt, e za kadym razem kiedy klient potrzebuje nowych danych z serwera, tworzy si nowe
danie HTTP. To oznacza przeadowanie strony, czyli zamroenie dziaa uytkownika. To
wanie przeadowanie strony jest zem dzisiejszego wiata aplikacji internetowych, a AJAX
zda nam na ratunek.

Rozumienie technologii AJAX

Akronim AJAX rozwija si w nazw Asynchroniczny JavaScript i XML (ang. Asynchronous
JavaScript and XML). Jeli jeste zdania, e to niewiele mwice wyjanienie, to jestemy
skonni przyzna Ci racj. Mwic wprost, AJAX mona traktowa jako wzbogacony JavaScript.
W zasadzie oferuje t sam technik po stronie klienta co JavaScript, ale wykorzystuje j do
wysyania da w tle w celu dostarczenia dodatkowych danych. Takie rozwizanie zabezpiecza
nas przed wielokrotnym przeadowaniem strony i zapewnia aktualizacj danych. Rysunek 1.4
jest wizualizacj typowej transakcji, w ktrej uytkownik da strony z wczonym kodem AJAX.

Rysunek 1.4. Typowe wywoanie AJAX

Mwic oglnie, AJAX ma nam zapewni rwnowag midzy funkcjonalnoci po stronie

klienta i funkcjonalnoci po stronie serwera podczas wykonywania da uytkownika. A do
chwili obecnej obie te funkcjonalnoci byy rozpatrywane oddzielnie, zakadalimy ich dziaanie po kolei. AJAX daje nam moliwo rwnomiernego rozoenia obcienia na obie strony
serwera i klienta, pozwalajc im na komunikacj w tle w czasie, gdy uytkownik pracuje na
stronie WWW.
Sprbujemy przybliy Ci to przy uyciu prostego przykadu. Wyobra sobie formularz,
w ktrym uytkownik musi poda pewne dane (na przykad imi i nazwisko, adres email, haso,
numer karty kredytowej itd.). Poprawno tych danych powinna by sprawdzona przed dotarciem do transakcyjnej czci Twojej aplikacji. Mona to osign na dwa sposoby bez uycia
AJAX. Przede wszystkim, mona pozwoli uytkownikowi wysa formularz i dokona weryfikacji

25

AJAX i PHP. Tworzenie interaktywnych aplikacji internetowych

danych na serwerze. W tym wariancie uytkownik musi odczeka tzw. martwy czas, w ktrym
strona ponownie si aduje. Alternatyw jest wykonanie sprawdzenia po stronie klienta. Pamitaj,
e nie zawsze jest to moliwe (lub wykonalne), poniewa wie si z dostarczeniem zbyt wielu
danych do klienta (wyobra sobie sytuacj, w ktrej musisz sprawdzi, czy podane przez uytkownika miasto znajduje si we wpisanym przez niego pastwie).
W wariancie obsugiwanym przez technologi AJAX, ktry chcemy Ci przedstawi, aplikacja
zweryfikuje poprawno wprowadzonych danych, wykonujc wywoania serwera w tle. Na
przykad, kiedy uytkownik wybierze pastwo, przegldarka w locie wyle do serwera danie pobrania listy miast w danym kraju. Zwr uwag, e uytkownik nieprzerwanie wypenia formularz podczas tej aktywnoci przegldarki i serwera. Przykad formularza weryfikujcego podane dane opisalimy w rozdziale 4.
Na co dzie moesz si zetkn z niezliczonymi przykadami zastosowania technologii AJAX.
Udaj si pod podane niej adresy i sprawd na wasnej skrze t rnic:
Q Google Suggest pomaga Ci w wyszukiwaniach Google. Jej moliwoci s prawdziwie

spektakularne. Wyprbuj http://www.google.com/webhp?complete=1. Yahoo!

Instant Search oferuje podobne waciwoci http://instant.search.yahoo.com/.
(W rozdziale 6. nauczymy Ci tworzy podobne funkcjonalnoci).
Q Gmail (http://www.gmail.com) jest ju tak popularny, e nie trzeba go przedstawia.

Inni usugodawcy kont emailowych opartych o aplikacj internetow, jak Yahoo!

Mail i Hotmail, poszy za tym przykadem i oferuj ju funkcjonalnoci oparte
o AJAX.
Q Google Maps (http://maps.google.com), Yahoo Maps (http://maps.yahoo.com)

i Windows Live Local (http://local.live.com).

Q Inne usugi, jak http://www.writely.com i http://www.basecamphq.com.

W dalszej czci ksiki pokaemy Ci jeszcze inne przykady.

Uwaaj, bo moesz naduy lub uy le technologii AJAX. Samo umieszczenie kodu AJAX na Twojej
stronie nie zagwarantuje Ci, e stanie si ona lepsza. Poprawne wykorzystanie tej technologii jest
w Twoich rkach.

Wiesz ju zatem, e AJAX suy do tworzenia bardziej wszechstronnych i interaktywnych

stron WWW. Udaje mu si to dziki asynchronicznym wywoaniom serwera podczas pracy
uytkownika. AJAX pozwala projektantom tworzy bardziej inteligentne aplikacje internetowe,
ktre bd znacznie lepiej wsppracowa z czowiekiem ni ich poprzednicy.
Wszystkie technologie, ktre skadaj si na AJAX, s ju zaimplementowane w przegldarkach internetowych takich jak Mozilla Firefox, Internet Explorer czy Opera. Oznacza to, e
klient nie musi instalowa dodatkowych moduw, aby uruchomi stron korzystajc z AJAX.
A oto, co skada si na AJAX:

26

Rozdzia 1. Technologia AJAX a przyszo aplikacji internetowych

Q JavaScript jest zasadniczym skadnikiem AJAX. To on pozwala Ci tworzy

funkcjonalnoci po stronie klienta. Aby manipulowa czciami strony HTML,

w funkcjach JavaScript bdziesz intensywnie wykorzystywa obiektowy model
dokumentu DOM (ang. Document Object Model).
Q Obiekt XMLHttpRequest pozwala skryptowi JavaScript asynchronicznie dosta si

do serwera. Uytkownik nie musi przerywa pracy na czas trwania wykonywanych

w tle dziaa. Przez dostp do serwera rozumiemy tu proste danie pliku lub skryptu
na serwerze wysane przez protok HTTP. Takie dania s proste do zrealizowania
i nie napotykaj przeszkd ze strony zapory ogniowej.
Q Technologia po stronie serwera obsuguje danie wysane przez klienta. W tej

ksice wykorzystamy do tego skrypty PHP.

Aby komunikacja klient-serwer przebiegaa sprawnie, musimy mie sposb przekazywania
danych i ich interpretowania. Przekazywanie danych jest t prostsz czci. Skrypt klienta
dostaje si na serwer, uywajc obiektu XMLHttpRequest, i moe wysa pary nazwa-warto,
korzystajc z polece GET lub POST. Odczytanie tych wartoci nie jest trudne. Wystarczy jakikolwiek skrypt po stronie serwera.
Skrypt na serwerze po prostu wysya odpowied przez protok HTTP. Jednak nie jest to
zwyky kod HTML. Serwer uyje formatu, ktry moe by parsowany przez kod JavaScript
po stronie klienta. Sugerujemy Ci format XML, ktrego zalet jest dobre wsparcie i wiele bibliotek pozwalajcych manipulowa dokumentem XML. Ale oczywicie moesz wybra inny
format, jeli masz na to ochot, choby zwyky dokument tekstowy. Popularn alternatyw dla
XML jest Obiektowa Notacja JavaScript (JSON ang. JavaScript Object Notation).
Piszc t ksik, zaoylimy, e znasz ju skadniki technologii AJAX, moe z wyjtkiem
obiektu XMLHttpRequest, ktry jest mniej popularny. Jednak chcemy mie pewno, e za
nami nadasz, wic przedstawimy Ci, jak te elementy dziaaj razem i osobno. O tym
bd traktowa rozdziay 2. i 3. W pozostaej czci rozdziau 1. zajmiemy si oglnym stanem rzeczy. Napiszemy te program w technologii AJAX, eby uspokoi bardziej niecierpliwych czytelnikw.
aden ze skadnikw technologii AJAX nie jest nowy ani rewolucyjny (aden nawet nie ewoluuje), cho co
przeciwnego moe sugerowa nagy zgiek powstay wok niej. Wszystkie skadniki istniej od mniej
wicej 1998 roku. Sam AJAX narodzi si w 2005 roku w artykule Jesse Jamesa Garreta. Z jego treci
moesz zapozna si pod adresem http://www.adaptivepath.com/publications/essays/archives/000385.php.
Popularno przyniosy mu zastosowania w aplikacjach Google.
Nowoci w AJAX jest to, e po raz pierwszy na rynku pojawia si potrzeba standaryzacji i skierowania
rozwoju na konkretne tory. Wynikiem tych dziaa jest mnogo pojawiajcych si bibliotek AJAX i tworzenie
coraz to nowych stron w tej technologii. Wkad Microsoft w rozwj AJAX to projekt Atlas.

27

AJAX i PHP. Tworzenie interaktywnych aplikacji internetowych

Oto lista korzyci pyncych z tworzenia nowej aplikacji z uyciem AJAX:

Q moesz tworzy lepsze i bardziej komunikatywne strony i aplikacje,
Q swoj popularnoci sprzyja rozwojowi szablonw, ktre pozwalaj Ci unikn

wywaania otwartych drzwi podczas rozwizywania podstawowych problemw,

Q wykorzystuje dostpne technologie,
Q wykorzystuje umiejtnoci, ktre ju posiadasz,
Q cechy AJAX idealnie wsppracuj z istniejcymi moliwociami przegldarek

(np. zmiana rozmiaru strony, nawigacja na stronie).

Najczstsze przykady stosowania AJAX:
Q Natychmiastowa weryfikacja danych na serwerze, niezmiernie przydatna

w wypadkach, gdy nie moemy wysa do klienta danych, ktre s niezbdne

do weryfikacji strony. Rozdzia 4. zawiera opis dziaania takiego formularza;
Q Tworzenie prostej aplikacji czat online, ktra nie wymaga zewntrznych bibliotek

typu Java Runtime Machine czy Flash. Taki program stworzysz w rozdziale 5.;
Q Pisanie funkcjonalnoci typu Google Suggest pokaemy Ci w rozdziale 6.,
Q Bardziej efektywne wykorzystanie istniejcych technologii. W rozdziale 7.

napiszesz kod wywietlajcy wykres w czasie rzeczywistym. Wykorzystasz do tego

skalowan grafik wektorow. A w rozdziale 10. uyjesz zewntrznej biblioteki
AJAX do napisania prostej listy przecignij i upu;
Q Tworzenie interaktywnych tabel danych, ktre aktualizuj w locie baz danych

na serwerze. Tak aplikacj pokaemy Ci w rozdziale 8.;

Q Tworzenie aplikacji, ktre wymagaj biecych aktualizacji z zewntrznych rde.

W rozdziale 9. stworzysz prosty agregator RSS.

Pamitaj o potencjalnych problemach:
Q Stay adres strony pisanej z uyciem AJAX powoduje problemy z dodawaniem jej

do zakadek. W przypadku aplikacji AJAX dodawanie do zakadek ma inne

znaczenie, zalene od konkretnej aplikacji. Oznacza to, e musisz w jaki sposb
zachowa stan aplikacji (pomyl tylko o aplikacjach biurowych tam w ogle nie
ma zakadek);
Q Silniki wyszukiwarek mog mie problemy z poprawnym indeksowaniem Twojej

strony;
Q Nacinicie guzika Wstecz powoduje inne rezultaty ni w przypadku klasycznych

aplikacji internetowych, poniewa wszystkie dziaania zachodz w obrbie jednej

strony;
Q Mona zablokowa wykonywanie skryptw JavaScript po stronie klienta, co sprawi,

e Twoja aplikacja przestanie dziaa. W razie takich wypadkw warto mie plan
awaryjny, eby nie traci goci.

28

Rozdzia 1. Technologia AJAX a przyszo aplikacji internetowych

W kocu, zanim zajmiemy si pisaniem pierwszego programu w AJAX, chcemy poda Ci kilka
adresw, ktre mog by przydatne w poznawaniu wiata AJAX:
Q http://ajaxblog.com blog powicony technologii AJAX,
Q http://www.fiftyfoureleven.com/resources/programming/xmlhttprequest

pena kolekcja artykuw dotyczcych AJAX,

Q http://www.ajaxian.com strona Bena Galbraitha i Dion Almaer,

autorw Pragmatic AJAX,

Q http://www.ajaxmatters.com informacyjna strona na temat AJAX,

ktra zawiera mnstwo uytecznych odnonikw,

Q http://ajaxpatterns.org dotyczy wzorcw projektowych AJAX,
Q http://www.ajaxinfo.com rdo artykuw o AJAX,
Q http://ajaxguru.blogspot.com popularny blog,
Q http://www.sitepoint.com/article/remote-scripting-ajax doskonay artyku

Camerona Adamsa, Usable Interactivity with Remote Scripting,

Q http://developer.mozilla.org/en/docs/AJAX strona Mozilli dotyczca AJAX,
Q http://en.wikipedia.org/wiki/AJAX strona AJAX w Wikipedii.

Ta lista w adnym razie nie jest zamknita. Jeli interesuj Ci inne rda w sieci, Google
z pewnoci posuy Ci pomoc. W kolejnych rozdziaach podamy Ci wicej odnonikw, ale
bd one dotyczy bardziej szczegowych zagadnie.

Tworzenie prostej aplikacji w AJAX i PHP

W takim razie bierzmy si za pisanie kodu. Na kolejnych kartach pokaemy Ci, jak stworzy
prost aplikacj AJAX.
To wiczenie przeznaczylimy dla naszych najbardziej niecierpliwych czytelnikw, ktrzy chc zacz
programowa jak najszybciej. Zaoylimy tu, e znasz podstawy JavaScript, PHP i XML. Jeli jest inaczej
lub jeli pomimo Twojej wiedzy zagadnienie bdzie dla Ciebie zbyt trudne, bez wahania udaj si wprost
do rozdziau 2. W nim i w rozdziale 3. przyjrzymy si bliej technologiom i technikom tworzcym AJAX,
wtedy wszystko stanie si jasne.

Zaraz stworzysz prost aplikacj AJAX, ktr nazwiemy quickstart. Uytkownik bdzie w niej
poproszony o podanie imienia, a serwer bdzie przesya odpowiedzi w trakcie pisania. Rysunek 1.5 pokazuje stron startow aplikacji index.html (zwr uwag, e plik index.html aduje
si automatycznie podczas otwierania folderu quickstart bez podania jawnie jego nazwy).

29

AJAX i PHP. Tworzenie interaktywnych aplikacji internetowych

Rysunek 1.5. Strona startowa Twojej aplikacji quickstart

W trakcie gdy uytkownik pisze, serwer wywoywany jest asynchronicznie w regularnych

odstpach czasu. Sprawdzamy w ten sposb, czy serwer rozpoznaje aktualnie podane imi.
dania wysyane s automatycznie w odstpach ok. 1 sekundy. To wyjania, dlaczego nie potrzebujemy przycisku np. Wylij do oznaczenia koca wprowadzania danych. (Ta metoda raczej nie jest odpowiednia do rzeczywistych mechanizmw logowania, ale doskonale pokazuje
moliwoci AJAX).
W zalenoci od podanego imienia, odpowiedzi bd rne. Spjrz na przykad pokazany na
rysunku 1.6.

Rysunek 1.6. Uytkownik otrzymuje natychmiastow odpowied od aplikacji WWW

Moe na pierwszy rzut oka nie widzisz nic niezwykego. Specjalnie podalimy tak prosty
pierwszy przykad. Chodzi o to, aby dokadnie zrozumia, o co w nim chodzi. W tym przykadzie istotne jest to, e odpowiedzi serwera pojawiaj si automatycznie, bez ingerencji
w aktualnie wykonywan przez uytkownika czynno. (Wiadomo pojawia si w trakcie
pisania). Strona nie przeadowuje si, aby wywietli nowe dane, pomimo potrzeby czenia si
z serwerem, aby je uzyska. Nieatwo byoby uzyska taki efekt bez pomocy technologii AJAX.

30

Rozdzia 1. Technologia AJAX a przyszo aplikacji internetowych

W skad aplikacji wchodz:

1. plik index.html, ktry zawiera kod gwnej strony aplikacji;
2. plik quickstart.js, w ktrym znajduje si kod JavaScript, adowany po stronie
klienta jednoczenie z plikiem index.html. Ten plik czuwa nad wykonywaniem
asynchronicznych da, kiedy potrzebna jest dziaalno serwera;
3. plik quickstart.php to skrypt umieszczony na serwerze, ktry jest wywoywany
przez kod JavaScript ze strony klienta.
Rysunek 1.7 pokazuje akcje podejmowane w trakcie dziaania aplikacji.

Rysunek 1.7. Diagram wyjaniajcy dziaanie wszystkich elementw Twojej aplikacji

Kroki od 1. do 5. s typowym daniem HTTP. Po wysaniu dania uytkownik musi poczeka

na zaadowanie strony. W typowym (bez AJAX) rozwizaniu takie adowanie ma miejsce przy
kadym daniu nowych danych z serwera.
Kroki od 5. do 9. demonstruj dziaanie wywoania typu AJAX. Mwic konkretniej, ukazuj
sekwencj asynchronicznych da HTTP. Wykorzystujc obiekt XMLHttpRequest, czymy si
z serwerem. W tym czasie uytkownik moe normalnie korzysta ze strony, tak jak w przypadku
aplikacji biurowej. Nie pojawia si adne odwieanie ani adowanie strony, aby otrzyma dane
z serwera i zaktualizowa jej zawarto.

31

AJAX i PHP. Tworzenie interaktywnych aplikacji internetowych

Nadesza pora, by stworzy taki kod u siebie. Zanim pjdziemy dalej, upewnij si, e przygotowae sobie rodowisko pracy. Dokadny opis tego, co masz zrobi, znajduje si w dodatku A.
Przeprowadzimy Ci tam przez instalacj i ustawienia PHP i Apache. Pokaemy Ci te, jak
postawi baz, ktra bdzie Ci dalej potrzebna (cho nie w tym przykadzie).
Wszystkie wiczenia w tej ksice wymagaj instalacji opisanych w rodowisku A. Jeli przeprowadzisz
instalacj i konfiguracj inaczej, moesz potrzebowa potem rnych zmian, na przykad uywania innych
nazw folderw.

Do dziea! szybki start z AJAX

1. W Dodatku A pokazalimy Ci, jak naley skonfigurowa przegldark i zaoy
folder ajax, do ktrego bdziesz mia dostp przez serwer. W folderze ajax za
podfolder quickstart.
2. W folderze quickstart stwrz plik o nazwie index.html.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>AJAX i PHP: Szybki start</title>
<script type="text/javascript" src="quickstart.js"></script>
</head>
<body onload='process()'>
Serwer chce pozna Twoje imi:
<input type="text" id="myName" />
<div id="divMessage" />
</body>
</html>

3. Utwrz plik o nazwie quickstart.js i zawartoci:

// przechowuje odwoanie do obiektu XMLHttpRequest
var xmlHttp = createXmlHttpRequestObject();
// zwraca obiekt XMLHttpRequest
function createXmlHttpRequestObject()
{
// przechowa odwoanie do obiektu XMLHttpRequest
var xmlHttp;
// jeli uruchomiony jest Internet Explorer
if(window.ActiveXObject)
{
try
{
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}

32

Rozdzia 1. Technologia AJAX a przyszo aplikacji internetowych

catch (e)
{
xmlHttp = false;
}
}
// jeli uruchomiona jest Mozilla lub inne przegldarki
else
{
try
{
xmlHttp = new XMLHttpRequest();
}
catch (e)
{
xmlHttp = false;
}
}
// zwraca utworzony obiekt lub wywietla komunikat o bdzie
if (!xmlHttp)
alert("Bd podczas tworzenia obiektu XMLHttpRequest.");
else
return xmlHttp;
}
// wysya asynchroniczne danie protokoem HTTP, korzystajc z obiektu XMLHttpRequest
function process()
{
// kontynuuje jedynie jeli obiekt xmlHttp nie jest zajty
if (xmlHttp.readyState == 4 || xmlHttp.readyState == 0)
{
// pobiera imi wpisane przez uytkownika w formularzu
name = encodeURIComponent(document.getElementById("myName").value);
// wykonuje stron quickstart.php na serwerze
xmlHttp.open("GET", "quickstart.php?name=" + name, true);
// definiuje metod obsugi odpowiedzi serwera
xmlHttp.onreadystatechange = handleServerResponse;
// wysya danie do serwera
xmlHttp.send(null);
}
else
// jeli poczenie jest zajte, ponawia prb po 1 sekundzie
setTimeout('process()', 1000);
}
// wykonywana automatycznie po otrzymaniu odpowiedzi z serwera
function handleServerResponse()
{
// kontynuuje jedynie jeli transakcja zostaa zakoczona
if (xmlHttp.readyState == 4)

33

AJAX i PHP. Tworzenie interaktywnych aplikacji internetowych

{
// status 200 oznacza pomylne ukoczenie transakcji
if (xmlHttp.status == 200)
{
// wyodrbnia wiadomo XML wysan z serwera
xmlResponse = xmlHttp.responseXML;
// pobiera element gwny ze struktury pliku XML
xmlDocumentElement = xmlResponse.documentElement;
// pobiera wiadomo tekstow pierwszego potomka elementu document
helloMessage = xmlDocumentElement.firstChild.data;
// aktualizuje dane wywietlane klientowi informacjami otrzymanymi z serwera
document.getElementById("divMessage").innerHTML = '<i>' + helloMessage
+ '</i>';
// ponawia sekwencj
setTimeout('process()', 1000);
}
// dla statusu protokou HTTP innego ni 200 zgasza bd
else
{
alert("Wystpi bd podczas uzyskiwania dostpu do serwera: "
+ xmlHttp.statusText);
}
}
}

4. Za plik quickstart.php o zawartoci:

<?php
// wygenerujemy dane wyjciowe jako plik XML
header('Content-Type: text/xml');
// generacja nagwka XML
echo '<?xml version="1.0" encoding="utf-8" standalone="yes"?>';
// utworzenie elementu <response>
echo '<response>';
// pobranie imienia uytkownika
$name = $_GET['name'];
// generacja danych wyjciowych w zalenoci od podanego imienia
$userNames = array('CRISTIAN', 'BOGDAN', 'FILIP', 'MIHAI', 'YODA');
if (in_array(strtoupper($name), $userNames))
echo 'Witaj mistrzu ' . htmlentities($name) . '!';
else if (trim($name) == '')
echo 'Nieznajomy, podaj swoje imi!';
else
echo htmlentities($name) . ', Nie znam Ci!';
// zamknicie elementu <response>
echo '</response>';
?>

34

Rozdzia 1. Technologia AJAX a przyszo aplikacji internetowych

5. Teraz powiniene mc uruchomi swj nowy program. Wpisz w przegldarce

adres http://localhost/ajax/quickstart/. Zaadowana strona powinna wyglda jak
na rysunkach 1.5 i 1.6.
Jeli pojawi si jakie problemy, sprawd, czy przeprowadzie poprawnie instalacj i konfiguracj
zgodnie z wytycznymi z dodatku A. Wikszo bdw powoduj literwki. W rozdziale 2. i 3. pokaemy
Ci obsug bdw w kodzie JavaScript i PHP.

Co wanie zrobilimy?
Teraz zacznie si zabawa musisz zrozumie, co dzieje si w kodzie. (Pamitaj, e szczegy
techniczne dokadniej przedyskutujemy w nastpnych dwch rozdziaach).
Zacznijmy od pliku, z ktrym wsppracuje uytkownik index.html. To w nim znajduje si
odwoanie do tajemniczego pliku quickstart.js. Poza tym ten plik tworzy prociutki interfejs
dla przegldarki. Zwr uwag na wyrnione elementy:
<body onload='process()'>
Serwer chce pozna Twoje imi:
<input type="text" id="myName" />
<div id="divMessage" />
</body>

Kiedy strona si aduje, wykonywana jest funkcja z pliku quickstart.js o nazwie process(). To
sprawia, e element <div> wypeniany jest wiadomoci z serwera.
Zanim zajmiemy si ciaem funkcji process(), przyjrzyjmy si, co dzieje si na serwerze. Tam
jest umieszczony skrypt quickstart.php. To on bdzie tworzy wiadomoci XML wysyane do
klienta. Taki plik XML zawiera element <response>, ktry przygotowuje wiadomo wysyan
nastpnie do klienta.
<?xml version="1.0" encoding="utf-8" standalone="yes"?>
<response>
... wiadomo, jak serwer przesya do klienta...
</response>

Jeli zawarto pola przechowujcego imi wysana przez klienta jest pusta, serwer wywietli
komunikat Nieznajomy, podaj swoje imi!. Jeli w polu pojawi si imi Cristian, Bogdan, Filip,
Mihai lub Yoda, odpowiedzi serwera bdzie Witaj mistrzu <imi uytkownika>!. Na kade
inne imi serwer zareaguje, wysyajc wiadomo <imi>, Nie znam Ci!. Wic jeli Myszka
Miki poda swoje dane, to serwer odele tak struktur XML:
<?xml version="1.0" encoding="utf-8" standalone="yes"?>
<response>
Myszka Miki, Nie znam Ci!
</response>

35

AJAX i PHP. Tworzenie interaktywnych aplikacji internetowych

Plik quickstart.php rozpoczyna swoje dziaanie wygenerowaniem nagwka dokumentu XML

i otwarciem elementu <response>:
<?php
// wygenerujemy dane wyjciowe jako plik XML
header('Content-Type: text/xml');
// generacja nagwka XML
echo '<?xml version="1.0" encoding="utf-8" standalone="yes"?>';
// utworzenie elementu <response>
echo '<response>';

Wyrniona linia nagwka okrela typ danych wyjciowych w naszym przypadku jest to
dokument XML. To bardzo wane, poniewa klient oczekuje wanie takiego pliku (API uyte
do parsowania XML po stronie klienta zgosi bd, jeli w nagwku nie pojawi si ContentType: text/xml). Po okreleniu nagwka, budujemy odpowiedzi XML metod sklejania acuchw znakw. Waciwy tekst odpowiedzi serwera zawarty jest w elemencie <response>,
ktry jest gwnym elementem dokumentu XML. Generujemy go, bazujc na danych wysanych
przez klienta za pomoc dania GET.
// pobranie imienia uytkownika
$name = $_GET['name'];
// generacja danych wyjciowych w zalenoci od podanego imienia
$userNames = array('CRISTIAN', 'BOGDAN', 'FILIP', 'MIHAI', 'YODA');
if (in_array(strtoupper($name), $userNames))
echo 'Witaj mistrzu ' . htmlentities($name) . '!';
else if (trim($name) == '')
echo 'Nieznajomy, podaj swoje imi!';
else
echo htmlentities($name) . ', Nie znam Ci!';
// zamknicie elementu <response>
echo '</response>';
?>

Klient wysya do serwera tekst wprowadzony przez uytkownika (w zaoeniu jego imi),
uywajc parametru dania GET. My, zwracajc ten tekst do klienta, posuymy si funkcj
PHP htmlentities. Pozwoli nam to zastpi znaki specjalne ich odpowiednikami w HTML.
W ten sposb zapewniamy sobie poprawne wywietlanie wiadomoci w przegldarce i eliminujemy ryzyko obnienia poziomu bezpieczestwa.
Formatowanie tekstu dla klienta po stronie serwera (zamiast bezporednio u klienta) jest zym nawykiem.
W sytuacji idealnej jedynym obowizkiem serwera jest wysanie danych w najprostszej postaci. To po
stronie odbiorcy ley obowizek poradzenia sobie z kwestiami bezpieczestwa i formatowaniem. Takie
zaoenie jest jeszcze bardziej sensowne, jeli wyobrazisz sobie, e musisz wstawi taki sam tekst do
bazy danych, ale baza bdzie daa innego formatowania. (W takim przypadku to baza, nie serwer odpowiednim skryptem rozwie kwesti formatowania). W przykadzie quickstart formatowanie strony
HTML skryptem PHP pozwolio nam skrci kod.

36

Rozdzia 1. Technologia AJAX a przyszo aplikacji internetowych

Jeli chcesz sprawdzi dziaanie samego skryptu quickstart.php, wpisz w przegldark http://
localhost/ajax/quickstart/quickstart.php?name=Yoda i zobacz, co uzyskasz. Wielk zalet wysyania parametrw funkcji poleceniem GET jest to, e potem moesz atwo emulowa takie
danie w swojej przegldarce, bo GET oznacza po prostu, e dodae takie parametry jak pary
nazwa-warto do acucha URL. Powiniene otrzyma taki efekt:

Rysunek 1.8. Dane XML generowane przez quickstart.php

Po stronie klienta wiadomo XML odczytuje funkcja handleServerResponse() umieszczona

w pliku quickstart.js. Konkretnie odpowiedzialne za to s pierwsze linie kodu.
// wyodrbnia wiadomo XML wysan z serwera
xmlResponse = xmlHttp.responseXML;
// pobiera element nadrzdny ze struktury pliku XML
xmlDocumentElement = xmlResponse.documentElement;
// pobiera wiadomo tekstow pierwszego potomka elementu document
helloMessage = xmlDocumentElement.firstChild.data;

W tym wypadku obiekt xmlHttp to obiekt XMLHttpRequest, ktrego uywamy do wywoania

skryptu quickstart.php na serwerze. Jego waciwo responseXML ekstrahuje dane z otrzymanego dokumentu XML. Struktura XML jest hierarchiczna. Jej gwny element nazywamy
elementem dokumentu. W naszym przypadku jest to element <response>, ktry zawiera jednego potomka interesujc nas wiadomo. Kiedy tylko j dostaniemy, zostanie wywietlona na ekranie dziki technologii DOM, ktra daje dostp do elementu divMessage w pliku
index.html.
// aktualizuje dane wywietlane klientowi informacjami otrzymanymi z serwera
document.getElementById("divMessage").innerHTML = '<i>' + helloMessage
+ '</i>';

Obiekt document jest domylnym obiektem JavaScript, ktry pozwala manipulowa elementami kodu HTML.

37

AJAX i PHP. Tworzenie interaktywnych aplikacji internetowych

Pozostaa cz kodu z pliku quickstart.js obsuguje danie wysane na serwer, ktre ma uzyska
wiadomo XML. Funkcja createXmlHttpRequestObject() tworzy i zwraca obiekt XMLHttpRequest.
Jest ona dusza, ni by powinna, poniewa chcielimy, by dziaaa w rnych przegldarkach.
Opowiemy o tym szerzej w rozdziale 2. Na razie musisz wiedzie, co ona robi. Obiekt XMLHttpRequest, pojawiajcy si w funkcji process() jako xmlHttp, ma powodowa asynchroniczne wywoanie serwera. Oto jego posta:
// wysya asynchroniczne danie protokoem HTTP, korzystajc z obiektu XMLHttpRequest
function process()
{
// kontynuuje jedynie jeli obiekt xmlHttp nie jest zajty
if (xmlHttp.readyState == 4 || xmlHttp.readyState == 0)
{
// pobiera imi wpisane przez uytkownika w formularzu
name = encodeURIComponent(document.getElementById("myName").value);
// wykonuje stron quickstart.php na serwerze
xmlHttp.open("GET", "quickstart.php?name=" + name, true);
// definiuje metod obsugi odpowiedzi serwera
xmlHttp.onreadystatechange = handleServerResponse;
// wysya danie do serwera
xmlHttp.send(null);
}
else
// jeli poczenie jest zajte, ponawia prb po 1 sekundzie
setTimeout('process()', 1000);
}

Kod, ktry masz przed oczyma, jest sercem AJAX. To on powoduje wysyanie asynchronicznych
da do serwera.
Dlaczego wywoania asynchroniczne s tak wane? Z definicji nie powoduj one zamroenia
wykonywanych dziaa (rwnie przez uytkownika) a do momentu otrzymania odpowiedzi
na wysane wywoanie. Przetwarzanie asynchroniczne implementuje si na bazie architektury
sterowanej zdarzeniami. Przykadem takiej architektury jest graficzny interfejs uytkownika
bez obsugi zdarze najprawdopodobniej musiaby sprawdza bez ustanku, czy uytkownik nacisn przycisk lub przeskalowa okno. W przypadku obsugi zdarze to przycisk zawiadamia aplikacj, e zosta nacinity, wic moesz wtedy podj odpowiednie kroki w funkcji
obsugujcej zdarzenia. W przypadku AJAX ta teoria znajduje zastosowanie przy wysyaniu
da do serwera - jeste automatycznie informowany o nadejciu odpowiedzi.
Jeli ciekawi Ci, jak dziaaaby aplikacja oparta o synchroniczne dania, musisz zmieni
trzeci parametr obiektu xmlHttp.open na warto false i rcznie wywoa funkcj handleServerResponse(). W czasie takiego uruchomienia okienko, w ktrym podajesz dane, bdzie zamroone na czas wysyania dania do serwera (poniewa czas zamroenia jest uzaleniony
od szybkoci poczenia, jest bardzo prawdopodobne, e nie zauwaysz zmian, jeli serwerem
jest Twj wasny komputer).

38

Rozdzia 1. Technologia AJAX a przyszo aplikacji internetowych

// wysya danie protokoem HTTP, korzystajc z obiektu XMLHttpRequest

function process()
{
// pobiera imi wpisane przez uytkownika w formularzu
name = encodeURIComponent(document.getElementById("myName").value);
// wykonuje stron quickstart.php na serwerze
xmlHttp.open("GET", "quickstart.php?name=" + name, false);
// wysya synchroniczne danie do serwera (zamraa proces a do otrzymania odpowiedzi)
xmlHttp.send(null);
//odczytuje odpowied
handleServerResponse();
}

Funkcja process() inicjalizuje nowe danie wysane do serwera, do czego wykorzystuje

obiekt XMLHttpRequest. Jest to moliwe tylko wtedy, gdy obiekt nie jest zajty wykonywaniem
innego dania. W naszym przypadku taka sytuacja pojawi si, gdy serwer bdzie odpowiada
duej ni 1 sekund, co zdarza si przy wolnych poczeniach z internetem. Zatem funkcja
process() rozpoczyna dziaanie od sprawdzenia, czy moe wysa nowe danie:
// wysya asynchroniczne danie protokoem HTTP, korzystajc z obiektu XMLHttpRequest
function process()
{
// kontynuuje jedynie jeli obiekt xmlHttp nie jest zajty
if (xmlHttp.readyState == 4 || xmlHttp.readyState == 0)
{

Jeli poczenie jest zajte, korzystamy z pomocy metody setTimeout i prbujemy po upywie
jednej sekundy (drugi argument funkcji okrela czas w milisekundach, jaki musi upyn
przed ponownym wywoaniem funkcji okrelonej pierwszym argumentem):
// jeli poczenie jest zajte, ponawia prb po 1 sekundzie
setTimeout('process()', 1000);

Jeli linia jest pusta, moesz spokojnie wysa danie. Ponisza linia kodu przygotowuje serwer
na nadejcie dania, ale go nie wysya:
// wykonuje stron quickstart.php na serwerze
xmlHttp.open("GET", "quickstart.php?name=" + name, true);

Pierwszy parametr okrela metod, jak wysyane bdzie imi uytkownika do serwera. Masz
do wyboru metody GET i POST (wicej o tych metodach dowiesz si w rozdziale 3.). Kolejny
parametr to nazwa strony na serwerze, do ktrej chcesz uzyska dostp. Jeli wybrae wczeniej parametr GET, to drugi z parametrw musisz ustawi jako par nazwa=warto. Trzeci parametr przyjmuje warto true, jeli chcesz wywoa serwer asynchronicznie. Przy takim
wywoaniu nie musisz czeka na odpowied. Wystarczy, e zdefiniujesz kolejn funkcj, ktra
wywoa si automatycznie przy zmianie statusu dania.
// definiuje metod obsugi odpowiedzi serwera
xmlHttp.onreadystatechange = handleServerResponse;

39

AJAX i PHP. Tworzenie interaktywnych aplikacji internetowych

Po ustawieniu tej opcji usid spokojnie i pozwl systemowi wywoa funkcj handleServerResponse, gdy cokolwiek stanie si z Twoim daniem. Kiedy wszystko ju poustawiasz, inicjalizujesz danie wywoaniem metody send obiektu XMLHttpRequest:
// wysya danie do serwera
xmlHttp.send(null);

Przyjrzyjmy si teraz funkcji handleServerResponse():

// wykonywana automatycznie po otrzymaniu odpowiedzi z serwera
function handleServerResponse()
{
// kontynuuje jedynie jeli transakcja zostaa zakoczona
if (xmlHttp.readyState == 4)
{
// status 200 oznacza pomylne ukoczenie transakcji
if (xmlHttp.status == 200)
{

Ta funkcja jest wywoywana za kadym razem gdy zmieni si status dania. Funkcja zakoczy dziaanie dopiero gdy warto parametru xmlHttp.response bdzie rwna 4. Moesz te
sprawdza, czy transakcja HTTP zgasza status 200, ktry oznacza, e nie wystpiy problemy
podczas dania HTTP. Dopiero gdy te warunki zostan spenione, bdziesz mg odczyta
odpowied serwera i wywietli j na monitorze uytkownika.
Po otrzymaniu i wykorzystaniu odpowiedzi cay proces powtarza si dziki funkcji setTimeout,
ktra wywouje funkcj process() po upyniciu jednej sekundy (pamitaj, e powtarzanie
wywoania zadania po stronie klienta nie jest niezbdne czy typowe dla technologii AJAX).
Poniej podajemy wywoanie funkcji setTimeout:
// ponawia sekwencj
setTimeout('process()', 1000);

Powtrzmy na koniec, co dzieje si po zaadowaniu strony przez uytkownika (wizualizacj

tego zagadnienia przedstawia rysunek 1.7):
1. Uytkownik uruchamia stron index.html (odpowiada to krokom 1. 4. na rysunku 1.7)
2. Uytkownik zaczyna (bd kontynuuje) wpisywanie swojego imienia
(krok 5. na rysunku 1.7)
3. Wykonanie funkcji process() z pliku quickstart.js powoduje asynchroniczne
wywoanie skryptu quickstart.php na serwerze. Tekst wpisany przez uytkownika
jest przekazywany jako acuch zapytania przez funkcj GET. Funkcja
handleServerResponse obsuguje status dania.
4. Kod z pliku quickstart.php wykonuje si na serwerze. Tworzy dokument XML,
ktry zawiera wiadomo z serwera, i prbuje przekaza go do klienta.

40

Rozdzia 1. Technologia AJAX a przyszo aplikacji internetowych

5. Metoda handleServerResponse jest wielokrotnie (po kadej zmianie statusu)

wykonywana po stronie serwera. Ostatnie wywoanie nastpuje po otrzymaniu
pozytywnej odpowiedzi z serwera. Plik XML zostaje odczytany, wiadomo jest
wypakowywana i wywietlana na stronie.
6. Nastpuje aktualizacja danych wywietlanych uytkownikowi, co nie przeszkadza
mu we wprowadzaniu nowych. Po jednosekundowym opnieniu proces powraca
do punktu 2.

Podsumowanie
W tym rozdziale zaprezentowalimy szybki wstp do wiata technologii AJAX. Jeli chcesz
nauczy si tworzenia aplikacji w tej technologii, musisz zrozumie, dlaczego i gdzie si je
wykorzystuje. Jak kada inna technologia, AJAX nie rozwizuje wszystkich problemw, ale
pomaga radzi sobie z czci z nich.
AJAX pozwala Ci czy moliwoci, jakie daje praca po stronie klienta, z zaletami pracy po
stronie serwera. Wszystko to po to, by mg poprawi jako pracy z Twoj aplikacj. Obiekt
XMLHttpRequest daje Ci moliwo asynchronicznego wywoania strony na serwerze przez kod
po stronie klienta. Napisalimy tak krtki rozdzia celowo i celowo pozostawilimy wiele pyta
bez odpowiedzi. Caa ksika zawiera odpowiedzi na nurtujce pytania i demonstracj wykorzystania funkcjonalnoci AJAX.

41