Head First Ajax. Edycja Polska (Rusz Głową!)

Head First Ajax.
Edycja polska
Autor: Rebecca Riordan
Tumaczenie: Marcin Rog
ISBN: 978-83-246-1778-4
Tytu oryginau: Head First Ajax
Format: 200230, stron: 516
Technologia AJAX (skrt od ang. Asynchronous JavaScript and XML) tchna nowe
ycie w strony internetowe. Sprawia, e stay si one interaktywne, przyjazne w uyciu
oraz dynamiczne. Dziki niej aplikacje internetowe coraz bardziej przypominaj te
standardowe, znane z codziennej pracy. Jeli jednak ogrom moliwoci tej technologii
wydaje Ci si trudny do opanowania jeste w bdzie! Przekonaj si, e z dobrym
podrcznikiem nic nie bywa trudne! Head First Ajax. Edycja polska to kolejny przyjazny
podrcznik z cieszcej si wielkim uznaniem Czytelnikw serii Head First. Znajdziesz
tu nowatorskie i skuteczne techniki nauki, a przy tym duo praktycznych informacji
i humoru. Trudno wyobrazi sobie lepsze warunki do zdobywania nowej wiedzy. Dziki
tej ksice dowiesz si, jak myle po ajaksowemu, obsugiwa zdarzenia, okiezna
asynchroniczno oraz wykorzysta model DOM i format JSON. Te oraz wiele innych
ciekawych wiadomoci, dziki ktrym szybko opanujesz tajniki AJAX-a, znajdziesz
wanie w tym wyjtkowym podrczniku.
Przeznaczenie technologii AJAX
Skutki asynchronicznoci da w AJAX-ie
Obsuga zdarze w jzyku JavaScript
Wykorzystanie wielu procedur dla jednego zdarzenia
Operacje na drzewie DOM
Zastosowanie frameworkw oraz innych bibliotek
Uycie formatu XML w daniach i odpowiedziach
Format JSON
Tworzenie formularzy i ich walidacja
dania POST
Odkryj, jak skuteczny i przyjazny moe by podrcznik do nauki AJAX-a!
Spis treci
Spis treci (skrcony)

Wprowadzenie
21
1.
Ajax zastosowanie. Aplikacje internetowe dla nowego pokolenia
33
2.
Projektowanie aplikacji w metodologii Ajax. Mylenie po ajaksowemu
73
3.
Zdarzenia w JavaScripcie. Reagowanie na uytkownikw
123
4.
Kilka procedur obsugi zdarze. Dwoje to ju towarzystwo
169
5.
Aplikacje asynchroniczne. To jak odnawianie prawa jazdy
201
6.
Obiektowy model dokumentu. Lenictwo na stronie WWW
255
7.
Manipulowanie DOM-em. Moje yczenie jest dla ciebie rozkazem
307
8.
Frameworki i zestawy narzdzi. Nie ufaj nikomu
351
9.
dania i odpowiedzi XML. Wicej ni mog wyrazi sowa
365
10.
JSON. Syn JavaScriptu
399
11.
Formularze i walidacja. Powiedz to, co chciae powiedzie
427
12.
dania POST. Paranoja to twoja przyjacika
465
Pozostaoci. Pi najwaniejszych tematw (ktrych nie omwilimy)
491
Funkcje narzdziowe. Po prostu daj mi kod
503
Spis treci (z prawdziwego zdarzenia)
Wprowadzenie
Skierujmy mzg na Ajaksa. Ty starasz si czego nauczy, natomiast mzg stara ci si
wywiadczy przysug, pilnujc, aby to, czego si uczysz, nie zostao zapamitane. Mzg myli
sobie: Lepiej zostawi miejsce na bardziej istotne sprawy, na przykad ktrych zwierzt unika, czy
te dlaczego uprawianie snowboardingu nago jest zym pomysem. A wic jak mona zmyli mzg,
aby myla, e twoje ycie zaley od znajomoci Ajaksa?
Dla kogo jest ta ksika?
22
Wiemy, co mylisz
23
Wiemy, co myli twj mzg
23
Metapoznanie: mylenie o myleniu
25
Oto co zrobilimy
26
Oto co TY moesz zrobi, aby skoni swj mzg do posuszestwa
27
Przeczytaj
28
Zesp korektorw merytorycznych
30
Podzikowania
31
Spis treci
Ajax zastosowanie
Jestem zdesperowany,
ale nie sta mnie na szybsze
serwery ani na zesp
specjalistw.
Aplikacje internetowe dla nowego pokolenia

Zmczony czekaniem na przeadowanie strony? Sfrustrowany pokracznymi
interfejsami aplikacji internetowych? Czas, aby zaczy one przypomina przyjemne w uyciu
aplikacje desktopowe. Jak to zrobi? Za pomoc Ajaksa twojej przepustki do tworzenia
bardziej interaktywnych, sprawniej reagujcych i atwiejszych w uyciu aplikacji internetowych.
Pomi drzemk, musisz dopieci swoje witryny. Czas na zawsze pozby si niepotrzebnych
i dugotrwaych przeadowa strony.
Strony WWW: podejcie tradycyjne
34
Strony WWW: podejcie nowoczesne
35
Kiedy moemy mwi o stronie w metodologii Ajax?
37
Rockandrollowe pamitki Roba
38
Ajax i rock and roll w 5 krokach
44
Etap 1. Modyfikujemy kod XHTML
46
Etap 2. Inicjalizacja JavaScriptu
48
Etap 3. Tworzenie obiektu dania
52
Etap 4. Pobieranie informacji o przedmiocie
54
Napiszmy kod dajcy informacji o przedmiocie
56
Zanim rozpoczniesz prac z obiektem dania,

upewnij si, e on istnieje
57
Obiekt dania jest po prostu obiektem
58
Hej, serwerze, wywoaj potem u mnie displayDetails(), dobrze?
59
Do wysania dania uyj send()
60
Na danie Ajaksa serwer zwykle zwraca dane
62
Ajax jest agnostykiem serwerowym
63
Uyj funkcji zwrotnej do pracy z danymi zwrconymi przez serwer
67
Pobierz odpowied serwera z waciwoci responseText obiektu dania
68
egnajcie, tradycyjne aplikacje internetowe!
70
Strony ajaksowe rozmawiaj

z serwerem tylko wtedy, kiedy musz...
i tylko o tym, o czym serwer wie.
Problemem witryny Roba nie s zbyt wolne
serwery, ale fakt, e strony cigle wysyaj
dania... nawet wtedy, gdy nie musz.
danie
function
getDetails()
getDetails
{
... displayDetails()
}
thumbnails.js
Kod JavaScript moe

uy
z serwera do zaktualizow danych
ania tylko
fragmentu strony.
getDetails.php
danie
Serwer odpowiada,
a przegldarka uruchamia
funkcj zwrotn.
serwer WWW
Serwer zawsze co
przetwarza i zwraca
dane... czasem kod
HTML, a czasem
surowe informacje.
Spis treci
Projektowanie aplikacji w metodologii Ajax
Mylenie po ajaksowemu
Witamy wrd aplikacji ajaksowych to zupenie nowy wiat internetowy.
Utworzye ju swoj pierwsz aplikacj w metodologii Ajax i zaczynasz zastanawia si, jak
wprowadzi dania asynchroniczne do pozostaych swoich witryn. Ale w Ajaksie nie wszystko
sprowadza si do programowania. Musisz inaczej myle o aplikacji. Samo wykonywanie
da asynchronicznych nie sprawia, e staje si ona bardziej przyjazna dla uytkownika.
To ty powiniene mu pomc unikn popenienia bdw, a to oznacza konieczno
powtrnego przemylenia projektu caej aplikacji.
Tradycyjna witryna Mikea jest do bani
W trakcie...
Nazwa uytkownika
jest w porzdku.
Nazwa uytkownika
jest zajta.
Uyjmy Ajaksa do ASYNCHRONICZNEGO przesyania da rejestracji
76
Aktualizacja strony rejestracji
81
PROGRAMOWA konfiguracja procedury obsugi zdarzenia window.onload
84
Kod JavaScript znajdujcy si poza funkcjami

jest wykonywany podczas odczytu skryptu
86
Co kiedy si wydarza?
87
A na serwerze...
88
Niektre czci projektw ajaksowych bd takie same... zawsze
90
Funkcja createRequest() jest zawsze taka sama
91
Twrz obiekt dania... w wielu przegldarkach
94
Projekt aplikacji ajaksowej obejmuje zarwno stron WWW,

jak i program po stronie serwera
96
Co ju zrobilimy...
99
Co jeszcze musimy zrobi...
Po wpisaniu nazwy uytkownika

powinien zosta wywietlony ten
obrazek postpu.
Przycisk wysyania
jest wyczony.
Ten obrazek
informuje,
e nazwa
uytkownika
jest
w porzdku.
74
99
Obiekt dania czy twj kod z przegldark
102
Porozumiewasz si z przegldark, a nie z serwerem
103
Przegldarka wywouje kod zwrotnie

i przekazuje do niego odpowied serwera
106
Poka Mikeowi ajaksow stron rejestracji
108
Teraz formularz moe przesya dania do serwera na dwa sposoby
109
Utwrzmy klasy CSS dla kadego stanu przetwarzania dania...
112
...i zmiemy klas CSS za pomoc JavaScriptu
113
Zmiany? Nie potrzebujemy ich!
114
Zezwalaj na rejestracj tylko wtedy, gdy wprowadzono odpowiednie dane
115
Teraz moesz
przesa stron.
Spis treci
Zdarzenia w JavaScripcie
3
Pocztkujcy.
Tu powiniene zacz,
jeeli nie uprawiae
jeszcze jogi.
rednio zaawansowany.
Jeeli kurs dla pocztkujcych
przesta by wyzwaniem,
sprbuj swoich si tutaj.
Zaawansowany.
Bardzo wymagajcy!
10
Reagowanie na uytkownikw
Czasami kod musi reagowa na inne rzeczy dziejce si w aplikacji
internetowej... W takiej sytuacji przydatne s zdarzenia. Zdarzenie jest czym, co dzieje si
na stronie, w przegldarce, a nawet na serwerze. Nie wystarczy jedynie wiedzie o zdarzeniach...
Czasami trzeba na nie odpowiedzie. Tworzc kod i rejestrujc go jako procedur obsugi
zdarzenia, moesz sprawi, aby przegldarka wykonywaa go zawsze, gdy wystpi okrelone
zdarzenie. Pocz zdarzenia i ich procedury obsugi, a otrzymasz interaktywne aplikacje
internetowe.
Wszystko zaczo si od psa z gow w d
124
Aplikacje ajaksowe to co wicej ni suma ich czci
131
Oto kod XHTML strony Marty...
132
Zdarzenia s kluczem do interaktywnoci
134
Pocz zdarzenia ze strony WWW z procedurami obsugi w kodzie JavaScript
137
Za pomoc zdarzenia window.onload zainicjalizuj

pozostae elementy interaktywne strony
138
Niech przyciski po lewej stronie reaguj na kliknicia
143
Uyj treci i struktury XHTML
144
Dopisz te kod funkcji hideHint()
147
Karty: zudzenie optyczne (i graficzne)
148
Sigaj po obrazy za pomoc ptli for...
149
Klasy CSS s (znowu) kluczem do rozwizania problemu
150
Hm... ale karty nie s <a>!
151
To popsuo nasz JavaScript, prawda?
152
Uyj obiektu dania do pobrania z serwera informacji o zajciach
157
Zachowaj ostrono, gdy masz dwie funkcje

zmieniajce t sam cz strony
158
Gdy musisz zmienia obrazy w skrypcie, myl o zmienianiu klas CSS
163
W XHTML-u odnoniki s reprezentowane przez elementy <a>
164
Potrzebujemy te funkcji wywietlajcej i ukrywajcej przycisk
165
Spis treci
Kilka procedur obsugi zdarze
Dwoje to ju towarzystwo
Jedna procedura obsugi zdarzenia nie zawsze wystarcza. Czasami zdarzenie musi
wywoa kilka procedur obsugi. By moe musisz utworzy jakie operacje specyficzne dla zdarzenia
oraz kod generyczny; wwczas umieszczenie tego wszystkiego w jednej procedurze obsugi nie uda
si. Albo po prostu chcesz utworzy jasny kod wielokrotnego uytku i masz dwa fragmenty
funkcjonalnoci wyzwalane przez to samo zdarzenie. Na szczcie moemy uy metod z DOM
Poziom 2, aby przypisa kilka procedur obsugi do jednego zdarzenia.
Do zdarzenia moe by przypisana tylko jedna procedura obsugi
(a przynajmniej tak si wydaje)
170
Procedury obsugi zdarze s po prostu waciwociami
171
Waciwo moe mie tylko JEDN warto
171
Przypisz kilka procedur obsugi zdarze, korzystajc z addEventListener()
172
W DOM Poziom 2 do jednego zdarzenia na obiekcie

mona przypisa kilka procedur obsugi
174
Co si dzieje z Internet Explorerem?
178
Internet Explorer uywa zupenie innego modelu zdarze
179
attachEvent() i addEventListener() s funkcjonalnymi odpowiednikami
179
addEventHandler() dziaa we WSZYSTKICH aplikacjach,

nie tylko na stronie Marty
184
Uyjmy naszej nowej funkcji narzdziowej w initPage()
185
W poszukiwaniu rozwizania uyj alert()
187
Co jeszcze moe by problemem?
187
W IE wacicielem procedur obsugi jest szkielet zdarze IE,

a NIE aktywny obiekt strony
189
attachEvent() i addEventListener() przesyaj

jeszcze jeden argument do naszych funkcji
190
Musimy nazwa argument Event, aby nasze funkcje mogy z nim pracowa
191
Ty mwisz target, ja mwi srcElement
192
A wic jak POBIERAMY obiekt, ktry wyzwoli zdarzenie?
196
id="advanced"
<a
id=""advanced"
id="advanced"
href="#"
...
onmouseover = showHint
/>
XHTML file
currentBtn.
onmouseover =
showHint;
title="advanced"
href="#"
<a> element
title,
Obiekt <a> ma waciwoci: id,
o
href i onmouseover. Kada waciw
posiada swoj nazw i warto.
JavaScript file
11
Spis treci
Aplikacje asynchroniczne
To jak odnawianie prawa jazdy

Masz do czekania? Nienawidzisz opnie? Moesz co z tym zrobi,
wykorzystujc asynchroniczno! Utworzye ju kilka stron wykonujcych dania
asynchroniczne do serwera, aby uytkownik nie musia czeka na odwieenie strony.
W tym rozdziale jeszcze dokadniej omwimy szczegy budowania aplikacji asynchronicznych.
Dowiesz si, co tak naprawd oznacza asynchroniczno, nauczysz si uywa kilku da
asynchronicznych, a nawet utworzysz funkcj monitorujc, aby asynchroniczno nie wprawiaa
w zakopotanie ani ciebie, ani uytkownikw.
Co tak naprawd oznacza asynchroniczno?
202
Cay czas budowae aplikacje asynchroniczne
204
Ale czasem moesz ledwo zauway...
205
Mwic o przetwarzaniu po stronie serwera...
206
Asynchroniczno w trzech atwych krokach
209
Potrzebujemy dwch pl na hasa oraz <div> na zdjcia okadek
210
Jeeli potrzebujesz nowego zachowania, prawdopodobnie

potrzebujesz te nowej funkcji obsugujcej zdarzenie
215
Za pomoc JEDNEGO obiektu dania moesz

bezpiecznie wysa i odebra JEDNO danie asynchroniczne
224
dania asynchroniczne nie czekaj na nic... nawet na siebie!
225
Jeeli wykonujesz DWA oddzielne dania,

uyj DWCH osobnych obiektw
226
Asynchroniczno oznacza, e nie moesz polega

na KOLEJNOCI da i odpowiedzi
232
Funkcja monitorujca OBSERWUJE aplikacj...

SPOZA wykonywanego kodu
237
Funkcj monitorujc wywouj wtedy, gdy podjcie dziaania

MOE by konieczne
238
Dziki zmiennym stanu funkcje monitorujce wiedz, co si dzieje
240
A oto nasza ostatnia sztuczka
244
dania synchroniczne uniemoliwiaj wykonanie

czegokolwiek CAEMU KODOWI
246
Uyj setInterval(), aby to JavaScript, a nie twj kod, uruchamia proces
249
Asynchroniczne danie coli

Rufus,
przynisby mi
jeszcze jedn col?
I znowu dasz od Rufusa,

aby przynis ci col, lecz tym
razem mwisz mu, e jest psem
asynchronicznym.
12
Poprosz go o
podwyk. Wicej
gryzakw.
Rufus ponownie idzie po

col, ale teraz jest psem
ASYNCHRONICZNYM.
A to oznacza, e czekajc
na col, moesz robi, co chcesz.
Nie jeste unieruchomiony jak
wtedy, gdy Rufus by synchroniczny.
Zanim Rufus wrci,

bdziesz przy siedemnastym
doku. Idealny moment na
przerw!
Wynik jest taki sam

dostae col. Rnica
wie si z tym, e
podczas oczekiwania nie
bye unieruchomiony.
Spis treci
Obiektowy model dokumentu
Lenictwo na stronie WWW

Poszukiwany: atwe w aktualizacji strony WWW. Czas wzi sprawy w swoje rce
i zacz pisa kod aktualizujcy strony WWW w trakcie ich przegldania. Dziki obiektowemu
modelowi dokumentu twoje aplikacje bd w cakowicie nowy sposb odpowiaday na dziaania
uytkownikw, a ty na zawsze wyeliminujesz niepotrzebne przeadowania stron. Po przeczytaniu
tego rozdziau bdziesz potrafi wyszuka, przenie i zaktualizowa zawarto znajdujc si
dosownie w dowolnym miejscu strony. A wic przewr kartk i udajmy si na przechadzk
po Szkce Lenej Webville.
Moesz zmienia ZAWARTO strony...
256
...albo STRUKTUR strony
257
Do reprezentowania strony przegldarki wykorzystuj

obiektowy model dokumentu
258
Oto kod XHTML, ktry napisae...
260
...a tak go widzi przegldarka
261
Strona jest zbiorem powizanych obiektw
263
Wykorzystajmy DOM do utworzenia dynamicznej aplikacji
270
Rozpoczynamy od XHTML-u...
272
appendChild() dodaje do wza nowego potomka
281
Moesz wyszukiwa elementy wedug nazwy (name) lub identyfikatora (id)
282
Czy mog przenie kliknit pytk?
286
Moesz porusza si po drzewie DOM, uywajc relacji RODZINNYCH
288
Drzewo DOM zawiera wzy dla WSZYSTKIEGO,

co znajduje si na stronie WWW
298
Waciwo nodeName wza tekstowego ma warto "#text"
300
Wygraem? Wygraem?
304
Ale powanie... wygraem?
305
#tabs {
...
}
<html>
<script src=
...js />
<img src=
siteLogo
.png />
</html>
document
Obiekt document
zawiera struktur strony
zdefiniowan przez kod
XHTML.
classes.html
yoga.css
schedule.js
Style, a nawet kod

doczony do struktury, s
rwnie reprezentowane
w DOM-ie.
13
Spis treci
Manipulowanie DOM-em
Moje yczenie jest dla ciebie rozkazem

DOM-em
Czasami potrzebujesz tylko troch kontroli nad umysem. Dobrze wiedzie,
e przegldarki przeksztacaj kod XHTML w drzewa DOM. Moesz wiele osign, poruszajc si
po nich. Ale potne moliwoci daje dopiero przejcie kontroli nad drzewem DOM i sprawienie,
by wygldao ono tak, jak Ty tego chcesz. Zdarza si, e musisz doda nowy element i troch
tekstu lub usun ze strony element taki jak <img>. To i wiele innych rzeczy moesz osign
za pomoc DOM-u, a przy okazji pozby si tej kopotliwej waciwoci innerHTML. Wynik?
Kod, ktry potrafi zrobi ze stron wicej, bez mieszania prezentacji i struktury w JavaScripcie.
Webville Puzzles... franszyza
wywietlenia
Gra rozpoczyna si od siatce
liter umieszczonych na kadym razem
Za
o wymiarach 5 na 5.
przypadkowy.
ukad liter powinien by
Gracze mog klika litery

w celu budowania sw
w tym okienku.
Gracze mog
przesya
sowo, aby
sprawdzi jego
poprawno...
308
W Woggle pytki nie s przechowywane w komrkach tabeli
312
Pytki z XHTML-em s pozycjonowane za pomoc CSS-u
313
Nie chcemy ZUPENIE przypadkowych liter
315
Caa prezentacja znajduje si w CSS-ie
317
Potrzebujemy nowej procedury obsugi zdarzenia dla klikni
319
Zaczynamy tworzy procedur obsugi kliknicia pytek
320
Procedur obsugi zdarzenia moemy przypisa w funkcji randomizeTiles() 320

...i otrzyma
wynik 1
punkt za kad
samogosk
i 2 punkty za
spgosk.
Kada pytka moe by uyta tylko

w jednym sowie. Po wykorzystaniuraz
pytki nie mona jej klikn do
momentu rozpoczcia tworzenia
nowego sowa.
14
Uyte sowa
s umieszczane
w tym okienku.
W JavaScripcie wartoci waciwoci s po prostu acuchami
321
Do <div> currentWord musimy doda tre ORAZ struktur
324
Do zmian struktury strony uyj DOM-u
324
Do tworzenia elementu DOM suy createElement()
325
Musisz POWIEDZIE przegldarce,

gdzie ma umieci tworzony wze DOM
326
Musimy wycza poszczeglne pytki.

To oznacza zmienianie klasy CSS pytki...
334
...ORAZ WYCZENIE procedury obsugi zdarzenia addLetter()
334
Przesanie sowa jest po prostu (kolejnym) daniem
336
Nasz kod JavaScript nie interesuje si tym,

jak serwer opracowuje odpowied na nasze danie
336
Test uytecznoci: KIEDY wywoujemy submitWord()?
341
Spis treci
Frameworki i zestawy narzdzi
Nie ufaj nikomu

A wic czym tak naprawd s te frameworki ajaksowe? Jeeli spdzie troch czasu,
pracujc nad aplikacjami internetowymi, prawdopodobnie natkne si na przynajmniej jeden
framework JavaScript lub Ajax. Niektre frameworki oferuj wygodne metody pracy z DOM-em.
Inne uatwiaj walidacj i wysyanie da. Jeszcze inne zawieraj biblioteki z gotowymi efektami
wizualnymi w JavaScripcie. Ale ktry powiniene wybra? I skd masz wiedzie, co tak naprawd
dzieje si w takim frameworku? Musisz zrobi co wicej, ni tylko skorzysta z kodu napisanego
przez innych... Czas przej kontrol nad swoimi aplikacjami.
Zalety frameworkw
Wady frameworkw
A wic jakie frameworki S dostpne
357
W kadym frameworku obowizuje inna skadnia
358
Skadnia moe by inna, ale JavaScript pozostaje niezmieniony
359
Uywa frameworkw czy ich nie uywa?
362
Wybr naley do ciebie...
364
dania i odpowiedzi XML
Wicej ni mog wyrazi sowa

Jak opisaby siebie za 10 lat? A za 20? Czasami potrzebujesz danych, ktre zmieniaj
si razem z twoimi potrzebami... lub potrzebami twoich klientw. Dane, z ktrych teraz
korzystasz, mog si zmieni za kilka godzin, dni lub miesicy. Dziki XML-owi, rozszerzalnemu
jzykowi znacznikw, dane mog same si opisywa. Oznacza to, e twoje skrypty nie bd
wypenione instrukcjami if, else i switch. Zamiast tego moesz wykorzysta dostarczane przez
XML opisy do okrelenia, jak uy danych zawartych w XML-u. Wynik: wiksza elastyczno
i atwiejsza obsuga danych.
Rob chce doda

cen kadego
przedmiotu.
Dostosowujemy rock klasyczny do XXI wieku
366
Jak serwer powinien przesa odpowied z WIELOMA wartociami?
369
innerHTML jest atwy tylko w aplikacji po stronie klienta
375
Do pracy z XML-em wykorzystujesz DOM,

tak jak w przypadku XHTML-u
381
XML sam si opisuje
388
Kady przedmiot bdzie zawiera kilka

odnonikw odsyajcych do dalszych
informacji.
15
Spis treci
JSON
10
Syn JavaScriptu
JavaScript, obiekty i notacja, o rany! Jeeli bdziesz musia kiedy reprezentowa obiekty
w JavaScripcie, pokochasz JSON, JavaScript Standard Object Notation. Dziki JSON-owi
moesz reprezentowa zoone obiekty i odwzorowania za pomoc tekstu i kilku nawiasw
klamrowych. Co wicej, moesz wysya i odbiera JSON w innych jzykach, takich jak PHP, C#
i Ruby. Ale jak JSON sprawuje si jako format danych? Obr kartk i si przekonaj...
JSON moe by tekstem ORAZ obiektem

CSV
itemDetails = response.split(";");
Serwer WWW
XML
responseDoc = request.responseXML;
Serwer WWW
JSON
description = item.description;
16
Serwer WWW
JSON moe by tekstem ORAZ obiektem
401
Dane JSON mona traktowa jak obiekt JavaScript
402
A wic jak pobra dane JSON z odpowiedzi serwera?
403
JavaScript potrafi interpretowa dane tekstowe
405
Uyj eval(), aby rcznie interpretowa tekst
405
Interpretowanie danych JSON zwraca ich obiektow reprezentacj
406
Obiekty JavaScript s JU dynamiczne...

poniewa nie s obiektami SKOMPILOWANYMI
412
Moesz uzyska dostp do skadnikw obiektu...

a nastpnie pobra za ich pomoc wartoci z obiektu
413
Odpowied serwera musisz PARSOWA,

a nie tylko INTERPRETOWA
419
Ktry format danych jest lepszy?
422
Spis treci
Formularze i walidacja
11
Powiedz to, co chciae powiedzie

Od czasu do czasu kady popenia bdy. Pozwl czowiekowi mwi (lub pisa)
przez kilka minut, a prawdopodobnie popeni przynajmniej jeden bd lub dwa. A jak maj
odpowiada na bdy nasze aplikacje internetowe? Musimy sprawdza poprawno
wprowadzanych przez uytkownikw danych i reagowa, gdy wystpuj w nich jakie usterki.
Ale co powinno si czym zajmowa? Co powinna robi strona WWW? Co powinien robi
JavaScript? I jaka jest rola serwera w walidacji i integralnoci danych? Przewr kartk,
aby pozna odpowiedzi nie tylko na te pytania.
Joga dla programistw... wietnie prosperujcy interes
428
Walidacja powinna przebiega od strony WWW w kierunku serwera
434
Moesz sprawdza poprawno FORMATU danych

i moesz sprawdza poprawno ZAWARTOCI danych
440
Musimy sprawdzi poprawno FORMATU danych z formularza zapisw
441
Nie powtarzaj si: DRY
443
Napiszmy jeszcze kilka procedur obsugi zdarze
446
POWRT SYNA JavaScriptu
450
Warto waciwoci moe by kolejnym obiektem JavaScriptu
450
Ostrzemy klientw Marty, gdy wystpi bd we wprowadzonych danych
453
Jeeli nie ostrzegamy, stosujemy unwarn()
457
JEELI istnieje ostrzeenie, usu je
457
Powtarzanie danych jest problemem SERWERA
463
A wic skoczylimy, prawda?
464
danie
enroll.js
serwer WWW
Strona WWW
JavaScript
Serwer
17
Spis treci
dania POST
12
Paranoja to twoja przyjacika

Kto ci obserwuje. Teraz. Naprawd. Freedom of Information Act? Czy to nie ta ustawa,
ktra uatwia powstanie internetu? Obecnie wszystko, co uytkownik wpisze do formularza
lub kliknie na stronie WWW, podlega kontroli. A to przez administratora sieci, a to przez firm
prbujc pozna preferencje klientw, a to przez hakera lub spamera twoje informacje nie
s bezpieczne, jeeli ich nie zabezpieczasz. W przypadku stron WWW musisz chroni dane
uytkownikw po klikniciu przycisku Wylij.
Poniewa jest to danie typu POST,

e
do URL dania nie s doczon
adne dane.
register.php?
Serwer WWW
Serwer pobiera dane

z dania i przeksztaca
je w co, z czego moe
skorzysta program
pracujcy po stronie
serwera.
Serwer otwiera
danie POST
i dekoduje dane
z dania...
...ktrymi w przypadku
witryny Mikea s
informacje o kliencie
oraz jego preferencje

filmowe.
username=jkowalski
password=iheartalba
firstname=Jan
lastname=Kowalski
email=jk@mac.com
genre=action
favorite=Casino Royale
tastes=Akcja, akcja, akcja!
W kocu serwer
przesya dane do
programu okrelonego
przez URL.
<?php...
?>
register.php
18
W filmie wystpuje czarny charakter
466
W daniach GET parametry dania s przesyane jako jawny tekst
469
dania typu POST NIE przesyaj jawnego tekstu
470
Dane w daniu POST s ZAKODOWANE,

dopki nie znajd si na serwerze
472
Wysyamy dane w daniu POST
474
Zawsze upewniaj si, e dane dania zostay OTRZYMANE
476
Dlaczego danie POST nie zadziaao
478
Serwer dekoduje dane POST
479
Musisz POWIEDZIE serwerowi, co wysyasz
480
Ustaw nagwek dania za pomoc metody

setRequestHeader() obiektu dania
482
Spis treci
Pozostaoci
Pi najwaniejszych tematw (ktrych nie omwilimy)

To bya duga podr... i niemal dotare do koca. Trudno jest nam pogodzi
si z myl, e nas opucisz, ale zanim odejdziesz, musimy omwi jeszcze kilka zagadnie.
Nie moglimy zmieci caej tematyki zwizanej z Ajaksem w jednej 600-stronicowej ksice.
C, prbowalimy... ale dzia marketingu stwierdzi, e 14-kilogramowa ksika techniczna nie
bdzie zbyt dobrze prezentowaa si na pce. Wic wyrzucilimy wszystko, co nie jest niezbdne,
a pozostae wane informacje zamiecilimy w tym dodatku.
1. Inspekcja DOM-u
492
2. agodna degradacja
495
3. Biblioteki script.aculo.us oraz Yahoo UI
496
4. Uycie bibliotek JSON w kodzie PHP
498
5. Ajax i ASP.NET
500
Funkcje narzdziowe
Po prostu daj mi kod

Czasami chcesz mie po prostu wszystko w jednym miejscu. Spdzie wiele czasu,
uywajc utils.js, naszej maej klasy funkcji narzdziowych, ktre obsuguj Ajax, DOM i zdarzenia.
Na kolejnych stronach wszystkie te funkcje zostan umieszczone w jednym miejscu i bdziesz
mg ich uywa we wasnych skryptach narzdziowych oraz aplikacjach. Po raz ostatni przyjrzyj
si tym funkcjom i bierz si do pracy nad wasnymi narzdziami!
utils.js: etapy rozwoju
Skorowidz
504
507
19
2. Projektowanie aplikacji w metodologii Ajax
Mylenie po ajaksowemu
Wykonywanie z Ajaksem dwch
czynnoci jednoczenie... Rety,
to jest super! Ale przyznam,
e musz zupenie zmieni
sposb mylenia.
Witamy wrd aplikacji ajaksowych to zupenie nowy wiat internetowy.

Utworzye ju swoj pierwsz aplikacj w metodologii Ajax i zaczynasz zastanawia si, jak
wprowadzi dania asynchroniczne do pozostaych swoich witryn. Ale w Ajaksie nie wszystko
sprowadza si do programowania. Musisz inaczej myle o aplikacji. Samo wykonywanie da
asynchronicznych nie sprawia, e staje si ona bardziej przyjazna dla uytkownika. To ty powiniene
mu pomc unikn popenienia bdw, a to oznacza konieczno powtrnego przemylenia
projektu caej aplikacji.
to jest nowy rozdzia
73
Aplikacja internetowa potrzebujca przemiany w ajaksow
Tradycyjna witryna Mikea jest do bani

Mike pisze wietne recenzje filmowe i zapragn przenie je do internetu.
Niestety, pojawiy si problemy ze stron rejestracji. Internauci odwiedzaj
witryn, wybieraj nazw uytkownika, wpisuj jeszcze kilka informacji
i wysyaj formularz, aby uzyska dostp do recenzji.
Jednak gdy nazwa uytkownika jest ju zajta, pojawia si problem
serwer zwraca ponownie pocztkow stron, komunikat o bdzie...
bez adnych informacji wpisanych przez uytkownika. Ponadto internauci
denerwuj si, e musz czeka na now stron, a potem nie otrzymuj
niczego poza komunikatem o bdzie. Oni chc recenzji filmw!
Uwaga od dziau HR: Czy moe

my
uy mniej obraliwego okrelen
ia?
Na przykad irytuje wszystkich
uytkownikw?
szani
Uytkownicy nie powinni by zmu
tylko
pl
iu
om
nia
enie
wyp
do
dane
po to, aby dowiedzie si, czy
w pierwszym polu s poprawne.
Teraz uytkownik
formularz i klika wypenia
Zarejestruj... przycisk
Na
czeka, majc na stpnie
dz
e wszystko si iej,
uda.
Rejestruj si setki osb,

wic wiele nazw uytkownikw
jest ju zajtych. Wszystkie inne
witryny obsuguj zapisy w ten sposb,
ale to ja jestem zalewany skargami.
Moesz mi pomc?
nie
Witryna wyglda wiet
i zawiera mnstwo
wietnych recenzji... ikw,
ale tylko dla uytkown
ktrym uda si
zarejestrowa i przej
dalej, poza stron
rejestracji.
74
Rozdzia 2.
wiczenie
1
Mike jest w prawdziwych tarapatach. Ty jednak, nawet po napisaniu jednej aplikacji ajaksowej,
powiniene mie kilka pomysw na usprawnienie jego witryny. Spjrz na schemat obecnego
sposobu dziaania aplikacji i napisz, co twoim zdaniem powinno si dzia. Nastpnie odpowiedz
na pytania znajdujce si na dole strony.
Uytkownik wypenia formularz rejestracji.

2
Formularz jest przesyany do serwera WWW.
serwer WWW
3
4
Serwer wywietla
ekran powitalny...
Program po stronie serwera weryfikuje informacje

podane przez uytkownika podczas rejestracji...
...i zwraca do przegldarki now stron WWW.
lub
...lub ponownie wyw

ietla
stron rejestracji
z komunikatem o bdzi
e.
Wszystkie informacje
wnika
wpisane przez uytko
..
ne.
aco
utr
zostaj
te.
Wszystkie pola s pus
Jak sdzisz, jaki jest najwikszy problem z witryn Mikea? .
Co by zrobi, aby usprawni witryn Mikea?.........
jeste tutaj
75
dania asynchroniczne
Uyjmy Ajaksa do ASYNCHRONICZNEGO

przesyania da rejestracji
Ajax jest idealnym narzdziem do rozwizania problemu ze stron Mikea. W tej chwili
najwikszy problem polega na tym, e uytkownik musi czeka na pene przeadowanie
strony tylko po to, aby dowiedzie si, e nazwa uytkownika jest ju zajta. Co wicej,
jeeli bdzie chcia wybra inn nazw, musi ponownie wpisa pozostae informacje.
Obydwa problemy moemy rozwiza, korzystajc z metodologii Ajax.
Wci musimy porozumie si z serwerem, aby dowiedzie si, czy nazwa uytkownika
jest ju zajta, ale po co czeka, a uytkownik wypeni cay formularz? Gdy internauta
skoczy wpisywa nazw, moemy wysa danie asynchroniczne do serwera, sprawdzi
nazw i zakomunikowa problemy bezporednio na stronie bez koniecznoci jej
przeadowania i bez utraty innych informacji wprowadzonych przez uytkownika.
Czy jako najwikszy

problem witryny Mikea
opisae co podobnego?
Nic zego si nie stao,

jeeli nie pomylae
o wysaniu dania tu
po zakoczeniu wpisywania
nazwy przez uytkownika...
Dostajesz jednak dodatkowy
punkt, jeeli o tym
pomylae!
To jest potencjalny fan

witryny z recenzjami Mikea.
Sprawdmy wybran nazw
uytkownika zaraz po
opuszczeniu pola.
Wiesz ju, jak wysa
danie asynchroniczne
do serwera.
danie
Uytkownik moe wypeni

reszt formularza, podczas
gdy serwer sprawdza
nazw uytkownika.
Funkcja zwrotna
wywietli komunikat
o bdzie tylko wtedy,
gdy wystpi problem.
W midzyczasie
uytkownik wci
moe pracowa.
76
Rozdzia 2.
danie
zwrotne
wywoanie
funkcji {
...
}
JavaScript
Serwer przekazuje
do naszej funkcji
zwrotnej, czy nazwa
uytkownika jest
wolna, czy zajta.
A to wszystko po to, eby jaki

mionik filmw nie musia jeszcze raz
wpisywa swojego nazwiska i adresu e-mail?
Czy to nie lekka przesada?
Nie irytuj uytkownikw... nigdy!

W internecie twoja konkurencja jest oddalona tylko
o jedno kliknicie. Jeeli od razu nie powiadomisz
uytkownikw o problemie czy te zmusisz ich do
ponownego wykonania czegokolwiek, prawdopodobnie
stracisz ich na zawsze.
Witryna Mikea moe nie przynosi (jeszcze) zbyt duych
dochodw ani nawet nie wydaje ci si zbyt wana...
ale jest wana dla jego fanw. Pewnego dnia jeden
z uytkownikw, ktrego nie zirytujecie, moe mu
zleci pisanie recenzji filmowych dla The New York
Times za szeciocyfrow sum. Ale Mike nadal nie
bdzie wiedzia, e jego witryna odstrasza internautw.
Tutaj pomocne bd twoje umiejtnoci wykorzystania
metodologii Ajax.
a
Wana zasada projektow
e
ksi
w Aja
Nie istniej
gupie pytania
Nie irytuj uytkownikw.

Jeeli wystpi problem z aplikacj
internetow, poinformuj o tym
uytkownikw moliwie szybko
i zrozumiale. Nie powiniene te nigdy wyrzuca
tego, co uytkownicy ju zrobili, nawet jeeli
stao si co, czego oni (ani ty) si nie
spodziewali.
P: Ta: zasada projektowa nie odnosi si tylko

do Ajaksa, prawda?
O: Nie, stosuje si ona do wszystkich aplikacji
internetowych, tak naprawd do wszystkich rodzajw

aplikacji. Jednak w przypadku aplikacji ajaksowych,
a zwaszcza da asynchronicznych, wiele rzeczy moe
pj nie po naszej myli. Czci twojej pracy, jako
dobrego programisty, jest ochrona uytkownikw przed
takimi problemami, a przynajmniej powiadomienie
internautw o tym, co si dzieje.
jeste tutaj
77
Plan aplikacji Mikea
wiczenie
Czas popracowa nad witryn Mikea. Poniej spisano 5 krokw, ktre naley wykona, aby witryna dziaaa,
ale brakuje szczegowych informacji na ich temat. Ponadto pomieszano kolejno czynnoci. Uporzdkuj je
i napisz jedno lub dwa zdania o tym, co powinno si wydarzy na kadym z etapw.
Utwrz i skonfiguruj nowy obiekt dania.

...........................................................................................................
...........................................................................................................
...........................................................................................................
...........................................................................................................
?
dla pl formularza.
Ustaw procedury obsugi zdarze
............................................
............................................................... ............................................
.......
........................................................
............................................
............................................................... ............................................
.......
........................................................
?
Sprawd wybran nazw uytkownika.

...........................................................................................................
...........................................................................................................
...........................................................................................................
...........................................................................................................
Zgo wszelkie problemy z wybran nazw uytkownika.

..................................................................................................................
..................................................................................................................
..................................................................................................................
..................................................................................................................
?
Zaktualizuj kod XHTML i CSS strony rejestracji.

...........................................................................................................
...........................................................................................................
...........................................................................................................
...........................................................................................................
78
Rozdzia 2.
Po uporzdkowaniu etapw pracy nad witryn przyjrzyj si poniszym schematom przedstawiajcym

wybrane interakcje w ajaksowej wersji aplikacji Mikea. Sprawd, czy potrafisz uzupeni puste pola.
Zdarzenie ____ wywo

nasz kod JavaScript. uje
window.onload
= initPage;
urlHeader=...
rzy i _____
Funkcja JavaScript two
_.
__
__
obiekt
danie
username
validation.js
Obiekt dania przekazuje do

____ wybran ____.
Funkcja ____ aktualizuje stron, aby wywietli informacje

o sukcesie lub niepowodzeniu bez ____.
window.onload
= initPage;
urlHeader=...
danie
0
validation.js
c,
____ zwraca warto wskazuj
czy _____ zostaa _____.
Moemy wywietli
may symbol, aby da
uytkownikowi jak
wskazwk wizualn.
jeste tutaj
79
Asynchroniczno moe zmniejsza irytacj
wiczenie:
Rozwizanie
1
Twoje zadanie polegao na uporzdkowaniu etapw tworzenia ajaksowej wersji witryny z recenzjami
i na dodaniu brakujcych opisw poszczeglnych czynnoci. Miae rwnie uzupeni brakujce sowa
w schematach.
Zaktualizuj kod XHTML i CSS strony rejestracji.

Musimy dopisa elementy <script> do formularza rejestracji w celu
odwoania si do kodu JavaScript, ktry napiszemy.
Kod dla poszczeglnych etapw

moesz napisa w dowolnej
kolejnoci, ale w taki sposb
bdzie dziaa aplikacja i zgodnie
z nim bdziemy aktualizowali
aplikacj w tym rozdziale.
Ustaw procedury obsugi zdarze dla pl formularza.

Potrzebujemy troch inicjalizujcego kodu, ktry ustawia zdarzenie onblur
dla pola z nazw uytkownika. Dziki temu, gdy uytkownik opuci pole,
rozpoczniemy przetwarzanie dania.
Utwrz i skonfiguruj nowy obiekt dania.

W celu utworzenia dania moemy wykorzysta funkcj createRequest()
napisan w rozdziale 1., nastpnie do acucha URL dodamy nazw wybran
przez uytkownika, aby przesa j do serwera.
W poprzednim rozdziale
przelizgnlimy si przez t
funkcj, ale teraz omwimy
j szczegowo.
Sprawd wybran nazw uytkownika.

Po utworzeniu obiektu dania musimy go przesa do serwera, aby sprawdzi,
czy wybrana nazwa uytkownika jest wolna. Moemy to zrobi asynchronicznie,
dziki czemu internauta bdzie mg wypenia pozostae pola formularza
podczas weryfikacji nazwy uytkownika przez serwer.
rzy
Funkcja JavaScript two
a.
i wysya obiekt dani
Zdarzenie onblur
wywouje nasz
kod JavaScript.
window.onload
= initPage;
urlHeader=...
danie
username
validation.js
Obiekt dania przeka

zuj
do serwera wybran naz e
w
uytkownika.
Zgo wszelkie problemy z wybran nazw uytkownika.

Po powrocie obiektu dania funkcja zwrotna moe zaktualizowa stron,
aby wywietli wynik weryfikacji nazwy uytkownika.
n, aby wywietli
Funkcja zwrotna aktualizuje stro
zeniu
informacje o sukcesie lub niepowod z uytkownika.
prze
bez utraty informacji wpisanych
window.onload
= initPage;
urlHeader=...
danie
0
validation.js
80
Rozdzia 2.
Serwer zwraca warto wskazujc,

czy nazwa uytkownika zostaa
zaakceptowana.
Aktualizacja strony rejestracji

Podstawowa struktura strony rejestracji jest ju gotowa, wic przejdmy
dalej i dodajmy znacznik <script> adujcy kod JavaScript, ktry
napiszemy. Pniej bdziemy mogli skonfigurowa pole z nazw
uytkownika, aby wywoywao funkcj JavaScript w celu wykonania
dania do serwera.
Uwaga!
Uywaj otwierajcego
i zamykajcego znacznika
<script>.
Niektre przegldarki nie obsuguj

poprawnie samozamykajcego si znacznika
<script> np. <script/>. Zawsze
uywaj osobnego znacznika otwierajcego
i zamykajcego dla znacznika <script>.
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Filmy Mike'a</title>
<link rel="stylesheet" href="css/movies.css" />
<script src="scripts/validation.js" type="text/javascript"></script>
</head>
Tak jak w poprzednim rozdziale

plik validation.js
bdziemy uzupenia stopniowo.
Uruchom to!
<html>
<script src=
... js />
<img
src=siteLogo.
png />
</html>
registration.html
Pobierz kod XHTML i CSS strony rejestracji.
Jeeli jeszcze tego nie zrobie, pobierz przykadowe pliki pod

adresem ftp://ftp.helion.pl/przyklady/hfajax.zip. W folderze r02
znajdziesz plik registration.html. Dopisz do niego pogrubiony
wyej znacznik <script>.
Wprowad zmiany
do pliku registration.html
strony rejestracji
witryny Mikea.
Nie istniej
gupie pytania
P: I w czym problem?
P: Ale i tak bdziemy tylko
Przecie to samo robilimy

w poprzednim rozdziale w witrynie
z rockandrollowymi pamitkami,
prawda?
przesya danie i uzyskiwa

odpowied, nieprawda?
O: Jak na razie tak. Ale wikszo aplikacji
ajaksowych rozpoczyna si kilkoma

znacznikami <script> i zewntrznymi
plikami z kodem JavaScript.
O: Pewnie. W zasadzie niemal wszystkie
aplikacje ajaksowe mona opisa tak prosto.

Chocia jak si przekonasz, gdy dojdziemy
do strony rejestracji tak naprawd
moliwe s dwie interakcje z serwerem:
jedna, ktr budujemy do sprawdzenia
nazwy uytkownika, oraz kliknicie przycisku
Wylij po wypenieniu formularza.
P: I co w tym takiego strasznego?

O: Jak sdzisz? Potrafisz dostrzec jakie
problemy z utworzeniem dwch sposobw

przesyania dwch rnych da do
serwera?
jeste tutaj
81
Oddzielaj zawarto od prezentacji i od zachowania
Hej, ale zdaje si, e nie

skoczylimy jeszcze z kodem XHTML.
Co z procedur obsugi zdarzenia onblur
dla pola z nazw uytkownika? Chcemy uruchamia
jaki kod po kadym wpisaniu nazwy
uytkownika, prawda?
Oddzielaj zawarto strony od jej zachowania.

Moglibymy wywoa kod JavaScript bezporednio z kodu XHTML,
np. umieszczajc zdarzenie onblur w polu nazwy uytkownika. Ale byoby
to mieszanie zawartoci strony z jej zachowaniem.
Kod XHTML opisuje zawarto i struktur strony: dane, ktre s na
stronie, takie jak nazwa uytkownika i opis witryny z recenzjami, oraz
ukad tych danych. Natomiast sposb, w jaki strona reaguje na czynnoci
uytkownika, jest zachowaniem strony. Tym zwykle zajmuje si JavaScript.
Z kolei kod CSS definiuje prezentacj strony, czyli jej wygld.
Oddzielenie zawartoci, zachowania i prezentacji jest dobrym
rozwizaniem, nawet jeeli samodzielnie tworzysz stosunkowo prost
stron. A jeli naleysz do zespou budujcego zoone aplikacje, jest to
jeden z najlepszych sposobw pozwalajcych unikn przypadkowego
wmieszania si w czyj prac.
Oddzielaj zawarto, zachowanie

i prezentacj strony.
Jeeli tylko jest to moliwe, staraj si
oddzieli od siebie zawarto strony
(XHTML), jej zachowanie (JavaScript i procedury
obsugi zdarze) oraz jej prezentacj (CSS).
Dziki temu witryny bd elastyczniejsze
i atwiejsze w utrzymaniu i aktualizacji.
WYT
UMYS
Jak sdzisz, dlaczego oddzielenie

zawartoci witryny od jej
zachowania i prezentacji uatwia
wprowadzanie zmian?
T zasad nazywa si czasem

unobtrusive JavaScript
(dyskretny JavaScript).
82
Rozdzia 2.
Caa prawda o procedurach obsugi zdarze

Wywiad tygodnia:
Skd naprawd pochodzicie?

Head First: Ciesz si, e z nami jeste. W tym tygodniu
mamy bardzo ciekawe pytania.
Procedura obsugi: Naprawd? Zawsze chtnie
odpowiadam na pytania.
Head First: Jest jedno pytanie, ktre wszyscy zadaj.
Skd dokadnie pochodzisz?
Procedura obsugi: Przybyam z krainy ECMA, czyli...
Head First: Nie, nie, mam na myli: skd zostaa
wywoana?
Procedura obsugi: Hm... Myl, e ludzie z ECMA
opowiedzieliby wasn histori, ale skoro nalegasz...
Zwykle jestem wywoywana z pola lub przycisku formularza
XHTML. Czasem te z okien.
Head First: Czyli jeste wywoywana ze stron XHTML?
Procedura obsugi: Tak, zazwyczaj.
Head First: Tak mylaem. To rozwizuje spr.
U nas usyszelicie to jako pierwsi.
Procedura obsugi: Czekaj, czekaj. Jaki spr?
Head First: Dzwoni do nas JavaScript i zaklina, e moe
ci wywoa. Mwi co o zachowaniu wywoujcym
zachowanie... Kompletny bekot.
Procedura obsugi: A, pewnie mwisz o przypisywaniu
mnie programowo. Bardzo mdry ten JavaScript.
Head First: Programowo? Co to znaczy?
Procedura obsugi: Widzisz, w gbi duszy jestem
po prostu waciwoci...
Head First: Yyy, to ma zwizek z ECMA?
Procedura obsugi: ...ktr mona ustawi za pomoc
JavaScriptu. Nie, suchaj dalej. Wiesz, czym jest DOM,
prawda?
Head First: Nie za bardzo... Tego dotyczy ktry
z pniejszych rozdziaw.
Procedura obsugi: Trudno. Zrozum, kady element na

stronie WWW jest po prostu obiektem. Pola i przyciski s
tylko obiektami majcymi okrelone waciwoci.
Head First: Jasne, spotkalimy ju kilka pl. Byo cakiem
mio. Ale Przycisk nigdy nie odpowiada na wywoanie.
Procedura obsugi: C, zdarzenia takie jak onblur
i onload s zwizane ze mn za porednictwem tych
waciwoci.
Head First: Masz na myli sytuacj, gdy w XHTML-u
piszemy np. onblur=checkUsername() dla elementu
przyjmujcego dane?
Procedura obsugi: Dokadnie! To jest tylko waciwo
pola. Ty jedynie wskazujesz przegldarce, ktr funkcj ma
uruchomi oraz jak ma obsuy to zdarzenie.
Head First: Kompletnie si pogubiem.
Procedura obsugi: Za pomoc JavaScriptu moesz
przypisa warto waciwoci obiektu, prawda?
Head First: Mwisz, e procedur obsugi zdarze nie
trzeba przypisywa w kodzie XHTML?
Procedura obsugi: Tak! Moesz to zrobi bezporednio
w kodzie JavaScript... i oddzieli tre od zachowania.
Head First: To zaskakujce. Ale jak najpierw uruchomi
JavaScript, aby przypisa procedur obsugi zdarzenia?
Procedura obsugi: Jest pewien trik. Jakie pomysy?
Head First: Nie jestem pewien. Spytajmy publiczno.
W jaki sposb moesz uruchomi inicjalizujcy fragment
JavaScriptu bez odwoywania si do funkcji na stronie XHTML?
jeste tutaj
83
onload zdarza si pierwsze
PROGRAMOWA konfiguracja
procedury obsugi zdarzenia window.onload
Chcemy, aby cz kodu JavaScript bya uruchamiana przy adowaniu strony
rejestracji, a to oznacza, e naley go doczy jako procedur obsugi jednego
z pierwszych zdarze window.onload.
Moemy to zrobi programowo, ustawiajc waciwo onload obiektu window.
Jak? Przyjrzyjmy si, co dokadnie si dzieje podczas otwierania strony
rejestracji przez uytkownika witryny Mikea:
Na pocztku uytkownik otwiera stron rejestracji w przegldarce.

Ciekaw jestem, czy film
Juno jest naprawd tak
mieszny, jak mia by.
http://headfirstlabs.com/.../registration.html
Przegldarka da strony
rejestracji (XHTML)...
...a serwer
zwraca stron.
<html>
<script src=
"...js" />
<img src=
"siteLogo
.png" />
</html>
registration.html
Nastpnie przegldarka zaczyna przetwarza stron i prosi o kolejne pliki,

do ktrych napotka odwoania.
Przegldarka prosi o kady plik,
do ktrego odwoanie znajduje si
w kodzie XHTML...
validation.js
<html>
<script src=
"...js" />
<img src=
"bgContent.
jpg" />
</html>
bgContent.jpg
bgContent.jpg
registration.html
validation.js
84
Rozdzia 2.
zystkie
...a serwer zwraca ws ej
dane pliki (w dowoln
kolejnoci).
Jeeli plik jest skryptem, przegldarka parsuje go, tworzy obiekty

i wykonuje wszystkie instrukcje nieznajdujce si w funkcjach.
je
Niektre instrukc
.
ty
iek
ob
z
or
tw
window.
onload.=
initPage;
urlHeader=
...
Kady element strony

XHTML (np. obraz) jest
reprezentowany przez obiekt.
theImg
window
Inne instrukcje mog

ustawia waciwoci
tych obiektw.
validation.js
onload = initPage
Ustawiana jest
waciwo onload
obiektu window.
initPage()
Definiowane s rwnie
funkcje. Znajdujce si
w nich instrukcje nie s
wykonywane do momentu
wywoania funkcji.
Te przypisania znajduj si
poza funkcjami, dziki czemu
s uruchamiane przy pierwszym
parsowaniu kodu JavaScript.
W kocu, po zaadowaniu i przetworzeniu wszystkich plikw,

przegldarka wywouje zdarzenie window.onload i funkcj
zarejestrowan do obsugi tego zdarzenia.
To wszystko dzieje si,
jeszcze zanim mona
korzysta ze strony...
a wic byskawicznie!
window.
onload.=
initPage;
urlHeader=
...
window
onload = initPage
Wywietlana jest
ju caa zawarto
strony...
validation.js
...wic przegldarka
wywouje onload.
jeste tutaj
85
Inicjalizacja strony rejestracji Mikea
Kod JavaScript znajdujcy si poza funkcjami

jest wykonywany podczas odczytu skryptu
window.onload.=
initPage;
urlHeader= ...
Chcemy, aby nasza procedura obsugi zdarzenia bya uruchamiana wraz z wywietleniem
strony. Dlatego musimy przypisa funkcj do waciwoci onload obiektu window.
validation.js
Aby mie pewno, e procedura ta zostanie przypisana wraz z zaadowaniem strony,

umiecimy kod przypisujcy poza funkcjami w pliku validation.js. Dziki temu przypisanie
zostanie wykonane, zanim uytkownik bdzie mg cokolwiek zrobi na stronie.
funkcj... Jest on
Ten kod nie jest zas odczytu skryptu
dc
po
wykonywany
.
przez przegldark
Ten wiersz nakazuje przegldarce

wywoanie funkcji initPage() tu
po zaadowaniu elementw strony.
window.onload = initPage;
function initPage() {
To nakazuje
przegldarce
wywoa funkcj
checkUsername(),
gdy uytkownik
opuci pole nazwy
uytkownika
w formularzu.
document.getElementById(username).onblur =
checkUsername;
}
Oto kolejny przypadek
programowego przypisania
procedury obsugi zdarzenia.
W rozdziaach 5. i 6. dokadnie
omwimy metod getElementById.,
Na razie musisz jedynie wiedzie
e zwraca ona element XHTML
o okrelonym identyfikatorze.
function checkUsername() {
// uzyskaj obiekt dania
// i wylij go do serwera
To jest funkcja,
ktra bdzie
tworzya
i wysyaa
obiekt dania.
Napiszemy
j troszeczk
pniej.
function showUsernameStatus() {
To zaktualizuje
stron po otrzymaniu
odpowiedzi z serwera.
// aktualizuj stron, aby wskaza,

// czy nazwa uytkownika zostaa przyjta
}
Uruchom to!
86
Rozdzia 2.
Napisz pocztkow wersj validation.js.
W edytorze tekstu utwrz nowy plik, validation.js, i napisz w nim

przedstawione wyej deklaracje funkcji. Pamitaj, aby przypisa
funkcj initPage() do waciwoci onload obiektu window!
Co kiedy si wydarza?
Na tym etapie wiele si dzieje. Omwmy to dokadnie, aby mie
pewno, e wszystko odbywa si dokadnie wtedy, gdy tego chcemy.
Na pocztku...
Gdy przegldarka aduje plik XHTML, znacznik
<script> nakazuje jej zaadowa plik JavaScript.
Cay kod, ktry znajduje si na zewntrz funkcji,
w tym pliku zostanie wykonany natychmiast,
a interpreter JavaScriptu w przegldarce utworzy
funkcje, cho kod znajdujcy si w nich nie zostanie
jeszcze wykonany.
<head>
...
window.onload.=
<script src=...>
initPage;
<script src=...>
urlHeader= ...
</head>
validation.js
registration.html
Skrypt validation.js ustawia

waciwo window.onload,
aby po wystpieniu zdarzenia
onload bya wywoywana
funkcja initPage().
Nastpnie...
Instrukcja window.onload nie znajduje si w funkcji,
wic zostanie uruchomiona tu po zaadowaniu pliku
skryptowego validation.js przez przegldark.
window.onload
Instrukcja window.onload przypisuje funkcj

initPage() jako procedur obsugi zdarzenia.
Funkcja ta zostanie wywoana, gdy tylko wszystkie
pliki, do ktrych znajduj si dowoania w kodzie
XHTML, zostan zaadowane, ale zanim uytkownik
bdzie mg skorzysta ze strony WWW.
window.onload.=
initPage;
urlHeader= ...
initPage()
validation.js
Mimo e odbywa si to po kolei,

WSZYSTKO dzieje si, zanim
uytkownicy bd mogli wykona
jakiekolwiek czynnoci na stronie.
I w kocu...
Funkcja initPage() zostaje uruchomiona.
Wyszukuje ona pole o identyfikatorze username.
Nastpnie przypisuje funkcj checkUsername()
do zdarzenia onblur tego pola.
Efekt jest taki sam jak po wpisaniu
onblur=checkUsername() w kodzie XHTML.
Jednak nasz sposb jest bardziej czytelny, poniewa
oddziela kod (funkcj JavaScript) od struktury
i zawartoci (XHTML).
function
Zarwno przypisanie
window.onload, jak i funkcja
initPage() znajduj si
w pliku validation.js.
Funkcja initPage() tworzy cze

midzy polem umoliwiajcym
wprowadzenie nazwy
uytkownika i procedur
obsugi zdarzenia.
initPage() {
...
}
username.onblur
validation.js
registration.html
jeste tutaj
87
Wymagania po stronie serwera
A na serwerze...
Zanim bdziemy mogli przetestowa efekty naszej pracy nad stron rejestracji,
musimy sprawdzi serwer. Co serwer powinien dosta od nas w daniu?
Czego moemy oczekiwa od serwera?
do
Zamierzamy przesa wnika
tko
uy
w
naz
ra
we
ser
zajcego
wybran przez odwied
witryn.
Nie jest istotne

,
dziaa PHP, ASP,czy na serwerze
innego, jeeli ty czy jeszcze co
lko
na nasze danie odpowiada on
w ten sam spos
b.
username
danie
okay lub denied
Jeeli nazwa uytkownika
jest dostpna, serwer zwrci
okay. W przeciwnym
przypadku zwrci denied.
Spokojnie
Pomoc dla serwera

jest dostpna online.
Pamitaj, e wybrane
y
program pracujce po stronie
serwera s dostpne wrd
przykadw do tej ksiki pod adresem
ftp://ftp.helion.pl/przyklady/hfajax.zip.
Nie istniej
gupie pytania
P: Jeszcze raz, czym jest ten obiekt
P: Dlatego mog w pliku ze
P: Ale powinnimy to chyba
window?
skryptem przypisa funkcj do

window.onload?
przetestowa, aby upewni si,

e wszystko dziaa poprawnie?
O: Dokadnie tak. Wszystkie skrypty, do
O: Fakt. Zawsze przetestuj projekt
: Obiekt window reprezentuje okno

przegldarki uytkownika.
P: A wic window.onload jest

wykonywane, gdy tylko uytkownik
zada strony?
O: Nie tak szybko. Przegldarka zaczyna
od parsowania kodu XHTML i wszystkich

plikw, do ktrych znajduj si odwoania
w kodzie XHTML np. CSS i JavaScript.
Zatem kod znajdujcy si w skryptach poza
funkcjami jest wykonywany przed funkcj
okrelon w zdarzeniu window.onload.
88
Rozdzia 2.
ktrych znajduj si odwoania w kodzie

XHTML, s czytane przed wyzwoleniem
zdarzenia onload. Nastpnie, po
wyzwoleniu onload, uytkownicy
faktycznie mog zacz korzysta ze strony.
P: Mylaem, e aby uruchomi

kod JavaScript, trzeba go wywoa.
Jak to jest?
O: Dobre pytanie. Przez wywoanie musisz
uruchamia kod JavaScript znajdujcy si

w funkcjach, a kod znajdujcy si poza
funkcj jest wykonywany przy parsowaniu
danego wiersza kodu przez przegldark.
aplikacji, zanim uznasz, e dziaa.
P: W tym kodzie nic si nie dzieje.

Jak mam go przetestowa?
O: To jest kolejne dobre pytanie. Jeeli
masz kod, ktry nie daje widocznych

rezultatw, moesz poratowa si wiern
funkcj alert().
Jazda prbna
Zabierz now stron rejestracji na przejadk.
Upewnij si, e wprowadzie wszystkie zmiany do plikw registration.html i validation.js,
a nastpnie zaaduj stron rejestracji w przegldarce. Niewiele si zmienio, prawda?
Funkcja initPage() nie przynosi adnych widocznych rezultatw, a funkcja
checkUsername() jeszcze w ogle nic nie robi... Musimy jednak sprawdzi, czy funkcja
checkUsername() jest wywoywana, gdy uytkownik wpisze nazw uytkownika
i przejdzie do wypeniania innego pola.
To troch toporne, ale dodajmy kilka instrukcji alert(), aby upewni si, e funkcje,
ktre napisalimy, s faktycznie wywoywane.
window.onload = initPage;
document.getElementById("username").onblur = checkUsername;
alert("Wewntrz funkcji initPage().");
}
// uzyskaj obiekt dania i wylij go do serwera
alert("Wewntrz funkcji checkUsername().");
}
// aktualizuj stron, aby wskaza, czy nazwa uytkownika zostaa przyjta
}
Sprawd, czy wszystko dziaa.
window.onload.=
initPage;
urlHeader= ...
validation.js
je nam
Funkcja alert() dacj zwrotn.
wizualn informa initPage()
Wiemy, e funkcja..
jest wywoywana.
...podobnie jak checkUsername(),

ktra jest wywoywana po
wpisaniu nazwy uytkownika
i opuszczeniu tego pola
formularza przez internaut.
jeste tutaj
89
Wielokrotne wykorzystywanie rzdzi
Niektre czci projektw ajaksowych

bd takie same... zawsze
Metod window.onload i funkcj initPage() wykorzystalimy ju dwukrotnie raz
w rockandrollowym sklepie Roba, a drugi raz na stronie rejestracji Mikea. W kolejce
czeka tworzenie obiektu dania dziaajcego na stronie rejestracji tak samo jak
w witrynie Roberta.
Wiele elementw w aplikacjach ajaksowych si powtarza. Cz twojej pracy polega
na tworzeniu kodu w taki sam sposb, aby nie musia nieustannie pisa identycznych
fragmentw. Spjrzmy, jak w witrynie Mikea wyglda tworzenie i uywanie obiektu
dania:
1
Strona aduje si oraz wykonuje

zadania i inicjalizacj specyficzne
dla aplikacji.
Dobrzy projektanci apl

szukaj podobiestw ikacji
i
si ponownie wykorzys staraj
kod z innych projektw tywa
i aplikacji.
w
Wikszo tych szczeg
h
zmienia si w rnyc ich
aplikacjach zalenie od ,
funkcjonalnoci, ukadu
stylu itd.
Wywoywany jest kod JavaScript

specyficzny dla aplikacji, ktry
musi wysa danie do serwera.
3
request = createRequest();
window.onload.=
initPage;
Tworzony jest
nowy obiekt
dania.
urlHeader= ...
createRequest() {...}
validation.js
danie
danie
"okay"
okay
Serwer zwraca
lub denied.
"denied"
4
Serwer zwraca odpowied

do przegldarki, uywajc
obiektu dania.
serwer WWW
90
Rozdzia 2.
username
Ta cz czyli tworzenie
obiektu dania jest
taka sama we wszystkich
aplikacjach w metodologii
Ajax.
Obiekt dania jest

konfigurowany z uyciem
danych aplikacji i wysyany
do serwera.
Funkcja createRequest() jest zawsze taka sama

Niemal w kadej aplikacji ajaksowej potrzebujemy funkcji tworzcej obiekt
dania... i tak ju mamy. To funkcja createRequest(), ktr widzielimy
w rozdziale 1. Przyjrzyjmy si dokadniej, jak tworzy ona obiekt dania
w rnych sytuacjach we wszystkich typach przegldarek.
Uwaga!
IE5 na komputerach
Macintosh wci nie
dziaa, nawet z tym
kodem niezalenym od
rodzaju przegldarki.
Aby ta funkcja nadawaa si do

wielokrotnego uytku, nie moe
ona
zalee od konkretnej przegldarki
od szczegw konkretnej aplikacji. ani
function createRequest() {
try {
request = new XMLHttpRequest();
To jest obsugiwane
} catch (tryMS) {
przez wiele przegldarek,
a tym samym przez wielu
try {
uytkownikw.
request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (otherMS) {
try {
Pamitaj, e musimy
nie
ki
request = new ActiveXObject("Microsoft.XMLHTTP");
prbowa, dop
znajdziemy skadni
}
catch
(failed) {
zrozumiaej dla kadej
przegldarki.
request = null;
}
}
Ten wiersz zwraca danie do kodu
wywoujcego.
}
return request;
}
Nie istniej
gupie pytania
P: A wic jak naprawd nazywa si ten obiekt dania?

O: Wikszo osb nazywa go XMLHttpRequest, ale to jest
naprawd trudne do wymwienia. Oprcz tego w niektrych

przegldarkach nazywa si go inaczej, np. XMLHTTP. Zdecydowanie
atwiej jest nazywa go po prostu obiektem dania, unikajc tym
samym przywizania do konkretnej przegldarki. I tak wikszo
osb myli o tym w ten sposb jak o daniu.
jeste tutaj
91
Unikaj kopiowania i wklejania
Poczekaj... Jeeli jest to dokadnie taki sam

kod, jak wczeniej, dlaczego go po prostu
nie skopiujemy i nie wkleimy?
Kopiowanie i wklejanie nie jest dobrym pomysem

na wielokrotne wykorzystanie kodu.
Funkcja createRequest() dla witryny Mikea jest dokadnie taka sama,
jak funkcja createRequest() w witrynie Roba, nad ktr pracowalimy
w rozdziale 1. Skopiowanie kodu, ktry napisalimy w rozdziale 1.,
i wklejenie go do pliku validation.js jest jednak zym pomysem. Jeeli
si okae, e trzeba wprowadzi jak zmian, bdziesz musia to zrobi
w dwch miejscach. A jak sdzisz, co bdzie si dziao podczas pracy nad
dziesicioma lub dwudziestoma aplikacjami?
Jeeli trafisz na kod wsplny dla kilku aplikacji, wydziel go ze
skryptw specyficznych dla aplikacji i umie w skrypcie narzdziowym
wielokrotnego uytku. A wic w przypadku createRequest() moemy
usun t funkcj z pliku validation.js witryny z recenzjami i utworzy
nowy skrypt. Nazwiemy go utils.js i bdziemy umieszcza w nim kod
wsplny dla rnych aplikacji.
Pniej kada nowa aplikacja, ktr stworzymy, bdzie moga
odwoywa si zarwno do utils.js, jak i skryptu zawierajcego kod
JavaScript specyficzny dla aplikacji.
createRequest() {...}
validation.js
"okaayy"
Wikszo te
go jest specyf
dla aplikacji.
iczna
.. Trudno
wykorzysta
to ponownie.
danie
username
Funkcja createRequest() jest taka wic

sama we wszystkich aplikacjach,
n.js
wycigniemy j z pliku validatio
i umiecimy w nowym skrypcie
narzdziowym, ktrego bdziemy
ch.
uywa we wszystkich aplikacja
function
createReq
{
...
}
92
Rozdzia 2.
utils.js
Utwrz nowy plik o nazwie utils.js. Napisz w nim funkcj createRequest(),

ktrej kod znajdziesz w poprzednim rozdziale lub na stronie 91, i zapisz
zmiany.
h
Wprowad kad z tyc
go
sne
wa
do
ian
zm
kodu, odhaczajc
kolejne punkty.
try {
} catch (tryMS) {
try {
request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (otherMS) {
try {
request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (failed) {
request = null;
}
}
}
function
createReq
{
...
}
utils.js
Zazwyczaj warto
umieci kod
narzdziowy jako
pierwszy, a kod
specyficzny dla
aplikacji jako drugi.
Jeli wyrobisz sobie
takie nawyki, kod,
ktry napiszesz,
bdzie postrzegany
jako spjny
i uporzdkowany.
return request;
}
Otwrz plik registration.html i dopisz znacznik <script> z odwoaniem

do nowego skryptu utils.js.
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Filmy Mike'a</title>
<link href="movies.css" rel="stylesheet" type="text/css" />
<script src="scripts/utils.js" type="text/javascript"></script>
<script src="scripts/validation.js" type="text/javascript"></script>
</head>
<html>
<script
src="...js" />
<img src=
"siteLogo.png"
/>
</html>
Jeeli dopisae ju funkcj createRequest() do pliku validation.js, usu j.

Funkcja ta powinna znajdowa si teraz tylko w skrypcie utils.js.
Nie istniej
gupie pytania
P: Dlaczego umiecilimy odwoanie do utils.js P: Ale wci nie rozumiem, jak dziaa
przed odwoaniem do validation.js?
O: Czsto kod specyficzny dla aplikacji bdzie
wywoywa kod narzdziowy. Dlatego przegldarka

powinna zinterpretowa kod narzdziowy, zanim
zacznie parsowa kod, ktry mgby wywoa
kod narzdziowy. Poza tym jest to adny sposb
porzdkowania kodu narzdzia jako pierwsze,
kod specyficzny dla aplikacji jako drugi.
funkcja createRequest()...
: No tak. Okrelilimy createRequest() jako

funkcj wielorazowego uytku i przenielimy j do
skryptu narzdziowego. To dobrze, ale wci musimy
dowiedzie si, co ten kod tak naprawd robi.
registration.html
Oddziel to,
co jest identyczne
w rnych
aplikacjach,
i przekszta
ten kod
w zestaw funkcji
wielorazowego
uytku.
jeste tutaj
93
Dobre aplikacje dziaaj w wielu przegldarkach
Twrz obiekt dania... w wielu przegldarkach

Czas zaj si JavaScriptem i dowiedzie si, co si dzieje. Omwmy dokadnie,
krok po kroku, co robi kady fragment funkcji createRequest().
function
createReq
{
...
}
utils.js
Tworzenie funkcji.
Rozpoczynamy od utworzenia funkcji, ktr moe wywoa kady inny kod, gdy bdzie
potrzebowa obiektu dania.
Ta funkcja moe
by wywoana
ca
z dowolnego miejs
ji.
ac
lik
w ap
// utwrz zmienn o nazwie request

}
skadni
Niezalenie od uytej u
nowy egzemplarz obiektywa
dania bdzie zachow
si tak samo.
Prba utworzenia XMLHttpRequest przegldarki inne ni microsoftowe.

Definiujemy zmienn o nazwie request i prbujemy przypisa jej nowy egzemplarz obiektu
XMLHttpRequest. To dziaa niemal we wszystkich przegldarkach, oprcz Microsoft Internet
Explorer.
function createRequest(){
XMLHttpRequest
dziaa w Safari,
Firefoksie,
Mozilli, Operze
i wikszoci
przegldarek poza
tworzonymi przez
Microsoft.
try {
} catch (tryMS) {
// nie zadziaao, wic sprbujemy czego innego
}
}
Prba utworzenia ActiveXObject dla przegldarek Microsoftu.

W bloku catch prbujemy utworzy obiekt dania, korzystajc ze skadni specyficznej
dla przegldarek Microsoftu. Istniej jednak dwie rne wersje obiektowych bibliotek
Microsoftu, wic musimy wyprbowa obydwie.
Wikszo wersji IE
obsuguje t skadni...
try {
request = new ActiveXObject(Msxml2.XMLHTTP);
} catch (otherMS) {
Cay ten
kod...
try {
wstawiamy
tutaj.
...ale niektre wymagaj

innej biblioteki.
request = new ActiveXObject(Microsoft.XMLHTTP);

} catch (failed) {
// to rwnie nie zadziaao po prostu nie moemy uzyska obiektu dania
}
}
94
Rozdzia 2.
To oddziela kod
wywoujcy
od fragmentw
zwizanych
z kompatybilnoci
przegldarek.
Jeeli nic nie zadziaa, zwr null.

Wyprbowalimy trzy rne sposoby uzyskania obiektu dania. Jeeli parser dotrze do tego
bloku, bdzie to oznaczao, e aden z nich nie zadziaa. Dlatego deklarujemy request jako
null i pozwalamy kodowi wywoujcemu zdecydowa, co z tym zrobi. Pamitaj, e null jest
obiektem, ktry otrzymujesz, gdy nie masz egzemplarza obiektu.
To umiecimy
w ostatnim
bloku catch.
request = null;
Zwrcenie null oznacza, e paeczk

przejmuje kod wywoujcy, ktry moe
zdecydowa, jak zgosi bd.
Skadamy wszystko i zwracamy obiekt dania.

Pozostaje nam tylko zwrci zmienn request. Jeeli wszystko si udao, request wskazuje
na obiekt dania. W przeciwnym wypadku wskazuje na null:
innych
Dla przegldarek .
ni microsoftowe
try {
} catch (tryMS) {
try {
request = new ActiveXObject(Msxml2.XMLHTTP);
Dla fanw
Internet
Explorera.
} catch (otherMS) {
try {
request = new ActiveXObject(Microsoft.XMLHTTP);
} catch (failed) {
Mimo wszystko
zawsze co
zostanie
zwrcone,
choby tylko
warto null.
request = null;
}
}
Moglibymy wygenerowa tutaj

komunikat o bdzie, ale pozwolim
kodowi wywoujcemu zdecydow y
a,
zrobi, gdy nie uzyska obiektu daco
nia.
}
return request;
}
CELNE SPOSTRZEENIA
Q
W rnych przegldarkach
do uzyskania obiektu dania
uywana jest odmienna skadnia.
Kod powinien uwzgldnia kady
rodzaj skadni, aby aplikacja dziaaa
w rnych przegldarkach.
Niezalenie od skadni uytej do

uzyskania egzemplarza obiektu
dania, sam obiekt zachowuje si
zawsze w ten sam sposb.
Zwrcenie null, gdy uzyskanie

egzemplarza obiektu dania nie
byo moliwe, pozwala kodowi
wywoujcemu zadecydowa
co dalej. Jest to rozwizanie
elastyczniejsze ni wygenerowanie
komunikatu o bdzie.
jeste tutaj
95
Ajax jest zwizany z interakcj
Projekt aplikacji ajaksowej obejmuje zarwno

stron WWW, jak i program po stronie serwera
Chocia formularz dla strony rejestracji ju istnieje, musimy nad nim popracowa,
aby uzyska nazw uytkownika, a pniej wywietli komunikat o bdzie, jeli
nazwa jest zajta.
Nawet jeeli kto inny musi zajmowa si pisaniem kodu wykonywanego po stronie
serwera, musimy wiedzie, co przesa do tego kodu i jak przesa te informacje.
Spjrz na etapy sprawdzania poprawnoci nazwy uytkownika. Wikszo z nich
wie si z interakcj z formularzem WWW lub z programem po stronie serwera.
Tym zajmuje si funkcja
createRequest().
Sprbuj uzyska obiekt dania.
Wywietl komunikat, jeeli przegldarka nie moe utworzy dania.
Pobierz nazw uytkownika wpisan do formularza.
Upewnij si, e nazwa uytkownika nie zawiera znakw,

ktre stanowiyby problem w daniu HTTP.
Docz nazw uytkownika do URL serwera.
Poinformuj przegldark, ktr funkcj powinna wywoa,

gdy serwer odpowie na danie.
Poinformuj przegldark, jak przesa danie do serwera.
Wylij obiekt dania.
Mamy wolne a do powrotu obie

ktu
dania, ktry przegldarka prze
kae
do funkcji zwrotnej.
Tutaj mamy jeszcze

wicej interakcji
z serwerem.
Pamitaj, e funkcja
createRequest() nie
obsuguje bdw,
wic musimy to zrobi
samodzielnie.
To wsppracuje
z formularzem.
Tutaj przygotowujemy
si do wysania nazwy
uytkownika do serwera.
To jest funkcja zwrotna,

ktr wkrtce napiszemy.
Dobry projekt ajaksowy bazuje gwnie

na interakcji. Musisz wchodzi w interakcje
z uytkownikami za porednictwem
strony WWW i z logik biznesow
za porednictwem programw
pracujcych po stronie serwera.
96
Rozdzia 2.
Magnesiki z kodem
Wikszo kodu funkcji checkUsername() porozklejano na lodwce.
Czy potrafisz poskada go z powrotem? Nawiasy klamrowe spady
na podog i s zbyt mae, aby je znale i podnie. Moesz ich wic
dopisa tyle, ile bdziesz potrzebowa.
}
alert("Nie mona utworzy dania");
l);
send(nul
request.
validation.js
var theName = document.getElementById("usern

ame").value;
if (request == null
)
e {
} els
request.open("GET", url, true);
request.onreadystatechange = showUsernameStatus;
request =
createReq
uest();
me);
= escape(theNa
var username
var url = "checkName.php?username="

+ username;
jeste tutaj
97
Walidacja danej nazwy uytkownika
Magnesiki z kodem: Rozwizanie

function
createReq
{
...
}
Wikszo kodu funkcji checkUsername() porozklejano na lodwce.

Twoje zadanie polegao na poukadaniu kodu w dziaajc funkcj.
Zaczynamy od wywoania naszej

funkcji narzdziowej z pliku utils
.js
w celu uzyskania obiektu dania.
if (request == null)
utils.js
Jeeli zostaje zwrcone null, oznacza

to, e dziaanie funkcji zakoczyo si
niepowodzeniem...
...wic informujemy o
tym
uytkownika.
alert("Nie mona utworzy dania")
} else {
Metoda getElementById
wyszukuje pole formularza
o identyfikatorze username.
value to warto
wpisana przez
uytkownika
var theName = document.getElementById("usern

ame").value;
var username = escape(theName);
Funkcja escape() w JavaScripcie oczyszcza dane

wpisane przez uytkownika na wypadek, gdyby
w tekcie znalazy si spacje czy te znaki
zapytania.
var url = "checkName.php?username=" + username;

request.onreadystatechange = showUsernameSta
tus;
To jest funkcja zwrotna, do ktrej
przegldarka przele obiekt dania,
gdy serwer odpowie na danie.

request.send(null);
}
}
Metoda send() wysya

obiekt dania do serwera.
Parametr null oznacza,
e nie przesyamy adnych
dodatkowych danych.
Nazw uytkownika
doczamy do
adresu URL.
To informuje przegldark, jak wys

a
danie. Uywamy metody GET
i przesyamy je do URL okrelon
ego
przez zmienn url. Parametr true
oznacza, e ma to by danie
asynchroniczne, czyli uytkownik
mg wypenia formularz podczasbdzie
sprawdzania nazwy uytkownika
przez serwer.
si
Cay ten kod znajduje
w pliku validation.js.
window.
onload. =
initPage;
urlHeader
=...
validation.js
98
Rozdzia 2.
Co ju zrobilimy...
Przygotowalimy si do tego, aby danie zostao przesane do serwera,
kiedy tylko internauta wpisze now nazw uytkownika.
t()
Za pomoc funkcji createReques
z pliku utils.js JavaScript
uzyskuje i wysya obiekt dania.
Zdarzenie onblur wywouje

nasz kod JavaScript.
function
createReq
{
...
}
danie
username
utils.js
validation.js
Obiekt dania przekazuje

serwerowi nazw wybran
przez uytkownika.
Co jeszcze musimy zrobi...

Jestemy prawie gotowi do uzyskania odpowiedzi na danie:
Serwer zwraca warto okrelajc,
czy nazwa uytkownika zostaa
przyjta.
danie
"okay"
validation.js
n, wywietlajc
Funkcja zwrotna aktualizuje stro owodzeniu, bez utraty
komunikat o powodzeniu lub niep
uytkownika.
informacji wprowadzonych przez
Nie istniej
gupie pytania
P: Co waciwie robi getElementById()?

O: Metod getElementById() omwimy bardzo dokadnie
w rozdziaach 5. i 6., gdy bdziemy zajmowa si DOM-em.

Na razie musisz wiedzie, e zwraca ona obiekt JavaScript
reprezentujcy element XHTML na stronie.
P: A czym jest value?

O: Funkcja getElementById() zwraca obiekt JavaScript
reprezentujcy element XHTML. Tak jak wszystkie obiekty, obiekt

zwracany przez t funkcj posiada metody i waciwoci. Waciwo
value zawiera tekst znajdujcy si w elemencie w tym przypadku
to, co uytkownik wpisa w polu nazwy uytkownika.
jeste tutaj
99
Jazda prbna
Jazda prbna
Zanim przejdziemy dalej, upewnijmy si, e wszystko dziaa...
Nasz kod JavaScript wci nie aktualizuje strony w aden sposb. Korzystajc z kilku dodatkowych
funkcji alert(), moemy jednak sprawdzi, czy funkcja checkUsername() dziaa zgodnie z naszymi
oczekiwaniami.
W edytorze tekstu otwrz plik validate.js i dopisz do funkcji checkUsername() kod przedstawiony
poniej. Jest to ten sam kod, nad ktrym pracowae w wiczeniu z magnesikami, ale znajduje si
w nim kilka alertw pozwalajcych ledzi, co robi przegldarka.
Po dodaniu kodu zapisz plik i zaaduj stron w przegldarce. Wpisz cokolwiek do pola
przeznaczonego na nazw uytkownika. Powinny zosta wywietlone wszystkie komunikaty.
if (request == null)
alert(Nie mona utworzy dania)
else
{
alert(Mam obiekt dania);
var theName = document.getElementById(username).value;
alert(Pierwotna warto nazwy: + theName);
var username = escape(theName);
alert(Warto nazwy po czyszczeniu: + username);
var url= checkName.php?username= + username;
alert(URL: + url);
request.open(GET, url, true);
request.send(null);
}
}
Powinny zosta wyw

iet
komunikaty o utworzeni lone
u,
skonfigurowaniu
i wysaniu dania.
100
Rozdzia 2.
validation.js
Te alerty s czym
w rodzaju komunikatw
o stanie albo informacjami
z debuggera... Pozwalaj
nam si dowiedzie, co si
dzieje za kulisami.
Poczekaj chwil... To ma by
prawdziwy projekt aplikacji?
Kilka instrukcji alert()
i wyskakujcych okienek?
Aplikacje asynchroniczne zachowuj si inaczej

ni tradycyjne aplikacje internetowe, wic trzeba
bra to pod uwag podczas debugowania.
Aplikacje asynchroniczne nie zmuszaj do oczekiwania na
odpowied serwera, wic nie otrzymujesz z serwera caej strony.
Wikszo interakcji midzy stron WWW i serwerem jest zupenie
niewidoczna dla uytkownika. Jeeli przegldarka napotka problem
podczas wykonywania kodu JavaScript, prawdopodobnie po prostu
si zatrzyma i nie bdziesz mia pojcia, co si stao.
Komunikaty s dobrym sposobem ledzenia problemw, o ktrych
nie informuje przegldarka. Pokazuj one to, co widzi przegldarka.
Pozwalaj dowiedzie si, co dzieje si w tle, gdy uytkownicy
beztrosko wpisuj swoje dane.
rozwizania
Po przeledzeniu w usuniesz
lem
ob
pr
h
kic
wszyst
kcje alert().
wszystkie instru
W aplikacjach asynchronicznych nie moesz liczy na to, e serwer

poinformuje ci o wystpieniu problemu. To TY musisz okreli,
e wystpi problem, i zareagowa na niego w odpowiedni sposb.
jeste tutaj
101
Waciwoci obiektu dania
Obiekt dania czy twj kod z przegldark

Musimy jeszcze napisa kod, ktry przegldarka wywoa po uzyskaniu odpowiedzi
na danie. Tutaj przyda nam si obiekt dania. Dziki niemu mona
poinformowa przegldark o tym, co ma zrobi. Za jego pomoc nakaemy wic
przegldarce wykonanie dania do serwera i uzyskanie wynikw.
Ale jak to wszystko si dzieje? Pamitaj, e obiekt dania jest zwykym obiektem
w JavaScripcie. Dlatego moe on mie waciwoci, a te z kolei mog mie
wartoci. Istnieje kilka bardzo przydatnych waciwoci. Jak sdzisz, ktre bd
nam potrzebne w funkcji zwrotnej?
Jeeli serwer zwraca

dane w formacie XML, we
waciwoci responseXML
zostanie umieszczone drzewo
XML zawierajce odpowied
serwera.
serwer
Podczas przetwarzania dania
oc
pom
Za
.
razy
kilka
nie
na
wie
odpo
arka
gld
prze
te
ySta
read
ci
waciwo
informuje, na ktrym etapie
nie.
przetwarzania znajduje si da
readyState
responseXML
responseText
danie
Odpowiedziami
w formacie XML
zajmiemy si dokadniej
w rozdziale 9.
Odpowied serwera zos

zapisana we waciwo tanie
responseText. Czsto ci
zwyky tekst, ale mogjest to
to by
rwnie dane XML.
status
onreadystatechange
statusText
Waciwoci status i
sta
pozwalaj przegldarce tusText
stan dania http zw przekaza do kodu
rc
np. 200 dla OK, gdy ony przez serwer
wszystko przebiego pop serwer uwaa, e
lub Not Found, gdy ser rawnie, albo 404
wer nie odnalaz
danego URL.
Za pomoc waciwoci
onreadystatechange informujemy
przegldark, ktr funkcj ma
wywoa, gdy serwer odpowie
na danie.
Przegldarka daje kodowi dostp do

odpowiedzi serwera za porednictwem
waciwoci obiektu dania.
102
Rozdzia 2.
Porozumiewasz si z przegldark, a nie z serwerem

Cho atwo mwi si o kodzie wysyajcym obiekt dania do serwera, nie jest to
stwierdzenie do koca poprawne. W rzeczywistoci ty porozumiewasz si z przegldark,
a dopiero przegldarka porozumiewa si z serwerem. Przegldarka wysya obiekt
dania do serwera i przegldarka tumaczy odpowied serwera, zanim przekae
dane z odpowiedzi do strony WWW.
Funkcja createRequest(
uzyskuje od przeglda )
egzemplarz obiektu drki
ania.
createRequest()
utils.js
danie
przegldarka
danie
checkUsername()
validation.js
Przegldarka komunikuje
si z serwerem
za porednictwem
protokou HTTP.
Za pomoc metody send() obiektu

dania funkcja checkUsername()
prosi przegldark o przesanie
dania do serwera.
danie
showUsernameStatus()
serwer WWW
Gdy serwer odpowie na danie,

przegldarka ustawia waciwoci
obiektu dania i przesya go do
funkcji showUsernameStatus().
razy.
To powtarza si kilka pozwala
e
Waciwo readyStat arzania
nam pozna etap przetw
dania na serwerze.
validation.js
jeste tutaj 103
Stany gotowoci
Zblienie: Stany gotowoci

Za pomoc waciwoci readyState obiektu dania przegldarka
informuje funkcj zwrotn, na jakim etapie przetwarzania znajduje si
danie. Sprawdmy, co to oznacza.
i
To jest stan gotowoc
we
ny
isa
zap
a
ani
d
e.
waciwoci readyStat
readyState
opuszcza
Gdy uytkownik wnika,
ko
yt
u
y
zw
na
pole
uest()
funkcja createReq nia.
da
t
iek
ob
tworzy
Poczenie
niezainicjalizowane
Gdy waciwo readyS

obiektu dania ma wa tate
funkcja showUsernam rto 4,
eS
uywa odpowiedzi ser tatus()
we
zaktualizowania strony ra do
.
104
Rozdzia 2.
validation.js
Waciwo readyState
rwna 1 oznacza,
e danie jest gotowe
do wysania.
Po wykonaniu tej instrukcji

obiekt dania wie,
jak i z czym ma si poczy.
readyState
Poczenie
zainicjalizowane
request.send(null);
Podczas pracy nad daniem serwer

odpowiada z readyState wynoszcym 2.
Wraz z kodem stanu dostpne s nagwki
odpowiedzi, ktre zapewniaj informacje
o odpowiedzi.
readyState
danie
jest
przetwarzane
readyState
Serwer przesya
odpowiedzi na rnych
etapach procesu
przetwarzania dania.
Na tym etapie dane zostaj

pobrane do obiektu dania,
ale dane odpowiedzi nie
s jeszcze gotowe do
wykorzystania.
Pobieranie
odpowiedzi
serwera
readyState
Serwer zakoczy
przetwarzanie dania,
a dane s gotowe
do wykorzystania.
Odpowied
serwera
gotowa
jeste tutaj 105

i przekazuje do niego odpowied serwera
Zawsze, gdy zmienia si warto waciwoci readyState obiektu dania,
przegldarka musi co zrobi. I co robi? Wywouje funkcj przypisan do
waciwoci onreadystatechange obiektu dania:
Gdy zmienia si stan

gotowoci
odpowiedzi, czyli za ka
dym razem,
gdy serwer przesya
do
informacj o przetwarz przegldarki
przegldarka wywouj anym daniu,
e t funkcj.
...
...
}
Funkcja zwrotna musi si upewni, e odpowied jest ju gotowa

do uytku; moe sprawdzi waciwo readyState i status serwera,
a nastpnie, na podstawie odpowiedzi serwera, podj jakie dziaania:
if (request.readyState == 4) {
if (request.status == 200) {
if (request.responseText == okay) {
W responseText
jest przechowywana
warto tekstowa
zwracana przez
serwer. Jeeli
jest ni okay,
oznacza to, e
nazwa uytkownika
jest wolna.
validation.js
ktrej uylimy
To jest nazwa funkcji, ystatechange.
ead
onr
we waciwoci
zgodne,
Jeeli nazwy nie bd woana.
wy
ie
tan
zos
nie
a
kcj
fun
Instrukcja if daje pewno, e dalsza
cz kodu nie zostanie wykonana, jeeli
readyState ma warto rn od 4, ktra
oznacza, i serwer zakoczy prac nad
daniem.
Jeli nie wystpiy ad
serwer wysya status ne bdy,
200.
// jeeli jest to okay, nie trzeba wywietla komunikatu o bdzie

}
else {
// jeeli wystpi problem, informujemy uytkownika
Ten kod rwnie

zamieszczamy
w validation.js.
alert(Przykro nam, ale nazwa uytkownika jest zajta.);

}
}
}
}
106
Rozdzia 2.
validation.js
Jazda prbna
Dopisz funkcj showUsernameStatus() do pliku validation.js
i zaaduj stron w przegldarce.
Sprbuj wpisa jakkolwiek nazw uytkownika, oprcz stefan i natalia.
Przegldarka powinna wywietli wszystkie alerty, ktre napisalimy w celu
przetestowania funkcji initPage() i checkUsername().
Jeeli wpiszesz poprawn
nazw uytkownika, zostan
wywietlone alerty z kodu
debugujcego, ale aden
nie bdzie wskazywa
na wystpienie bdu.
Teraz sprbuj wpisa stefan lub natalia jako nazw uytkownika.

Powinien wywietli si komunikat o bdzie umieszczony w funkcji
showUsernameStatus().
Ten komunikat powinien zosta
wywietlony po wpisaniu stefan
lub natalia do pola nazwy
uytkownika i opuszczeniu tego
pola. Kto ju si zarejestrowa,
uywajc tej nazwy uytkownika.
Upewniwszy si, e wszystko dziaa poprawnie, usu z funkcji

checkUsername() dodane wczeniej alerty. Powiniene jedynie
pozostawi komunikat o niepowodzeniu przy tworzeniu dania
(funkcja checkUsername()) oraz o niedostpnoci nazwy
uytkownika (funkcja showUsernameStatus()).
Gdy masz pewno, e interakcja

midzy kodem i serwerem
przebiega poprawnie, nie
potrzebujesz ju debugujcych
instrukcji alert().
jeste tutaj 107
Czy to dziaa?
Poka Mikeowi ajaksow stron rejestracji

Wszystko dziaa. Jeeli jednak przekaesz kod Mikeowi, a on umieci
go w witrynie, wci bd wystpoway pewne problemy:
Prbowaam wpisa swoje dane, ale

znowu stao si to samo. Gdy kliknam
przycisk Zarejestruj, przegldarka
wyrzucia wszystko, co wpisaam!
Co si stao? Czy cay wysiek

woony w udoskonalenie strony
rejestracji poszed na marne?
By niepotrzebny?
Co TY o tym sdzisz?
108
Rozdzia 2.
Teraz formularz moe przesya dania

do serwera na dwa sposoby
Zamy, e uytkownik robi dokadnie to, czego oczekujemy: wpisuje nazw
uytkownika i podczas gdy danie asynchroniczne jest przesyane do serwera
i obsugiwane przez przegldark (wywoujc funkcj zwrotn) wypenia
pozostae pola formularza. Wszystko dziaa wietnie, tak jak si tego spodziewamy.
A teraz zamy, e uytkownik tak bardzo chce przeczyta recenzj filmu Iron
Man, i wpisuje nazw uytkownika, pomija pozostae czci formularza i klika
przycisk Zarejestruj. Co si wtedy stanie?
1
Uytkownik wpisuje nazw.
Do serwera jest przesyane danie asynchroniczne

w celu sprawdzenia nazwy uytkownika.
Gdy uytkownik opuszc

uytkownika, nasz kod za pole nazwy
serwera obiekt dani wysya do
a.
danie
Uytkownik klika przycisk Zarejestruj.
Zanim serwer odpowie na danie

z weryfikacj, uytkownik klika
era
przycisk Zarejestruj i do serw
zostaje przesany cay formularz.
Uytkownik pomija pozostae pola i klika przycisk

Zarejestruj, tym samym wysyajc formularz.
Zwracana jest cakowicie

nowa strona, bez informacji
wpisanych przez uytkownika,
ale z komunikatem o tym,
e nazwa uytkownika jest
ju zajta.
Serwer zwraca now stron.
Na przesanie formularza serwer odpowiada,

zwracajc (pusty) formularz z komunikatem o bdzie.
jmuje si tym,
Serwer nie prze roniczne nie
ch
yn
as
nie
da
e
ika do zmiany
wn
ko
yt
u
io
zmus
zwraca pust
tu
os
pr
Po
nazwy.
em o bdzie.
at
nik
mu
ko
stron z
To postaramy si naprawi!
Znikno nawet okienko
z komunikatem o niedostpnoci
nazwy uytkownika!
jeste tutaj 109
Oczekuj nieoczekiwanego
Ani przez myl

nam nie przeszo,
e uytkownicy mog omin
pozostae pola. Jak moemy
temu zapobiec?
Franek: C, nie moemy zabroni uytkownikom omijania poszczeglnych

pl, ale moemy dopilnowa, eby nie wyprzedzali naszego dania.
Julia: Masz na myli walidacj nazwy uytkownika? Tak, to brzmi wietnie,
ale jak to zrobi?
Franek: A gdybymy wyczyli przycisk Zarejestruj do czasu, a serwer odpowie
na danie z walidacj?
Julia: To rozwizaoby problem, ale wydaje mi si, e potrzebujemy czego
wicej.
Franek: Czego? Uytkownicy zbyt wczenie wysyaj formularz, wic jeeli
temu zapobiegniemy, rozwiemy problem.
Julia: Ale nie sdzisz, e naleaoby jako poinformowa uytkownikw, co si
dzieje?
Julia
Franek
Nie moesz zakada,

e uytkownicy
zrobi wszystko
Franek: Bd wiedzieli, co si dzieje, gdy wczymy przycisk. Do tego czasu

powinni wypenia formularz, a nie klika przycisk Zarejestruj.
Julia: Nie uwaasz, e moe to by niejasne? Jeeli uytkownik skoczy
wypenia formularz lub w ogle nie bdzie chcia tego zrobi, utknie na
stronie, nawet nie wiedzc dlaczego.
Franek: Musimy go w takim razie poinformowa, e aplikacja co robi.
Moe wywietlimy komunikat?
Julia: Kolejny alert? To bdzie rwnie denerwujce. Moe obrazek?
Moglibymy wywietli obrazek w trakcie przesyania dania do serwera...
dokadnie tak jak ty...
Franek: ...a po zweryfikowaniu nazwy uytkownika wywietli inny.
Przygotuj plan na
Julia: A jeeli uylibymy obrazkw wskazujcych, czy nazwa zostaa

zaakceptowana, czy te nie, moglibymy pozby si alertu, gdy wystpi z ni
problem.
KAD sytuacj!
Franek: Idealnie! Wizualna informacja zwrotna bez wyskakujcych okienek,

ktre wszystkich irytuj. Podoba mi si!
110
Rozdzia 2.
Wywietlaj grafik w trakcie podczas przesyania dania z weryfikacj.

Przesyajc do serwera danie w celu zweryfikowania nazwy uytkownika, obok pola
z nazw uytkownika wywietlimy grafik informujc uytkownikw, co si dzieje.
Dziki temu, wypeniajc formularz, bd oni dokadnie zorientowani w sytuacji.
Wprowad
te zmiany do
swojego kodu
i zaznacz
pola.
Prawdopodobnie metoda
getElementById zaczyna
ju wyglda znajomo.
Daje ona dostp
do elementu
na stronie XHTML.
document.getElementById("status").src = "images/inProcess.png";
zka
Poprzez wywietlenie tego obra

ujesz uytkownika, e co
form
poin
}
dzieje.
si
validation.js
Po weryfikacji wywietl komunikat o stanie.

Po powrocie obiektu dania moemy wywietli inny obrazek, korzystajc z funkcji
zwrotnej. Jeeli nazwa uytkownika zostanie zaakceptowana, wywietlimy odpowiedni
obrazek. W przeciwnym wypadku wywietlimy ikon oznaczajc bd.
Moemy
zastpi
wyskakujce
okienko
przyjemniejsz
ikonk.
Ta grafika jest wywietlana,
gdy serwer zaakceptuje
nazw uytkownika.
if (request.responseText == "okay") {
document.getElementById("status").src = "images/okay.png";
}
else {
alert("Przykro nam, ale nazwa uytkownika jest zajta.");
document.getElementById("status").src = "images/inUse.png";
}
Ta grafika zostaje
wywietlona, jeeli nazwa
uytkownika jest zajta.

}
WYSIL
validation.js
SZARE KOMRKI
Co sdzisz o tym rozwizaniu? Czy jest ono zgodne z zasad rozdzielania prezentacji i treci?
Zmieniby tutaj co?
jeste tutaj
111
Oddzielaj, oddzielaj, oddzielaj
Gdy zmieniamy obraz za pomoc

JavaScriptu, nie mieszamy czasem
prezentacji i zachowania?
Staraj si trzyma prezentacj w CSS-ie,

a zachowanie w JavaScripcie.
XHTML okrela struktur i tre. CSS powinien
zajmowa si prezentacj, obrazami, kolorami
i czcionkami. Z kolei JavaScript powinien opisywa,
co robi strona, czyli jej zachowanie. Pomieszanie tych
obszarw sprawi, e projektant nie bdzie mg zmieni
obrazu, poniewa bdzie on okrelony w kodzie
a wtedy programista bdzie musia zmienia struktur
strony. To nigdy nie prowadzi do niczego dobrego.
Cho nie jest to zawsze moliwe, powiniene stara si
utrzymywa prezentacj w CSS-ie i uywa JavaScriptu
do interakcji z CSS-em, a nie do bezporedniej zmiany
prezentacji strony.
Utwrzmy klasy CSS dla kadego

stanu przetwarzania dania...
Zamiast bezporednio zmienia obraz, umiecimy wszystkie informacje
o obrazie w CSS-ie. Otwrz plik movies.css i dopisz ponisze selektory CSS:
Pierwsza klasa po prostu okrela
pooenie ikon przetwarzania...
...a pozostae trzy klasy

zmieniaj obraz znajdujcy
si w tym miejscu.
istniejcy CSS
#username { padding: 0 20px 0 2px; width: 198px; }
Dopisz
te cztery
wiersze do
kodu CSS.
112
#username.thinking { background: url("../images/inProcess.png"); }

#username.approved { background: url("../images/okay.png"); }
#username.denied { background: url("../images/inUse.png"); }
Rozdzia 2.
To te same cztery obrazy, ktrych uylimy

w kodzie JavaScript. Teraz znajduj si one
w CSS-ie razem z reszt prezentacji.
#detail {
...
}
movies.css
...i zmiemy klas CSS

za pomoc JavaScriptu
W trakcie...
Teraz nasz JavaScript nie musi zna nazw obrazw ani

cieek dostpu; nie musi nawet wiedzie, jak wywietlane
s ikony procesu. Zamiast tego musimy jedynie zna trzy
klasy reprezentujce kady etap przetwarzania.
Nazwa uytkownika
jest w porzdku.
Nazwa uytkown
ika
jest zajta.
#username.thinking
#username.approved
#username.denied
ech
To s nazwy trz
klas CSS.
Teraz moemy (ponownie) wprowadzi zmiany do JavaScriptu.

Tym razem bdziemy zmieniali klas CSS, zamiast bezporednio
zmienia obraz.
document.getElementById("status").src = "images/inProcess.png");
document.getElementById("username").className = "thinking";
...
validation.js
Za pomoc
waciwoci
className
elementu
moesz zmieni
klas CSS.
Pamitaj, aby usun wiersze,

ktre
bezporednio zmieniay obrazek.
document.getElementById("status").src = "images/okay.png";
document.getElementById("username").className = "approved";
}
else {
alert("Przykro nam, ale nazwa uytkownika jest zajta.");
document.getElementById("status").src = "images/inUse.png");
document.getElementById("username).className = "denied");
}
jeste tutaj
113
Rzdzisz
Suchaj, chc uy jednego obrazka jako

wskanika stanu przetwarzania. Nastpnie w CSS-ie
poustawiam rne klasy, aby wywietla rne fragmenty
obrazu. To oznacza mniej adowania obrazkw i szybsze
zmiany. Brzmi niele, prawda? Wprowad zmiany
do kodu, aby to dziaao w ten sposb.
Ten kod CSS zosta w caoci

zek
zmieniony. Teraz jest to tylko obra
przesuwany za pomoc CSS-u.
istniejcy CSS
#username {
background: #fff url('../images/status.gif') 202px 0 no-repeat;
Projektantka
witryny Mikea
ma zawsze
peno nowych
pomysw.
padding: 0 20px 0 2px; width: 198px; }

#username.thinking { background-position: 202px -19px; }
#username.approved { background-position: 202px -35px; }
#username.denied { background-color: #FF8282;
background-position: 202px -52px; }
validation.js
Zmiany? Nie potrzebujemy ich!

Projektantka witryny Mikea wprowadzia wiele zmian,
ale nie zmienia nazw klas CSS dla kadego etapu
przetwarzania. To oznacza, e cay kod JavaScript dalej
dziaa, bez aktualizacji! Gdy oddzielisz od siebie trzy aspekty
aplikacji (tre, prezentacj i zachowanie), wprowadzanie do
niej zmian bdzie znacznie atwiejsze.
Kod CSS moe by zmieniany w dowolnym momencie
i nawet nie musimy o tym wiedzie. Jeeli tylko nie zmieni
si nazwy klas CSS, nasz kod bdzie dalej dziaa.
114
Rozdzia 2.
Odpowiednie oddzielenie
treci, prezentacji
i zachowania znacznie
zwiksza elastyczno
aplikacji.
Zezwalaj na rejestracj tylko wtedy, gdy wprowadzono odpowiednie dane

Po umieszczeniu wskanikw stanu przetwarzania pozostao nam jedynie wyczy przycisk
Zarejestruj podczas adowania strony i wczy go, gdy nazwa uytkownika bdzie w porzdku.
Musimy wprowadzi tylko kilka zmian do pliku validation.js:
Gdy przypiszemy waciwoci
disabled warto true,
uytkownicy bd mogli
wypenia pola, ale nie
bd mogli klikn przycisku
wysyania.
Wyczenie przycisku Zarejestruj

Nazwa uytkownika nie jest sprawdzana zaraz po zaadowaniu strony,
dlatego moemy wyczy przycisk Zarejestruj w kodzie inicjalizujcym.
document.getElementById("username").onblur = checkUsername;
document.getElementById("register").disabled = true;
}
Wczenie przycisku Zarejestruj

Jeeli nazwa uytkownika jest w porzdku, uytkownik moe si zarejestrowa,
wic musimy wczy przycisk Zarejestruj. Jeli jednak wystpuje problem z nazw,
uytkownik musi wybra inn; przycisk Zarejestruj powinien zatem by dalej
wyczony. Aby uatwi uytkownikowi wprowadzenie zmian, kiedy nazwa zostanie
odrzucona, skierujmy go z powrotem do pola z nazw uytkownika:
validation.js
Jeeli nazwa uytkownika jest

w porzdku, wcz przycisk
Zarejestruj.
document.getElementById("username").className = "approved";
document.getElementById("register").disabled = false;
}
else {
document.getElementById("username").className = "denied";
To kieruje
uytkownika
z powrotem
do pola nazwy
uytkownika.
document.getElementById("username").focus();
document.getElementById("username").select();
document.getElementById("register").disabled = true;
}
ika jest
Jeeli nazwa uytkown estruj
rej
Za
sk
yci
zajta, prz
y.
powinien by wyczon
validation.js
jeste tutaj
115
Sprawd to
Jazda prbna
Upewnij si, e wprowadzie zmiany w plikach validation.js i movies.css.
Zaaduj stron i sprawd, czy wszystko dziaa zgodnie z oczekiwaniami.
Po wpisaniu nazwy uytkownika

powinien zosta wywietlony ten
obrazek postpu.
Przycisk wysyania
jest wyczony.
Uwaga!
Ten obrazek
informuje,
e nazwa
uytkownika
jest
w porzdku.
Pliki z obrazami, do ktrych

odwouje si kod CSS, znajduj
si w pobranym folderze
z przykadami do tego rozdziau.
Upewnij si, e masz kompletny folder

z przykadami, ktry zawiera obrazy stanw
przetwarzania.
Teraz moesz
przesa stron.
116
Rozdzia 2.
Wanie to miaem na
myli: usatysfakcjonowani
uytkownicy i fajniejsza
strona rejestracji.
Ekstra! Jest
tak dobra, na
jak wyglda...
Super!
Tego nie obejrz
i oszczdz 50 zotych
na biletach.
.
Mike jest szczliwy..
...a fani mog si
do jego recenzji. dosta
Teraz strona Mikea...

...umoliwia uytkownikom prac, podczas gdy nazwy uytkownikw
s weryfikowane przez serwer.
...zapobiega popenianiu bdw, wyczajc przyciski, ktrych uycie
nie jest bezpieczne lub waciwe. Wcza je wtedy, gdy s przydatne.
...nie denerwuje uytkownikw wyskakujcymi okienkami, a mimo to
przekazuje wizualn informacj zwrotn.
W midzyczasie zacze myle nie

o projektowaniu aplikacji w zupe acza
nowy sposb... Sposb, ktry wykr
poza tradycyjny model danie
oczekiwanie odpowied.
jeste tutaj
117
Znaj swoje stany gotowoci
Magnesiki z etykietami
Wszystkie etykiety opisujce, co si dzieje na nowej, poprawionej
stronie rejestracji, spady na podog. Czy potrafisz umieci je
w odpowiednich miejscach?
);
eateRequest(
request = cr
0
Niezainicjalizowane
2
Przygotowywanie
odpowiedzi
3
Pobieranie
odpowiedzi
request
.send(n
ull);
4
1
Gotowa
odpowied
uszcza
Gdy uytkownik op
gujca
su
pole, funkcja ob
iekt
ob
y
orz
tw
nie
zdarze
dania.
Zainicjalizowane
Serwer w
ysya odp
owiedzi
na kilku
etapach p
rocesu.
problemem serwer
Podczas pracy nad
tate rwnym 2.
odpowiada z readyS
owiedzi s
odp
ki
Stan i nagw
ne.
dostp
Na tym etapie dane s

pobierane do obiektu dania,
Przed wykon
aniem tej
ale nie s gotowe do uycia.
instrukcji ob
iekt dania
wie,
jak i gdzie si
poczy.
118
Obiekt dania zosta

utworzony, ale nie zawiera
danych ani informacji w swoich
waciwociach.
Rozdzia 2.
Gdy read
yState w
ynosi 4,
funkcja zw
rotna uy
wa
odpowied
zi s
zaktualizo erwera do
wania str
ony.
Znajd sowo
Powi chwil i pozwl troch popracowa prawej pkuli. Oto standardowe
wyszukiwanie sw. Wszystkie zostay wymienione w tym rozdziale.
Lista sw
ActiveXObject
Ajax
Callback
Readystate
Send
URL
XMLHttpRequest
CreateRequest
Initpage
Null
Open
jeste tutaj
119
Znaj swoje stany gotowoci
Magnesiki z etykietami: Rozwizanie

Wszystkie etykiety opisujce, co si dzieje na nowej,
poprawionej stronie rejestracji, spady na podog.
Czy potrafisz umieci je w odpowiednich miejscach?
za
Gdy uytkownik opuszc
ca
uj
ug
obs
a
kcj
fun
e,
pol
zdarzenie tworzy obiekt
dania.
Obiekt dania zosta

utworzony, ale nie zawiera
danych ani informacji w swoich
waciwociach.
);
eateRequest(
request = cr
Podczas pracy nad problemem serw

er
odpowiada z readyState rwnym
2.
Stan i nagwki odpowiedzi s dost
pne
0
Niezainicjalizowane
2
Przygotowywanie
odpowiedzi
Przed wykon
aniem tej
instrukcji ob
iekt dania
wie,
jak i gdzie si
poczy.
request
.send(n
ull);
Pobieranie
odpowiedzi
4
1
Gotowa
odpowied
Na tym etapie dane s

pobierane do obiektu dania,
ale nie s gotowe do uycia.
Gdy read
yState w
ynosi 4,
funkcja zw
rotna uy
wa
odpowied
zi s
zaktualizo erwera do
wania str
ony.
Serwer w
ysya odp
owiedzi
na kilku
etapach p
rocesu.
120
Rozdzia 2.
Zainicjalizowane
Znajd sowo Rozwizanie
jeste tutaj
121

Head First Ajax. Edycja Polska (Rusz Głową!)

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Head First Ajax. Edycja Polska (Rusz Głową!)

Uploaded by

Copyright:

Available Formats

Head First Ajax.

Spis treci (skrcony)

Ajax zastosowanie. Aplikacje internetowe dla nowego pokolenia

Projektowanie aplikacji w metodologii Ajax. Mylenie po ajaksowemu

Zdarzenia w JavaScripcie. Reagowanie na uytkownikw

Kilka procedur obsugi zdarze. Dwoje to ju towarzystwo

Aplikacje asynchroniczne. To jak odnawianie prawa jazdy

Obiektowy model dokumentu. Lenictwo na stronie WWW

Manipulowanie DOM-em. Moje yczenie jest dla ciebie rozkazem

Frameworki i zestawy narzdzi. Nie ufaj nikomu

dania i odpowiedzi XML. Wicej ni mog wyrazi sowa

JSON. Syn JavaScriptu

Formularze i walidacja. Powiedz to, co chciae powiedzie

dania POST. Paranoja to twoja przyjacika

Pozostaoci. Pi najwaniejszych tematw (ktrych nie omwilimy)

Funkcje narzdziowe. Po prostu daj mi kod

Spis treci (z prawdziwego zdarzenia)

Wiemy, co myli twj mzg

Metapoznanie: mylenie o myleniu

Oto co TY moesz zrobi, aby skoni swj mzg do posuszestwa

Zesp korektorw merytorycznych

Aplikacje internetowe dla nowego pokolenia

Strony WWW: podejcie nowoczesne

Kiedy moemy mwi o stronie w metodologii Ajax?

Rockandrollowe pamitki Roba

Ajax i rock and roll w 5 krokach

Etap 1. Modyfikujemy kod XHTML

Etap 2. Inicjalizacja JavaScriptu

Etap 3. Tworzenie obiektu dania

Etap 4. Pobieranie informacji o przedmiocie

Napiszmy kod dajcy informacji o przedmiocie

Zanim rozpoczniesz prac z obiektem dania,

Obiekt dania jest po prostu obiektem

Hej, serwerze, wywoaj potem u mnie displayDetails(), dobrze?

Do wysania dania uyj send()

Na danie Ajaksa serwer zwykle zwraca dane

Ajax jest agnostykiem serwerowym

Uyj funkcji zwrotnej do pracy z danymi zwrconymi przez serwer

Pobierz odpowied serwera z waciwoci responseText obiektu dania

egnajcie, tradycyjne aplikacje internetowe!

Strony ajaksowe rozmawiaj

Kod JavaScript moe

Projektowanie aplikacji w metodologii Ajax

Uyjmy Ajaksa do ASYNCHRONICZNEGO przesyania da rejestracji

Aktualizacja strony rejestracji

PROGRAMOWA konfiguracja procedury obsugi zdarzenia window.onload

Kod JavaScript znajdujcy si poza funkcjami

Niektre czci projektw ajaksowych bd takie same... zawsze

Funkcja createRequest() jest zawsze taka sama

Twrz obiekt dania... w wielu przegldarkach

Projekt aplikacji ajaksowej obejmuje zarwno stron WWW,

Co jeszcze musimy zrobi...

Po wpisaniu nazwy uytkownika

Obiekt dania czy twj kod z przegldark

Porozumiewasz si z przegldark, a nie z serwerem

Przegldarka wywouje kod zwrotnie

Poka Mikeowi ajaksow stron rejestracji

Teraz formularz moe przesya dania do serwera na dwa sposoby

Utwrzmy klasy CSS dla kadego stanu przetwarzania dania...

...i zmiemy klas CSS za pomoc JavaScriptu

Zmiany? Nie potrzebujemy ich!

Zezwalaj na rejestracj tylko wtedy, gdy wprowadzono odpowiednie dane

Aplikacje ajaksowe to co wicej ni suma ich czci