Ajax.

Biblia
Autor: Steve Holzner
Tumaczenie: Anna Trojan
ISBN: 978-83-246-1199-7
Tytu oryginau: Ajax Bible
Format: B5, stron: okoo 670
oprawa twarda
Skuteczno i bezpieczestwo Twoich aplikacji
Jak korzysta z DOM?
Jak tworzy pywajce menu oraz efekty za pomoc CSS?
Jak szyfrowa dane w HTTP przy uyciu JavaScript?
Dynamiczne, efektowne i sprawne strony internetowe to dzisiaj podstawa wizerunku
kadego przedsibiorstwa. Stworzenie takich wanie witryn umoliwia Ajax zbir
technologii opartych na jzyku JavaScript i XML. Dziki zastosowaniu tej technologii,
coraz bardziej popularnej wrd programistw, aplikacje mog dziaa w przegldarce
internetowej tak jak te, ktre s zainstalowane w komputerze uytkownika, a zmiana
zawartoci strony nie wymaga jej przeadowania.

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

Ajax pozwala na komunikowanie si z serwerem w tle, uatwia tworzenie wyszukiwania

na ywo i umoliwia uaktualnianie danych bez odwieania strony. Funkcje te
powoduj, e znajduje zastosowanie tam, gdzie wywietlany tekst jest stale
uaktualniany, na przykad w aplikacjach czatowych, arkuszach kalkulacyjnych
lub formularzach zamieszczanych na serwerach oraz w wielu innych sytuacjach.
Ajax. Biblia to kompletny przewodnik zawierajcy praktyczne porady, proste
instrukcje i interesujce sztuczki dla webmasterw. Uatwia opanowanie podstaw jzyka
JavaScript, XML, poznanie dynamicznego HTML i CSS, ale take omawia bardziej
zaawansowane zagadnienia, takie jak eliminowanie zapisywania w pamici podrcznej
przegldarki lub stosowanie ukrytych kontrolek dla sprawdzenia, czy uytkownik
widzia ju dan stron. Korzystajc z tego podrcznika, nauczysz si stosowa
biblioteki Ajaksa i JavaScriptu oraz kaskadowe arkusze stylw. Biblia porusza te
wszelkie istotne kwestie dotyczce bezpieczestwa, w tym take zagadnienia zwizane
z uywaniem filtrw w Ajaksie.
Wykorzystanie zaawansowanych bibliotek Ajaksa i JavaScriptu
Obsuga XML za pomoc JavaScriptu
Stylizacja tekstu, kolorw i ta za pomoc CSS
Praca z PHP
Interpolacja zmiennych w acuchach znakw
Tworzenie list argumentw o zmiennej dugoci
Obsuga kontrolek HTML
Tworzenie dynamicznych tabel
Bezpieczestwo w aplikacjach opartych na Ajaksie
Ograniczanie dostpu za pomoc filtrw
Twrz strony w Ajaksie, a bd szybkie, sprawne i absolutnie bezpieczne!

Spis treci
O autorze ......................................................................................................... 13
Przedmowa ...................................................................................................... 15

Cz I Podstawy Ajaksa ............................................................... 19

Rozdzia 1. Wprowadzenie do Ajaksa ............................................................... 21
Co oznacza Ajax? ............................................................................................................................. 24
Co mona zrobi za pomoc Ajaksa? .................................................................................................. 26
Tworzenie wyszukiwania na ywo opartego na Ajaksie ............................................................... 26
Tworzenie kalkulatora opartego na Ajaksie .................................................................................. 27
Rozmawianie za pomoc aplikacji czatowych opartych na Ajaksie ............................................. 28
Przetwarzanie liczb za pomoc arkuszy kalkulacyjnych ............................................................... 29
Przegldanie strony Amazon ......................................................................................................... 31
Otrzymywanie odpowiedzi dziki autouzupenianiu za pomoc Ajaksa ...................................... 31
Logowanie si za pomoc Ajaksa .................................................................................................. 33
Pobieranie obrazkw ...................................................................................................................... 33
Przeciganie i upuszczanie za pomoc Ajaksa .............................................................................. 35
Gry i zabawy z Ajaksem ................................................................................................................ 39
Modyfikacja stron internetowych w locie ...................................................................................... 39
Dodanie interaktywnoci do map ................................................................................................... 45
Poczta elektroniczna oparta na Ajaksie ......................................................................................... 47
Podsumowanie ..................................................................................................................................... 47
Rozdzia 2. Zapoznanie si z JavaScriptem ...................................................... 51
Jakie miejsce w Ajaksie zajmuje JavaScript? ...................................................................................... 51
Krtka historia JavaScriptu .................................................................................................................. 53
Rozpoczcie pracy z JavaScriptem ...................................................................................................... 55
Naprawianie bdw ...................................................................................................................... 57
Komentowanie kodu ...................................................................................................................... 59
Umieszczanie kodu w plikach zewntrznych ................................................................................ 61
Odpowiadanie na zdarzenia przegldarki ...................................................................................... 61
Tworzenie funkcji w JavaScripcie ....................................................................................................... 64
Przekazywanie argumentw do funkcji ......................................................................................... 69
Zwracanie wartoci z funkcji ......................................................................................................... 73
Przechowywanie danych w zmiennych ................................................................................................ 75
Dziaania na danych wykonywane za pomoc operatorw ................................................................. 78
Podejmowanie decyzji za pomoc instrukcji if .................................................................................... 81

Ajax. Biblia
Wykonywanie innego kodu w rnych przegldarkach ...................................................................... 83
Praca z ptlami ..................................................................................................................................... 88
Wykonywanie ptli za pomoc for ................................................................................................ 88
Wykonywanie ptli za pomoc while ............................................................................................ 90
Podczanie JavaScriptu do przyciskw HTML .................................................................................. 93
Podsumowanie ..................................................................................................................................... 95
Rozdzia 3. Tworzenie aplikacji opartych na Ajaksie ...................................... 97
Pisanie kodu w Ajaksie ........................................................................................................................ 97
Tworzenie aplikacji ........................................................................................................................ 99
Pisanie kodu w JavaScripcie ........................................................................................................ 100
Tworzenie obiektu XMLHttpRequest .......................................................................................... 101
Otwieranie obiektu XMLHttpRequest ......................................................................................... 105
Obsuga pobieranych danych ....................................................................................................... 107
Otrzymywanie danych ................................................................................................................. 111
Pobieranie danych ........................................................................................................................ 112
Inne sposoby tworzenia obiektw XMLHttpRequest .................................................................. 113
Interakcja z kodem po stronie serwera ............................................................................................... 115
Przekazywanie danych do skryptw po stronie serwera .................................................................... 117
Przekazywanie danych do serwera za pomoc metody GET ...................................................... 118
Przekazywanie danych do serwera za pomoc metody POST .................................................... 121
Wykorzystywanie Ajaksa z XML ...................................................................................................... 126
Tworzenie kodu XML .................................................................................................................. 126
Pobieranie XML ........................................................................................................................... 128
Podsumowanie ................................................................................................................................... 134
Rozdzia 4. Rozszerzone techniki programowania w Ajaksie ....................... 135
Praca z wieloma jednoczesnymi daniami XMLHttpRequest ......................................................... 136
Wykorzystywanie wielu obiektw XMLHttpRequest ................................................................. 138
Przechowywanie obiektw XMLHttpRequest w tablicy ............................................................. 141
Wykorzystywanie funkcji wewntrznych .................................................................................... 144
Obsugiwanie kodu w JavaScripcie przysanego z serwera ............................................................... 150
Zwracanie kodu w JavaScripcie ................................................................................................... 151
Zwracanie obiektw JavaScriptu ................................................................................................. 154
czenie si z Google Suggest ........................................................................................................... 155
Wywoywanie innej domeny w Ajaksie ............................................................................................ 163
Przykad logowania ............................................................................................................................ 164
Praca z Ajaksem i daniami HEAD ................................................................................................. 166
Otrzymanie wszystkich danych z nagwkw ............................................................................. 166
Otrzymywanie okrelonych danych z nagwka ......................................................................... 168
Eliminowanie zapisywania w pamici podrcznej przegldarki ........................................................ 169
Podsumowanie ................................................................................................................................... 171

Cz II Ajax w szczegach ........................................................ 173

Rozdzia 5. Wprowadzenie do bibliotek Ajaksa ............................................. 175
Wykorzystywanie Ajax Utility Library ............................................................................................. 176
Otrzymywanie tekstu z serwera za pomoc funkcji getText ....................................................... 178
Otrzymywanie XML z serwera za pomoc funkcji getXml ........................................................ 184
Przesyanie danych do serwera i otrzymywanie z powrotem tekstu ............................................ 189
Przesyanie danych do serwera i otrzymywanie z powrotem XML ............................................ 194

Spis treci

Wykorzystywanie libXmlRequest do pobierania XML ..................................................................... 202

Wykorzystywanie AJAXLib do pobierania XML ............................................................................. 206
Podsumowanie ................................................................................................................................... 208
Rozdzia 6. Bardziej zaawansowane biblioteki JavaScriptu ......................... 209
Wykorzystywanie biblioteki Majax ................................................................................................... 210
Wykorzystywanie biblioteki Sack ...................................................................................................... 213
Wykorzystywanie biblioteki XHConn ............................................................................................... 218
Wykorzystywanie biblioteki uniAjax ................................................................................................ 223
Wykorzystywanie biblioteki AjaxGear .............................................................................................. 225
Wykorzystywanie biblioteki AjaxRequest ......................................................................................... 230
Wykorzystywanie biblioteki Http w celu uniknicia zapisywania danych w pamici podrcznej .... 234
Wykorzystywanie biblioteki Sarissa do obsugi XML ...................................................................... 238
Wykorzystywanie biblioteki Interactive Website Framework do obsugi XML ............................... 242
Podsumowanie ................................................................................................................................... 244
Rozdzia 7. Wykorzystywanie bibliotek Ajaksa po stronie serwera ............ 245
Praca z bibliotekami opartymi na PHP .............................................................................................. 246
Wykorzystywanie Sajax oraz PHP .............................................................................................. 246
Wykorzystywanie biblioteki Xajax oraz PHP ............................................................................. 253
Wykorzystywanie biblioteki LibAjax oraz PHP .......................................................................... 258
Praca z bibliotekami opartymi na Javie ............................................................................................. 263
Wykorzystywanie Direct Web Remoting oraz Javy .................................................................... 263
Wykorzystywanie biblioteki Ajax Tags oraz Javy ...................................................................... 266
Wykorzystywanie biblioteki SWATO oraz Javy ......................................................................... 268
Praca z Ajaksem oraz Ruby on Rails ................................................................................................. 270
Pobieranie tekstu za pomoc Ajaksa ............................................................................................ 272
Dostp do pobranych danych w kodzie ....................................................................................... 277
Podsumowanie ................................................................................................................................... 283

Cz III Ajax oraz DOM, XML, CSS i dynamiczny HTML ............... 285
Rozdzia 8. DOM oraz obsuga zdarze ........................................................... 287
Wprowadzenie do DOM .................................................................................................................... 287
Dodawanie elementw za pomoc DOM .......................................................................................... 289
Zastpowanie elementw z wykorzystaniem DOM .......................................................................... 294
Tworzenie koszyka z zakupami opartego na Ajaksie ........................................................................ 299
Tworzenie obiektu zdarzenia myszy dziaajcego w rnych przegldarkach ........................... 303
Obsuga zdarze zwizanych z naciskaniem przycisku myszy ................................................... 308
Obsuga zdarze ruchu myszy ..................................................................................................... 311
Obsuga zdarze zwalniania przycisku myszy ............................................................................ 312
Pobieranie obrazkw w Ajaksie ......................................................................................................... 316
Obsuga przekroczenia czasu odpowiedzi w Ajaksie ........................................................................ 319
Podsumowanie ................................................................................................................................... 324
Rozdzia 9. XML oraz Ajax ............................................................................... 325
Tworzenie XML ................................................................................................................................. 325
Obsuga XML za pomoc JavaScriptu ............................................................................................... 330
Pobieranie danych z dokumentu XML .............................................................................................. 334
Obsuga biaych znakw w przegldarkach internetowych Mozilla, Netscape oraz Firefox ............ 342
Obsuga biaych znakw w sposb dziaajcy we wszystkich przegldarkach ................................. 345

10

Ajax. Biblia
Bezporedni dostp do danych XML ................................................................................................. 348
Dostp do wartoci atrybutw XML .................................................................................................. 353
Sprawdzanie poprawnoci kodu XML ............................................................................................... 356
Podsumowanie ................................................................................................................................... 359
Rozdzia 10. Kaskadowe arkusze stylw oraz Ajax ....................................... 361
Menu oparte na Ajaksie ..................................................................................................................... 362
Tworzenie stylw ......................................................................................................................... 363
Praca z mysz ............................................................................................................................... 370
Pobieranie elementw menu ........................................................................................................ 376
Wywietlanie menu ...................................................................................................................... 377
Obsuga kliknicia elementu menu .............................................................................................. 379
Ukrywanie menu .......................................................................................................................... 380
Uwydatnianie tekstu w aplikacjach opartych na Ajaksie ................................................................... 381
Przewijajcy si tekst ......................................................................................................................... 385
Stylizacja tekstu za pomoc CSS ....................................................................................................... 387
Stylizacja kolorw oraz ta za pomoc CSS ...................................................................................... 390
Stylizacja pooenia na stronach internetowych ................................................................................ 394
Podsumowanie ................................................................................................................................... 396
Rozdzia 11. Dynamiczny HTML oraz Ajax ....................................................... 397
Tworzenie efektw powizanych z przesuniciem kursora myszy nad element ............................... 397
Wykorzystywanie stylw dynamicznych ........................................................................................... 401
Korzystanie z document.write ............................................................................................................ 404
Wykorzystywanie metod dynamicznego HTML do uaktualnienia czci strony .............................. 410
Wykorzystywanie waciwoci dynamicznego HTML do uaktualniania czci strony .................... 413
Wykorzystywanie zakresw tekstu do uaktualniania czci strony ................................................... 418
Wykorzystywanie createElement do tworzenia nowych elementw w locie .................................... 421
Tworzenie dynamicznych tabel .......................................................................................................... 426
Przyciganie uwagi uytkownika za pomoc animacji ...................................................................... 431
Podsumowanie ................................................................................................................................... 436

Cz IV Zaawansowany Ajax ..................................................... 437

Rozdzia 12. Wprowadzenie do Ajaksa oraz PHP ........................................... 439
Rozpoczcie pracy z PHP .................................................................................................................. 439
Odsyanie tekstu do przegldarki ................................................................................................. 441
Odsyanie kodu XML do przegldarki ........................................................................................ 442
Komentowanie kodu PHP .................................................................................................................. 445
Praca ze zmiennymi ........................................................................................................................... 446
Interpolacja zmiennych w acuchach znakw .................................................................................. 456
Praca z tablicami ................................................................................................................................ 458
Tworzenie tablic ........................................................................................................................... 458
Kopiowanie tablic ........................................................................................................................ 461
Obsuga danych za pomoc operatorw ............................................................................................ 462
Dokonywanie wyboru za pomoc instrukcji if .................................................................................. 463
Wykorzystywanie instrukcji else ................................................................................................. 466
Wykorzystywanie instrukcji elseif ............................................................................................... 467
Wykorzystywanie instrukcji switch ................................................................................................... 469

Spis treci

11

Wykorzystywanie ptli ....................................................................................................................... 470

Wykorzystywanie ptli for ........................................................................................................... 470
Wykorzystywanie ptli while ...................................................................................................... 472
Wykorzystywanie ptli do...while ............................................................................................... 474
Wykorzystywanie ptli foreach ................................................................................................... 474
Podsumowanie ................................................................................................................................... 476
Rozdzia 13. PHP funkcje oraz kontrolki HTML .......................................... 477
Praca z funkcjami ............................................................................................................................... 477
Przekazywanie danych do funkcji ............................................................................................... 480
Podawanie argumentw domylnych .......................................................................................... 481
Tworzenie list argumentw o zmiennej dugoci ........................................................................ 483
Zwracanie wartoci z funkcji ....................................................................................................... 485
Zwracanie wielu wartoci z funkcji ............................................................................................. 486
Obsuga kontrolek HTML .................................................................................................................. 488
Praca z polami tekstowymi .......................................................................................................... 491
Praca z polami wyboru ................................................................................................................. 494
Praca z przyciskami opcji ............................................................................................................ 497
Praca z listami .............................................................................................................................. 499
Praca z kontrolkami z hasem ...................................................................................................... 504
Praca z mapami obrazu ...................................................................................................................... 506
Przesyanie plikw na serwer ............................................................................................................. 508
Podsumowanie ................................................................................................................................... 514
Rozdzia 14. Obsuga danych od uytkownika w PHP ................................... 515
Wywietlanie wszystkich danych z formularza ................................................................................. 516
Spojrzenie na zmienne serwera .......................................................................................................... 520
Umieszczanie danych od uytkownika w tablicach ........................................................................... 523
Umieszczanie aplikacji PHP na jednej stronie ................................................................................... 526
Wykorzystywanie ukrytych kontrolek do sprawdzania, czy uytkownik widzia ju dan stron .... 530
Sprawdzanie danych wprowadzanych przez uytkownika, liczb oraz tekstu .................................... 531
Sprawdzanie danych wprowadzanych przez uytkownika .......................................................... 531
Sprawdzanie poprawnoci liczb ................................................................................................... 538
Sprawdzanie poprawnoci tekstu ................................................................................................. 543
Obsuga kodu HTML przesanego przez uytkownika ...................................................................... 547
Podsumowanie ................................................................................................................................... 550
Rozdzia 15. Ajax a bezpieczestwo ............................................................... 551
Ochrona przed zoliwymi uytkownikami ....................................................................................... 551
Wstawianie zoliwego kodu w JavaScripcie .............................................................................. 552
Sprawy bezpieczestwa zwizane z serwerami proxy ....................................................................... 559
Bezpieczestwo w aplikacjach opartych na Ajaksie .......................................................................... 560
atwa ochrona hasem ................................................................................................................. 560
Uwierzytelnienie uytkownika po stronie serwera ...................................................................... 563
Ochrona hasa za pomoc kluczy publicznych oraz prywatnych ....................................................... 577
Podsumowanie ................................................................................................................................... 587
Rozdzia 16. Filtry, MVC oraz Ajax .................................................................. 589
Ograniczanie dostpu za pomoc filtrw ........................................................................................... 589
Logowanie dostpu uytkownikw za pomoc filtrw ..................................................................... 598

12

Ajax. Biblia
Ograniczanie dostpu w oparciu o por dnia ..................................................................................... 608
Aplikacje typu MVC .......................................................................................................................... 612
Kontroler ...................................................................................................................................... 614
Widok ........................................................................................................................................... 616
Model ........................................................................................................................................... 617
Instalacja aplikacji MVC .................................................................................................................... 618
Dostp do MVC za pomoc Ajaksa ................................................................................................... 619
Podsumowanie ................................................................................................................................... 620
Skorowidz ....................................................................................................... 621

Rozdzia 1.

Wprowadzenie do Ajaksa
W tym rozdziale:

Wprowadzenie do Ajaksa

Spojrzenie na Ajaksa w dziaaniu

Wykonywanie wyszukiwania na ywo za pomoc Ajaksa

Wykorzystywanie czatw opartych na Ajaksie

Wykorzystywanie opcji autouzupeniania

Przeciganie i upuszczanie za pomoc Ajaksa

Wykorzystywanie koszykw z zakupami opartych na Ajaksie

Witamy w ksice Ajax. Biblia! Mona w niej znale wszystko na temat Ajaksa. Ajax
jest now technologi, ktra podbija Internet, zdobywajc kolejne strony internetowe.
Rewolucja Ajaksa nadesza i odmienia oblicze Internetu. Tak naprawd Ajax jest podstaw tego, co nazywane jest Web 2.0 nastpn wersj World Wide Web (WWW).
O co zatem w tym wszystkim chodzi? Podstawow ide jest sprawienie, by aplikacje webowe wyglday i zachowyway si podobnie do aplikacji desktopowych. Warto spojrze na
przykad na rysunek 1.1, na ktrym wida znajom stron wyszukiwarki Google. Po wpisaniu szukanego pojcia, takiego jak Ajax, naley klikn przycisk Szukaj w Google.
Ekran miga w czasie, gdy jest uaktualniany nowymi danymi, po czym pokazuj si strony pasujce do podanego zapytania, ktre odnalaza wyszukiwarka Google jak wida
to na rysunku 1.2.
Funkcjonuje to dobrze, jednak nie jest to sposb, w jaki dziaa Ajax. Dziki Ajaksowi
mona dziaa w tle, czc si z serwerem w celu otrzymania danych bez koniecznoci
odwieania strony w przegldarce. Warto na przykad przyjrze si stronie Google
Suggest, dostpnej pod adresem www.google.com/webhp?complete=1&hl=en, ktra pokazana jest na rysunku 1.3.
W miar wpisywania kolejnych liter strona w przegldarce czy si z serwerem Google
i wyszukuje dopasowania dla czci szukanego zapytania, ktra zostaa ju wpisana. Kiedy na przykad wpisze si aj, mona zauway, e pojawi si lista rozwijana widoczna na rysunku 1.4 z propozycjami Google pasujcymi do wpisywanego tekstu.

22

Cz I Podstawy Ajaksa

Rysunek 1.1.
Google wyszukuje
strony pasujce
do podanego
pojcia

Rysunek 1.2.
Google wywietla
odnalezione wyniki
zapytania

W tle, dziki wykorzystywaniu technik Ajaksa, strona internetowa czy si z Google

Suggest i wyszukuje propozycje pasujce do wpisywanego zapytania. Nastpnie wywietla list rozwijan zawierajc odnalezione propozycje, pozwalajc na wybranie jednej
z nich a wszystko to bez odwieania strony. To jest wanie kluczowa cz: odwieanie strony nie jest konieczne. W dawnych czasach, kiedy chciao si przesa dane do
serwera, naleao klikn jaki przycisk, na przykad Szukaj w Google. Nastpnie naleao poczeka chwil, a strona na ekranie zamigocze i odwiey si. Teraz strona internetowa moe przesya dane do serwera bez wymuszania odwieania, tak jak wida to

Rozdzia 1. Wprowadzenie do Ajaksa

23

Rysunek 1.3.
Strona Google
Suggest

Rysunek 1.4.
Google Suggest
szuka pasujcych
wynikw w miar
wpisywania
zapytania

na poprzednim przykadzie, w ktrym szukane zapytanie byo automatycznie przesyane

do serwera, a serwer odsya z powrotem dane wywietlane na licie rozwijanej.
Obecnie nie trzeba ju wykonywa odwieania strony przy przesyaniu danych do serwera lub odczytywaniu ich. Zamiast tego aplikacje webowe mog dziaa podobnie do
aplikacji desktopowych, przesyajc dane do serwera i pobierajc je z powrotem w tle.

24

Cz I Podstawy Ajaksa

Taka wanie zmiana aplikacji webowych, sprawiajca, e zachowuj si one w sposb

zbliony do aplikacji desktopowych, stanowi sedno Web 2.0. Czy podobaoby si nam,
gdyby edytor tekstu miga za kadym razem, gdy wpisuje si nowy znak, gdyby cay dokument by cigle wywietlany od nowa, a kursor powraca na jego pocztek? Nie wydaje si to by zbyt atrakcyjn propozycj. Dziki Ajaksowi mona tworzy internetowe
edytory tekstu, ktrych w praktyce prawie nie da si odrni od wersji desktopowych
nie ma w nich migania, nie ma zmiany pozycji kursora w trakcie pisania. Takie edytory
tekstu dziaaj pynnie, dokadnie tak samo jak desktopowe wersje tych samych aplikacji.
Wiadomo ju, dlaczego Ajax wywouje rewolucj w sposobie dziaania aplikacji webowych teraz moliwe jest tworzenie aplikacji internetowych, ktre wygldaj i dziaaj dokadnie tak samo jak ich desktopowe odpowiedniki.
Niniejszy rozdzia jest wprowadzeniem. Prezentuje genez znaczenia pojcia Ajax,
a nastpnie omawia, w jaki sposb Ajax jest obecnie wykorzystywany. Taki przegld jest
bardzo wanym elementem niniejszej ksiki, poniewa z Ajaksem mona spotka si
coraz czciej czasem do niespodziewanie i jeli jest si zaznajomionym z jego
moliwymi zastosowaniami, bdzie si wiedziao, w jaki sposb mona go zastosowa
we wasnych aplikacjach webowych.

Co oznacza Ajax?
Skd wic wzia si nazwa Ajax? Warto przyjrze si rysunkowi 1.5 prezentujcemu
pierwszy artyku napisany na temat Ajaksa artyku, w ktrym pierwszy raz pojawia si
ta nazwa i od ktrego wszystko si zaczo. Mona go znale pod adresem www.adaptivepath.com/publications/essays/archives/000385.php. Tekst ten zosta napisany przez
Jesse Jamesa Garretta z Adaptive Path, ktry pierwszy nada tej technologii nazw Ajax.
Rysunek 1.5.
Oryginalny artyku
na temat Ajaksa

Rozdzia 1. Wprowadzenie do Ajaksa

25

Artyku rozpoczyna si tak:

Jeli cokolwiek w dziedzinie wspczesnego projektowania interaktywnego
moe by nazwane wspaniaym, bdzie to tworzenie aplikacji webowych.
W kocu kiedy ostatni raz gono byo o jakimkolwiek projekcie interaktywnym,
ktry nie znajdowa si w Internecie (no dobrze, poza iPodem)? Wszystkie
olniewajce, innowacyjne, nowe projekty znajduj si w Internecie.
Pomimo tego projektanci interaktywni dziaajcy w Internecie musz nieco
zazdroci kolegom, ktrzy tworz oprogramowanie desktopowe. Aplikacje
desktopowe charakteryzuj si bogactwem i interaktywnoci, jaka w Internecie
wydawaa si by niedostpna. Ta sama prostota, ktra umoliwia szybki
rozwj Internetu, stworzya rwnie barier pomidzy moliwociami, jakie
mona udostpni, a tymi istniejcymi w aplikacjach desktopowych.
Bariera ta zostaa wanie pokonana.
Bariera ta naprawd zostaa zniesiona dziki Ajaksowi. Co zatem, zgodnie z artykuem, oznacza Ajax? Nazwa ta oznacza Asynchronous JavaScript and XML (po polsku: asynchroniczny JavaScript i XML). Jak wynika z samej nazwy, a take z lektury
artykuu Jesse Jamesa Garretta, Ajax to tak naprawd zbir technologii.
Cz asynchroniczny oznacza, e przegldarka nie czeka na powrt danych z serwera, a zamiast tego potrafi obsugiwa te dane, kiedy powrc. Innymi sowy, transfer danych odbywa si w tle, bez koniecznoci wykonywania pauzy przez przegldark i oczekiwania, a co si zdarzy. Jest to kluczowy element Ajaksa: mona obsugiwa dane
z serwera, kiedy serwer je odele. Nie jest konieczne zatrzymywanie caej aplikacji i oczekiwanie na przybycie danych. Gdyby trzeba byo czeka na dane, aplikacja byaby synchroniczna. W przypadku wolnego poczenia z Internetem jest to problematyczne.
Rwnie JavaScript w nazwie Ajax ma ogromne znaczenie, gdy wanie ta technologia
wykorzystywana jest do uycia Ajaksa w przegldarce. Ajax oparty jest na JavaScripcie
z przegldarki w zakresie czenia si z serwerem i obsugiwania danych, ktre serwer
odsya. Wszystkie aplikacje ajaksowe, ktre bdzie si tworzy w niniejszej ksice, wykorzystuj JavaScript do czenia si w tle z serwerem, przesyania i pobierania danych.
A kiedy dane zostan pobrane, JavaScript w przegldarce moe zosta wykorzystany do
ich obsugiwania, wywietlajc dane bd przetwarzajc je tak, jak jest to konieczne.
Co jednak z XML pojawiajcym si w rozszerzeniu nazwy Ajax? Jak wiadomo, XML
sta si lingua franca Internetu, dostarczajc tekstowe sposoby przesyania danych w Sieci.
Powodem tego, e XML sta si tak popularny, jest fakt, i rzeczywicie jest on oparty
na tekcie, co oznacza, e mona go wykorzystywa w Internecie, poniewa Internet zaprojektowany zosta do obsugi dokumentw tekstowych (czyli HTML). Z tej przyczyny aplikacje ajaksowe pisane s czsto tak, by obsugiway dane przesyane z serwera
z uyciem XML. Innymi sowy, kiedy aplikacja kontaktuje si z serwerem, odele on dane
z powrotem jako dokument XML.
Tak naprawd XML jest tylko jednym ze sposobw obsugiwania danych przesyanych
z serwera. Mona je rwnie wysya jako zwyky tekst, a obie te techniki bd wielokrotnie wykorzystywane w niniejszej ksice.

26

Cz I Podstawy Ajaksa

Oprcz JavaScriptu i XML Ajax wsppracuje rwnie z dynamicznym HTML (DHTML)

oraz kaskadowymi arkuszami stylw (CSS). Obie te technologie pozwalaj na uaktualnianie danych wywietlanych na stronie internetowej; poniewa w przypadku Ajaksa nie
przerysowuje si caej strony, a jedynie jej cz, DHTML oraz CSS wykorzystywane s
do czsto. Technologie te pozwalaj na uaktualnienie wybranych czci strony internetowej. W niniejszej ksice dynamiczny HTML oraz CSS pojawi si w wielu miejscach, poniewa pozwalaj one na odwieanie jedynie czci strony internetowej, co
jest kluczowym elementem aplikacji opartych na Ajaksie.
Czci JavaScriptu, ktra to umoliwia, jest obiekt XMLHttpRequest. Jest to specjalny
obiekt wbudowany w wersje JavaScriptu znajdujce si we wszystkich wspczesnych
przegldarkach. Jak zostanie to pokazane, obiekt ten umoliwia poczenie si z serwerem
i obsugiwanie danych odesanych z serwera w tle. Ajax oparty jest nie po prostu na JavaScripcie, a przede wszystkim na obiekcie XMLHttpRequest bdcym czci JavaScriptu.
Tak to zatem wyglda Ajax jest zbiorem technologii, a nie pojedyncz technologi.
Do poczenia z serwerem wykorzystuje si obiekt XMLHttpRequest wbudowany w JavaScript, nastpnie obsuguje si XML (lub zwyky tekst), ktry serwer odsya z powrotem,
za pomoc JavaScriptu. Dynamiczny HTML oraz CSS wykorzystywane s do wywietlania rezultatw w przegldarce. Cae szczcie, e te wszystkie czci aplikacji opartych
na Ajaksie JavaScript, obiekt XMLHttpRequest, dynamiczny HTML oraz CSS cz si ze sob w taki sposb, bo dziki temu razem sprawiaj, e aplikacje internetowe
wygldaj tak jak aplikacje desktopowe.
Tak naprawd technologie stojce za Ajaksem istniej mniej wicej od 1998 roku i byy
ju uywane przez wiele aplikacji takich jak Outlook Web Access firmy Microsoft. Nie
przyjy si jednak a do pocztku 2005 roku, kiedy znane aplikacje, takie jak Google
Suggest, zaczy je wykorzystywa, a Jesse James Garrett napisa artyku tworzcy nazw Ajax, co pozwolio skupi ten zbir technologii pod jednym dachem.
Od tego czasu wszystko potoczyo si szybko, a programici uwiadomili sobie, e oprogramowanie webowe moe w kocu zacz si zachowywa i dziaa tak jak oprogramowanie desktopowe. Co zatem mona zrobi za pomoc Ajaksa? Kwestii tej powicona jest dalsza cz niniejszego rozdziau.

Co mona zrobi za pomoc Ajaksa?

Za pomoc Ajaksa mona zrobi bardzo wiele, a na kolejnych stronach omwiona zostanie ta skarbnica moliwoci. Zamieszczono tam szerok prezentacj tego, do czego
obecnie wykorzystywany jest Ajax.

Tworzenie wyszukiwania na ywo opartego na Ajaksie

Jednym z najpopularniejszych zastosowa Ajaksa jest tworzenie wyszukiwania na ywo (ang. live search), ktrego przykadem by Google Suggest omwiony na pocztku
niniejszego rozdziau. Dziki wyszukiwaniu na ywo uytkownik moe wpisa cz
szukanego pojcia, a aplikacja webowa poczy si z serwerem za pomoc Ajaksa i odnajdzie propozycje, ktre pasuj do podanego niepenego zapytania.

Rozdzia 1. Wprowadzenie do Ajaksa

27

W Internecie dostpnych jest wiele narzdzi sucych do wyszukiwania na ywo, nie

tylko Google Suggest. Mona na przykad przyjrze si aplikacji o nazwie Gollum znajdujcej si pod adresem http://gollum.easycp.de/en/, ktra na ywo przeszukuje Wikipedi, woln encyklopedi internetow, dostpn pod adresem www.wikipedia.org. Aplikacja Gollum zaprezentowana zostaa na rysunku 1.6.
Rysunek 1.6.
Gollum na ywo
przeszukuje
Wikipedi

Po wybraniu jzyka dziaania aplikacji oraz odpowiedniej wersji jzykowej Wikipedii

wystarczy poda cz szukanego pojcia jak na przykad Aja dla Ajaksa by
zobaczy rezultat widoczny na rysunku 1.6, gdzie Gollum poczy si w tle z polskim
wydaniem Wikipedii i odnalaz propozycje pasujce do podanej czci szukanego pojcia. Jak to zwykle bywa w przypadku wyszukiwania na ywo, propozycje te wywietlane s na licie rozwijanej i mona z nich wybra pasujc uytkownikowi. Po zrobieniu
tego w przegldarce otwierany jest odpowiedni artyku z Wikipedii.

Tworzenie kalkulatora opartego na Ajaksie

Kada sytuacja, w ktrej trzeba przesa dane do serwera, a nastpnie obsuy dane odesane z powrotem w tle, jest wrcz stworzona dla Ajaksa. Dlaczego wic nie utworzy kalkulatora opartego na Ajaksie? Przykad takiej aplikacji znajduje si na stronie www.funwithjustin.com/ajax-toybox-demo/calculator.html i zosta zaprezentowany na rysunku 1.7.
Rysunek 1.7.
Kalkulator oparty
na Ajaksie

28

Cz I Podstawy Ajaksa

By wykorzystywa kalkulator, wystarczy wprowadzi dwa argumenty, na ktrych bdzie si dziaa, takie jak 5 i 7 z rysunku 1.7. Nastpnie naley wybra dziaanie, ktre
chce si wykona dodawanie, odejmowanie, mnoenie lub dzielenie. Dziki Ajaksowi strona internetowa przesya argumenty do znajdujcego si na serwerze programu,
ktry odpowiednio dodaje, odejmuje, mnoy bd dzieli otrzymane liczby i odsya wynik z powrotem.
Wynik pojawia si nastpnie w dolnym polu tekstowym, jak wida na rysunku 1.7, na
ktrym dodawane s do siebie liczby 5 oraz 7. Wszystko to odbywa si bez odwieania strony strona nie miga. Aplikacja ta, tak jak wiele innych programw opartych na
Ajaksie, wyglda tak, jakby bya aplikacj desktopow.

Rozmawianie za pomoc aplikacji czatowych

opartych na Ajaksie
Ajax sprawdza si doskonale wszdzie tam, gdzie wymagane jest czste uaktualnianie
danych, na przykad w aplikacjach czatowych, w ktrych dowolna liczba uytkownikw
moe wpisywa tekst, jaki nastpnie automatycznie powinien by widoczny dla wszystkich zalogowanych osb. Ajax jest tutaj dobrym wyborem, poniewa wywietlany tekst
jest stale uaktualniany, a obserwowanie jego migania w czasie uaktualniania strony byoby bardzo denerwujce.
Za pomoc Ajaksa mona jednak uaktualnia tekst znajdujcy si w dowolnym miejscu
na stronie bez koniecznoci odwieenia jej. Mona na przykad przyjrze si stronie
www.phpfreechat.net/demo.en.php, na ktrej znajduje si PHP Free Chat. Strona ta czy
si ze skryptem PHP znajdujcym si na serwerze w celu obsugiwania aplikacji czatowej. Kiedy wejdzie si na stron PHP Free Chat, najpierw naley poda nazw uytkownika, jak na rysunku 1.8.
Rysunek 1.8.
Logowanie si
do PHP Free Chat

Rozdzia 1. Wprowadzenie do Ajaksa

29

Po zalogowaniu si mona wpisywa tekst do pola tekstowego znajdujcego si na dole

rysunku 1.9. Po naciniciu klawisza Enter bd klikniciu Send w aplikacji tekst jest
za pomoc Ajaksa przesyany do serwera, ktry dodaje go do tekstw wpisywanych
przez innych uytkownikw, a rezultaty wywietlane s w oknie czatu, jak wida to na
rysunku 1.9.
Rysunek 1.9.
PHP Free Chat
pozwala wpisywa
tekst, ktry widz
inni uytkownicy

Istnieje wiele aplikacji czatowych opartych na Ajaksie. Mona na przykad zajrze na

stron www.plasticshore.com/projects/chat/, pokazan na rysunku 1.10. By korzysta
z tej aplikacji czatowej, wystarczy poda swoje imi (lub przyj domylnie zaproponowan nazw uytkownika) i wpisa wiadomo, po czym klikn przycisk Submit. Tekst
pojawi si nastpnie w oknie czatu obok tekstw innych uytkownikw.
Istnieje o wiele wicej aplikacji czatowych opartych na Ajaksie. Kolejn dobr
propozycj jest na przykad aplikacja dostpna pod adresem http://treehouse.
ofb.net/chat/?lang=en.

Przetwarzanie liczb za pomoc arkuszy kalkulacyjnych

Coraz wicej aplikacji desktopowych przenosi si do Internetu dziki Ajaksowi. Jednym
z ostatnich rodzajw takich aplikacji s arkusze kalkulacyjne, ktre mona obecnie znale w wielu miejscach.
Mona na przykad przyjrze si Num Sum, darmowemu internetowemu arkuszowi kalkulacyjnemu (http://numsum.com/spreadsheet/new), ktry dziaa tak, jak mogaby dziaa jego wersja desktopowa. Num Sum w dziaaniu mona zobaczy na rysunku 1.11.

30

Cz I Podstawy Ajaksa

Rysunek 1.10.
Darmowa aplikacja
czatowa oparta
na Ajaksie

Rysunek 1.11.
Num Sum jest
internetow
aplikacj
z arkuszami
kalkulacyjnymi

Dziki aplikacji Num Sum mona tworzy prawdziwe arkusze kalkulacyjne, cznie z obsug formu, a nastpnie zapisa dane na serwerze Num Sum. Wykorzystywanie tej aplikacji jest praktycznie nie do odrnienia od wersji desktopowej wpisywane dane s
od razu uaktualniane bez koniecznoci odwieania strony1.
1

Darmowe arkusze kalkulacyjne mona rwnie tworzy z uyciem Google Docs & Spreadsheets
(http://docs.google.com). Aplikacja ta ma interfejs dostpny w jzyku polskim przyp. tum.

Rozdzia 1. Wprowadzenie do Ajaksa

31

Przegldanie strony Amazon

Oto ciekawa aplikacja: pozwala ona przeglda produkty bdce w ofercie sklepu internetowego Amazon.com. Strona ta pozwala na wywietlanie oferty Amazon.com dziki uyciu struktury hierarchicznej drzewa, uaktualnianej za pomoc Ajaksa. Wystarczy przej
na stron http://lmap.co.nr/Amazon1.htm i klikn wze drzewa, by go otworzy i zobaczy produkty Amazon, jak wida na rysunku 1.12.
Rysunek 1.12.
Przegldanie strony
Amazon.com

Otrzymywanie odpowiedzi dziki autouzupenianiu

za pomoc Ajaksa
Aplikacje wykonujce autouzupenianie w duym stopniu przypominaj wyszukiwanie
na ywo. W przypadku wyszukiwania na ywo do pola tekstowego wpisuje si cz
szukanego pojcia. W przypadku autouzupeniania w gr nie wchodzi adne szukanie;
autouzupenianie po prostu oferuje podpowiedzi, ktre kocz wpisywane pojcie (kada osoba wpisujca wiadomoci SMS na telefonach komrkowych zapewne zna ten pomys pod postaci sownikw T9, ktre oferuj propozycje sw pasujce do wpisywanych znakw).
Przykad autouzupeniania widoczny jest na stronie www.papermountain.org/demos/live/,
ktra zostaa przedstawiona na rysunku 1.13.
Wystarczy wpisa pocztek angielskiego sowa w polu tekstowym widocznym na rysunku 1.13, a aplikacja przele t cz sowa do serwera, ktry znajduje propozycje pasujcych wyrazw i odsya je z powrotem. Propozycje te wywietlane s tak jak na rysunku i mona spord nich wybra waciw. Kiedy si to zrobi, wybrane pojcie zastpi
pocztek sowa, ktry wpisano wczeniej.

32

Cz I Podstawy Ajaksa

Rysunek 1.13.
Wykorzystywanie
autouzupeniania

Innym przykadem autouzupeniania, udostpnionym do pobrania, jest SWATO zestaw narzdzi ajaksowych dostpny pod adresem https://swato.dev.java.net/. Przykad
dziaania tej aplikacji widoczny jest na rysunku 1.14.
Rysunek 1.14.
Wykorzystywanie
SWATO do
autouzupeniania

Przykad ten dopasowuje nazwy krajw, jak wida na rysunku 1.14. Wystarczy wpisa
jak liter, na przykad A, by pokazay si moliwe dopenienia, takie jak Arabia Saudyjska, Austria, Australia i tak dalej.

Rozdzia 1. Wprowadzenie do Ajaksa

33

Logowanie si za pomoc Ajaksa

Kolejny dobry przykad: zamiast prosi uytkownikw o przejcie przez kilka stron w celu zalogowania si na stronie internetowej, mona wykorzysta Ajaksa do uproszczenia
tego procesu, sprawdzajc wpisane identyfikatory uytkownikw oraz hasa w tle.
Mona na przykad spojrze na stron www.jamesdam.com/ajax_login/login.html, pokazan na rysunku 1.15. Strona ta pozwala na automatyczne logowanie si za pomoc
Ajaksa bez koniecznoci odwieenia strony.
Rysunek 1.15.
Strona
z logowaniem
oparta na Ajaksie

Jeli poda si niepoprawny identyfikator uytkownika i haso, na przykad Troll i idzietroll, i kliknie gdziekolwiek na stronie, otrzyma si komunikat informujcy o bdzie
(Invalid username and password combination), jak na rysunku 1.16.
Z drugiej strony, kiedy poda si poprawne dane na przykad identyfikator user1 i haso pass1 i kliknie gdzie na stronie, bdzie wida, e logowanie si powiodo, jak
pokazano to na rysunku 1.17.

Pobieranie obrazkw
Za pomoc Ajaksa mona pobiera tylko tekst i XML. Czy aby na pewno? W jednym
z przykadw zaprezentowanych w ksice zastosowano Ajaksa wraz z dynamicznym
HTML do pobierania obrazkw. Przykad ten zaprezentowany jest na rysunku 1.18.
Kiedy kliknie si przycisk, przykad pobiera i wywietla obrazek, jak wida na rysunku
1.19. Czy Ajax naprawd pobiera ten obrazek? Czy technologia ta nie miaa by ograniczona do pobierania tekstu i XML?

34

Cz I Podstawy Ajaksa

Rysunek 1.16.
Logowanie si
jest zablokowane

Rysunek 1.17.
Logowanie
za pomoc Ajaksa
si powiodo

Tak naprawd Ajax pobiera nazw nowego obrazka, ktry ma zosta wywietlony. Nastpnie w przykadzie wykorzystywany jest JavaScript, ktry nadpisuje element HTML
<img> w stronie internetowej, wykorzystujc do tego nazw pliku do pobrania. Kiedy
przegldarka widzi, e element <img> zosta nadpisany, pobiera obrazek, na ktry wskazuje ten element, dziki magii dynamicznego HTML.

Rozdzia 1. Wprowadzenie do Ajaksa

35

Rysunek 1.18.
W tym przykadzie
mona pobiera
obrazki

Rysunek 1.19.
W tym przykadzie
mona pobra
nowy obrazek
bez odwieania
strony

Rezultat jest taki, e po klikniciu przycisku pojawia si nowy obrazek i odwieenie

strony nie jest do tego potrzebne. W ten sposb dziaa kombinacja Ajaksa i dynamicznego HTML, co wskazuje na to, e naprawd bdzie mona pobiera dane binarne za
pomoc Ajaksa.

Przeciganie i upuszczanie za pomoc Ajaksa

W miar jak aplikacje webowe coraz bardziej upodabniaj si do aplikacji desktopowych,
coraz wicej elementw znanych z tych ostatnich pojawia w aplikacjach internetowych.
Operacje przecigania i upuszczania czyni na przykad ycie uytkownika o wiele prostszym i teraz, gdy przeciga si i upuszcza elementy na stronie internetowej, serwer moe
zosta powiadomiony o tym fakcie w tle. Oznacza to, e nastpnym razem, gdy spojrzy
si na stron, element, ktry zostaje przecignity i upuszczony, pojawi si w nowym
miejscu, w ktrym go umieszczono.

36

Cz I Podstawy Ajaksa

Mona na przykad przyjrze si zabawie w magnesy ze sowami, dostpnej pod adresem

www.broken-notebook.com/magnetic/ i zaprezentowanej na rysunku 1.20.
Rysunek 1.20.
Sowa z magnesw
pozostaj
w miejscu, w ktre
si je przesunie,
dopki kto inny
ich nie przemieci

Kiedy przecignie si magnes w nowe miejsce, jego pozycja przesyana jest do serwera za pomoc Ajaksa, a dane dotyczce pooenia magnesu zostaj zachowane. Inne
osoby odwiedzajce stron widz magnesy w pozycjach, w jakich si je ustawio, a kiedy wraca si na stron, magnesy nadal bd tam, gdzie si je pozostawio o ile kto
ich nie przestawi.
Poniej znajduje si inny przykad przecigania i upuszczania mozaika ze strony thebroth.com. Pomys opiera si na tym, by uytkownicy przecigali elementy tak, aby razem
stworzy wsplne dzieo, wykorzystujc do tego Ajaksa. Kiedy przeciga si element,
jego nowe pooenie przesyane jest do serwera za pomoc Ajaksa, a nowa pozycja elementu uaktualniana jest wszdzie, w przegldarce kadego z uytkownikw. Mozaik t
mona znale pod adresem www.thebroth.com/mosaic i jest ona rwnie zaprezentowana na rysunku 1.21.
Przeciganie i upuszczanie nie zawsze musi dotyczy pojedynczych elementw. Mona
na przykad spojrze na siatk danych Ideo Technologies z rysunku 1.22, ktr mona znale pod adresem http://sweetdev-ria.ideotechnologies.com/sweetdev-ria-gettingStarted-2.0/. Kontrolki siatki danych pozwalaj na zmian kolejnoci kolumn poprzez przeciganie ich, jak wida to na rysunku.
Kiedy przeciga si kolumn, nowe ustawienie kolumn przesyane jest do serwera i przechowywane na nim, co oznacza, e mona przechodzi na inne strony tej samej siatki
danych (wykorzystujc odnoniki liczbowe znajdujce si pod danymi), a ustawienie to
zostanie zachowane.

Rozdzia 1. Wprowadzenie do Ajaksa

37

Rysunek 1.21.
Tworzenie wsplnej
mozaiki

Rysunek 1.22.
Przeciganie
kolumny w siatce
danych firmy Ideo
Technologies

Jednym z najczstszych zastosowa przecigania i upuszczania za pomoc Ajaksa jest

implementowanie koszykw z zakupami w sklepach internetowych. Normalnie, kiedy
chce si doda element do internetowego koszyka, trzeba przej przez kilka stron. Kiedy
kliknie si przycisk Dodaj do koszyka, pojawia si nowa strona odpowiadajca samemu
koszykowi, a nastpnie trzeba wraca do stron z ofertami, by mc kontynuowa zakupy.
Czy nie byoby o wiele prociej, gdyby nie trzeba byo w ogle opuszcza strony z zakupami? Gdyby po prostu mona byo przeciga przedmioty do koszyka, a serwer by
o tym informowany w tle naszych zakupw? Nie ma problemu!

38

Cz I Podstawy Ajaksa

Wanie tak dziaa przykadowy skrypt na stronie http://demo.script.aculo.us/shop, zaprezentowany na rysunku 1.23.
Rysunek 1.23.
Przeciganie
przedmiotu do
koszyka z zakupami
opartego na Ajaksie

Kiedy przeciga si przedmiot bezporednio na stronie, a nastpnie upuszcza go do ajaksowego koszyka z zakupami, serwer jest powiadamiany o zakupie, a biece produkty
s wywietlane w koszyku, jak wida na rysunku 1.24.
Rysunek 1.24.
Dodawanie
przedmiotu do
koszyka z zakupami
opartego na Ajaksie

Rozdzia 1. Wprowadzenie do Ajaksa

39

Gry i zabawy z Ajaksem

Poniej znajduje si zabawne zastosowanie Ajaksa dziennik w stylu Harryego Pottera, ktry odpowiada na to, co si do niego pisze po angielsku, niemiecku, francusku oraz
wosku za pomoc Ajaksa. Mona go znale pod adresem http://pandorabots.com/pandora/talk?botid=c96f911b3e35f9e1; aplikacja ta zaprezentowana zostaa na rysunku 1.25.
Rysunek 1.25.
Wykorzystywanie
dziennika w stylu
Harryego Pottera

Mona sprbowa napisa Hello w dzienniku. Sowo to od razu pojawia si w dzienniku, potem znika, by za chwil pojawia si odpowied pobrana przez Ajaksa widoczna na rysunku 1.26.
Dziennikowi mona zada cakiem sporo pyta, jak wida na rysunku 1.27, na ktrym
pytany jest on o miejsce, gdzie si znajduje.
Odpowied dziennika widoczna jest na rysunku 1.28.
A moe partyjka szachw opartych na Ajaksie? Wystarczy zajrze na stron www.JesperOlsen.Net/PChess/ zaprezentowan na rysunku 1.29. By przesun pionek, wystarczy
go klikn, a nastpnie klikn jego now pozycj pionek automatycznie przesunie
si w nowe pooenie. Gra przesya wszystkie potrzebne dane do serwera za pomoc
Ajaksa, w tle, i otrzymuje potrzebne dane z powrotem. Nastpnie wykorzystuje CSS do
odpowiedniego przesunicia pionka.

Modyfikacja stron internetowych w locie

Jednym z zada, do ktrych wietnie nadaje si Ajax, jest uaktualnianie lub modyfikowanie stron internetowych ogldanych przez uytkownika. Poniewa aplikacje ajaksowe

40

Cz I Podstawy Ajaksa

Rysunek 1.26.
Dziennik odpowiada

Rysunek 1.27.
Pytanie dziennika,
gdzie si znajduje

unikaj cakowitego odwieania strony wraz z towarzyszcym mu miganiem i byskaniem, naley uaktualni w przegldarce jedynie wybrane czci strony. Istniej tysice
aplikacji opartych na Ajaksie, ktre dziaaj w ten sposb, i w niniejszej ksice pokazane zostanie tworzenie kilku z nich.
Poniej znajduje si przykad, ktry ju jest w Internecie http://openrico.org/demos/
inner_ajax_HTML, przedstawiony na rysunku 1.30.

Rozdzia 1. Wprowadzenie do Ajaksa

41

Rysunek 1.28.
Dziennik
odpowiada,
gdzie si znajduje

Rysunek 1.29.
Gra w szachy
oparta na Ajaksie

Przykad ten to oparta na Ajaksie kartoteka o nazwie Rolodex. Wystarczy klikn nazwisko osoby, a pojawi si kartka z informacjami o niej, jak wida to na rysunku 1.31.
Kartoteka Rolodex do wywietlania danych wykorzystuje CSS. Za kadym razem, gdy
kliknie si nazwisko osoby, aplikacja pobiera dane tej osoby z serwera, czy je w jedn
kartk, a nastpnie wywietla t kartk za pomoc CSS, modyfikujc stron internetow
w locie.

42

Cz I Podstawy Ajaksa

Rysunek 1.30.
Kartoteka oparta
na Ajaksie

Rysunek 1.31.
Wykorzystywanie
kartoteki opartej
na Ajaksie

Wanie tak to dziaa wyniki jakiego dziaania wywietlane s na stronie internetowej w momencie ich tworzenia. Nie ma koniecznoci wymuszania odwieania strony,
by byy one widoczne.
Inny przykad modyfikowania strony internetowej znajduje si na stronie http://digg.com/
spy pokazanej na rysunku 1.32. Strona ta prezentuje w czasie rzeczywistym artykuy, na
ktre gosuj uytkownicy, i stale si uaktualnia dziki poczeniu CSS oraz dynamicznego HTML. Lista artykuw, ktr wida, zmienia si w czasie gdy uytkownicy na nie

Rozdzia 1. Wprowadzenie do Ajaksa

43

gosuj, a kady artyku otrzymuje ikon z kciukiem skierowanym do gry bd na d.

Do pobierania danych z serwera wykorzystywany jest Ajax, dziki czemu strona nie musi
by odwieana.
Rysunek 1.32.
Aplikacja Digg Spy
cigle si
uaktualnia

Innym przykadem aplikacji wykorzystujcej Ajaksa do cigego uaktualniania jest SaneBull Market Monitor. Mona j znale na stronie www.sanebull.com; zostaa rwnie
zaprezentowana na rysunku 1.33.
Rysunek 1.33.
SaneBull cigle
uaktualnia
indeksy giedowe
za pomoc Ajaksa

44

Cz I Podstawy Ajaksa

Program ten uaktualnia informacje z sekcji Market Watch znajdujcej si po lewej stronie w czasie rzeczywistym, podajc aktualne indeksy giedowe dziki modyfikowaniu
strony internetowej.
Aplikacje oparte na Ajaksie czasami dziaaj poprzez uaktualnianie kontrolek HTML znajdujcych si na stronie internetowej, a nie tylko zmian samego wywietlania strony. Przykad takiego zachowania mona znale na stronie http://www.aprogrammersjournal.com/
zip.html, na ktrej zamieszczono aplikacj odnajdujc lokalizacj dla danego kodu pocztowego. Wystarczy wpisa kod pocztowy, a aplikacja podaje miasto i stan, w jakim si
ono znajduje; dodatkowo wywietlona bdzie odpowied w formacie XML. Program ten
mona zobaczy na rysunku 1.34.
Rysunek 1.34.
Znajdowanie
lokalizacji dla
podanego kodu
pocztowego

Po wpisaniu kodu pocztowego i klikniciu mysz na stronie miasto oraz stan odpowiadajce podanemu kodowi pocztowemu pojawiaj si w polach tekstowych strony (jak
wida na rysunku 1.35) a wszystko to dziki magii Ajaksa i dynamicznego HTML.
Jedn z najlepszych modyfikacji stron internetowych wszech czasw, a przy tym aplikacj, jakiej aden przegld rozwiza opartych na Ajaksie nie moe pomin, jest Writely,
dostpna pod adresem http://docs.google.com. Writely jest cakowicie internetowym edytorem tekstu, opartym na Ajaksie, a prbk jego dziaania mona zobaczy na rysunku 1.36.
Writely pozwala na tworzenie i edytowanie dokumentw w zupenie taki sam sposb,
w jaki robi si to w przypadku aplikacji desktopowych. W celu uniknicia odwieania
strony w czasie pracy uytkownika aplikacja ta oparta jest na Ajaksie. Writely jest jedn
z aplikacji, ktre przenoszone s z komputerw do Internetu. Wczeniej pokazano ju
internetowe arkusze kalkulacyjne; teraz zaprezentowany zosta internetowy edytor tekstu w obu przypadkach byy to programy desktopowe, ktre teraz przeniesiono do
Internetu.

Rozdzia 1. Wprowadzenie do Ajaksa

45

Rysunek 1.35.
Wykorzystywanie
narzdzia do
odnajdywania
lokalizacji dla
podanego kodu
pocztowego

Rysunek 1.36.
Przykadowa strona
Writely

Dodanie interaktywnoci do map

Jedn z pierwszych aplikacji opartych na Ajaksie, od ktrych wszystko si rozpoczo, jest
Google Maps, dostpna pod adresem http://maps.google.com. Na rysunku 1.37 pokazuje ona lokalizacj siedziby Wydawnictwa Helion przy ulicy Kociuszki 1 w Gliwicach.

46

Cz I Podstawy Ajaksa

Rysunek 1.37.
Wykorzystywanie
Google Maps

Czy wida wyskakujce okienko, a take strzak wskazujc ul. Kociuszki 1? Dane dla
tych elementw zostay pobrane w tle za pomoc Ajaksa. Super!
Po wprowadzeniu Google Maps pojawio si wiele innych stron z mapami. Mona na
przykad zajrze na stron www.gtraffic.info, na ktrej podaje si informacje o warunkach na drogach w Wielkiej Brytanii. Strzaki widoczne na mapie z rysunku 1.38 oparte
s na Ajaksie.
Rysunek 1.38.
Sprawdzanie
warunkw
na drogach
w Wielkiej Brytanii
za pomoc Ajaksa

Rozdzia 1. Wprowadzenie do Ajaksa

47

Poczta elektroniczna oparta na Ajaksie

Innym powszechnym zastosowaniem Ajaksa jest poczta elektroniczna oparta na przegldarce, ktrej przykad mona zobaczy na stronie http://demo.nextapp.com/Email/app
pokazanej na rysunku 1.39.
Rysunek 1.39.
Poczta
elektroniczna
obsugiwana
w przegldarce

Dotychczas problem z poczt elektroniczn obsugiwan w przegldarce by taki, e lista wysanych e-maili znajdowaa si na jednej stronie, ale za kadym razem, gdy kliknito jaki e-mail, byo si przenoszonym na zupenie now stron. Pniej trzeba byo
wraca na stron z list i znw przewija j na d, eby sprawdzi kolejne wiadomoci.
Obsuga poczty elektronicznej oparta na Ajaksie jest inna. Na rysunku 1.39 wida list
e-maili; kliknicie ktrego z nich powoduje automatyczne pobranie treci wiadomoci
i wywietlenie jej bez koniecznoci odwieania przegldarki tak jak wida to na
rysunku 1.40.
Innymi sowy, raz jeszcze Ajax z powodzeniem zdoa przemieni aplikacj desktopow
w aplikacj internetow, rozwizujc problemy, przed ktrymi stay wczeniej aplikacje
webowe.

Podsumowanie
W niniejszym rozdziale przedstawiono wprowadzenie do Ajaksa oraz przegld wspczesnych zastosowa tej technologii. Jak wida, nacisk pooono na sprawienie, by aplikacje internetowe wyglday i zachowyway si podobnie jak aplikacje desktopowe
Ajax jest w tym niezastpiony. Dua cz takiego dziaania ma co wsplnego z wykorzystywaniem JavaScriptu w przegldarce, dlatego kwestii tej powicony zostanie kolejny rozdzia, ktrego celem jest przyblienie JavaScriptu podstawy Ajaksa.

48

Cz I Podstawy Ajaksa

Rysunek 1.40.
Wykorzystywanie
poczty
elektronicznej
przy uyciu Ajaksa

Rozdzia 1. Wprowadzenie do Ajaksa

49

Okienka wyskakujce oparte na Ajaksie

Internetowe aplikacje z mapami nie s jedynymi, ktre wykorzystuj wyskakujce okienka oparte
na Ajaksie okienka typu pop-up mona znale wszdzie. Mona na przykad spojrze na Netflix
Top 100 list stu najlepszych filmw, dostpn pod adresem www.netflix.com/Top100 i zaprezentowan na poniszym rysunku.

Pobieranie informacji o 100 najlepszych filmach wedug Netflix

eby otrzyma wicej informacji o filmie, wystarczy pozostawi kursor myszy nad nazw filmu,
a aplikacja automatycznie pobierze dane z serwera za pomoc Ajaksa i wywietli je w wyskakujcym okienku, jak wida to na rysunku. Wanie tak dziaa Ajax odwieanie strony nie jest konieczne, nie trzeba klika przycisku Wstecz w przegldarce, eby powrci do pocztkowej strony.