Ajax. Od Podstaw

Ajax.
Od podstaw
Autor: Chris Ullman, Lucinda Dykes
Tumaczenie: Anna Trojan
ISBN: 978-83-246-1287-1
Tytu oryginau: Beginning Ajax
(Programmer to Programmer)
Format: B5, stron: okoo 540
oprawa twarda
Wprowadzenie do technologii Ajax dla webmasterw
Jak tworzy interaktywne aplikacje webowe w technologii Ajax?
Jak pisa i wykorzystywa wzorce projektowe w Ajax?
Dlaczego warto skorzysta z moliwoci Ajaksa?
Cho technologia znana jest od koca ubiegego wieku, uznanie zdobya dopiero par
lat temu, kiedy Google zaczo uywa jej na wiksz skal w swoich projektach.
Wtedy webmasterzy odkryli, jaka sia tkwi w poczonych technologiach, kryjcych si
pod nazw Ajax. Docz do nich i wzboga swoje strony WWW, co sprawi, e stan si
interaktywne bardziej ni kiedykolwiek.
Ajax. Od podstaw to ksika dla twrcw witryn internetowych, ktrzy chc
poszerzy swoje umiejtnoci o niesamowit technologi Ajax. Chris Ullmann i Lucinda
Dykes, autorzy i wspautorzy wielu ksiek o technikach programowania, przekazuj
tu swoje wieloletnie dowiadczenie. Uatwiaj czytelnikowi opanowanie jzyka,
przechodzc od podstawowych do coraz bardziej zoonych przypadkw opartych
na rzeczywistych przykadach. Narracyjny styl ksiki sprawia, e jest przyjazna
czytelnikowi, a usystematyzowany ukad czyni j przejrzyst.
Wydawnictwo Helion
ul. Kociuszki 1c
44-100 Gliwice
tel. 032 230 98 63
e-mail: helion@helion.pl
Model i skadnia aplikacji opartej na technologii Ajax

Komunikacja z serwerami
Synchroniczne i asynchroniczne przesyanie danych
Usugi sieciowe
API oraz aplikacje mushup
Praca z XML, XSLT oraz XPath
Integracja z formatem wymiany danych JSON
Praca z serwerem MySQL
Usuwanie oraz obsuga bdw
Wzorce projektowe
Wykorzystanie danych zewntrznych
Platformy oraz biblioteki dostpne dla technologii Ajax
Przewodnik po jzyku JavaScript
Poznaj nowe sposoby programowania webowego

i wzboga swoje witryny WWW o technologi Ajax!
Spis treci
O autorach ................................................................................................................................................13
Wprowadzenie .........................................................................................................................................15
Rozdzia 1. Wprowadzenie do Ajaksa ..................................................................................................... 23
Czym jest Ajax? ............................................................................................................ 24
Ajax w praktyce ....................................................................................................... 25
flickr ................................................................................................................. 25
Basecamp ......................................................................................................... 27
Amazon (A9.com) ............................................................................................... 28
Google Suggest oraz Google Maps ...................................................................... 29
Inne strony internetowe ...................................................................................... 30
Ze przykady ..................................................................................................... 31
Ajax akronim ...................................................................................................... 32
XHTML oraz CSS ................................................................................................ 33
DOM (Document Object Model) ........................................................................... 34
JavaScript ......................................................................................................... 35
XML, XSLT oraz XPath ........................................................................................ 36
Obiekt XMLHttpRequest ..................................................................................... 37
Technologie po stronie serwera .......................................................................... 39
Model aplikacji opartej na Ajaksie .................................................................................. 39
Dlaczego powinno si uywa Ajaksa? ...................................................................... 41
Czciowe uaktualnianie strony .......................................................................... 41
Niewidoczne pobieranie danych .......................................................................... 42
Cige uaktualnianie .......................................................................................... 42
Jednolite interfejsy ............................................................................................. 42
Prostota i bogactwo moliwoci ........................................................................... 42
Przeciganie i upuszczanie ................................................................................. 42
Kiedy nie naley uywa Ajaksa ................................................................................ 43
Spowolnienie strony ........................................................................................... 43
Zakcenie dziaania przycisku Wstecz w przegldarce .......................................... 43
Zakcanie dziaania zakadek oraz blokowanie indeksw wyszukiwarek ................. 44
Obcienie dla przegldarki ................................................................................ 44
Kto moe bd nie moe uywa Ajaksa? .................................................................. 44
Stwrz swj wasny przykad .......................................................................................... 45
Podsumowanie ............................................................................................................ 55
wiczenia .................................................................................................................... 55
Ajax. Od podstaw
Rozdzia 2. Powtrka z JavaScriptu ..................................................................................................... 57
Jdro JavaScriptu ......................................................................................................... 58
Skadnia ................................................................................................................. 58
Zmienne ................................................................................................................. 58
Podstawowe typy danych .................................................................................... 59
Referencyjne typy danych ................................................................................... 60
Operatory ............................................................................................................... 60
Operator przypisania .......................................................................................... 61
Operatory arytmetyczne ...................................................................................... 61
Operatory porwnania ........................................................................................ 61
Operatory logiczne ............................................................................................. 62
Operatory inkrementacji oraz dekrementacji ......................................................... 63
Instrukcje ............................................................................................................... 63
Instrukcje warunkowe ......................................................................................... 64
Ptle ................................................................................................................. 65
Funkcje .................................................................................................................. 66
JavaScript zorientowany obiektowo ................................................................................ 67
Obiekty wbudowane ................................................................................................ 68
Obiekty przegldarki ................................................................................................ 68
Obiekty zdefiniowane przez uytkownika .................................................................... 69
Konstruktory ...................................................................................................... 70
Prototypy ................................................................................................................ 71
Niszczenie obiektw ........................................................................................... 72
DOM (Document Object Model) ..................................................................................... 74
Dokument jako drzewo potomkw ............................................................................ 75
Dokument jako drzewo wzw ................................................................................. 75
Metody dostpu do obiektw w DOM ........................................................................ 76
Metoda getElementById ..................................................................................... 76
Metoda getElementsByTagName ......................................................................... 77
Tworzenie wzw .................................................................................................... 78
Alternatywne rozwizanie innerHTML .................................................................... 80
JavaScript oraz zdarzenia .............................................................................................. 81
Modele zdarze ...................................................................................................... 82
Rejestracja zdarze ................................................................................................. 82
Model rejestracji zdarze w przegldarce Internet Explorer .................................... 83
Model rejestracji zdarze w DOM z W3C .............................................................. 84
Obiekty zdarze ...................................................................................................... 84
Podsumowanie ............................................................................................................ 88
wiczenia .................................................................................................................... 89
Rozdzia 3. Ajax oraz technologie po stronie serwera ..........................................................................91

Ajax oraz technologie po stronie serwera ........................................................................ 92
Formularze oraz kontrolki HTML ............................................................................... 92
Model przesyania formularzy ................................................................................... 92
Model przesyania formularzy w Ajaksie oraz JavaScripcie ........................................... 94
Od strony serwera ........................................................................................................ 94
Przesyanie danych do serwera ................................................................................. 95
Serwer otrzymuje danie ........................................................................................ 95
Pisanie odpowiedzi HTTP .............................................................................................. 96
Obiekt XMLHttpRequest .......................................................................................... 97
Funkcja zwrotna ................................................................................................. 98
Waciwo responseText ................................................................................... 98
Spis treci
Waciwo responseXML .................................................................................. 99

Usuwanie bdw z responseXML ..................................................................... 100
Wykorzystywanie danych ................................................................................... 101
Technologie po stronie serwera ................................................................................... 102
ASP.NET ............................................................................................................... 102
Przykad wykorzystujcy Ajaksa oraz ASP.NET ..................................................... 104
PHP ..................................................................................................................... 114
Przykad wykorzystujcy Ajaksa oraz PHP ........................................................... 115
Serwlety Javy ........................................................................................................ 120
Przykad wykorzystujcy Ajaksa oraz serwlety Javy .............................................. 121
Ktr technologi powinno si wykorzystywa? ............................................................. 125
Podsumowanie .......................................................................................................... 126
wiczenia .................................................................................................................. 126
Rozdzia 4. Techniki Ajaksa ...................................................................................................................127

Obiekt XMLHttpRequest .............................................................................................. 128
Tworzenie obiektu XMLHttpRequest ............................................................................. 129
Uycie synchroniczne ............................................................................................. 129
Uycie asynchroniczne ........................................................................................... 130
Waciwo readyState .......................................................................................... 130
Waciwoci oraz metody obiektu XMLHttpRequest .................................................. 131
Czsto popeniane bdy ........................................................................................ 137
Bardziej skomplikowane problemy .......................................................................... 138
Problem z tym samym pochodzeniem ................................................................ 138
Kontrola pamici podrcznej agresywna polityka przegldarki Internet Explorer .... 139
Implikacje dziaania we wszystkich przegldarkach ............................................. 143
Metoda POST ............................................................................................................. 144
Zalety i wady uywania metod POST oraz GET ............................................................... 147
Inne techniki Ajaksa ................................................................................................... 147
Ukryte ramki ......................................................................................................... 147
Pomys ............................................................................................................ 148
Zalety oraz wady .............................................................................................. 154
Ukryte ramki typu iframe ........................................................................................ 154
Pomys ............................................................................................................ 155
Zalety oraz wady .............................................................................................. 158
Dynamiczne adowanie skryptu ............................................................................... 158
Pomys ............................................................................................................ 158
Zalety oraz wady .............................................................................................. 161
Obrazki oraz cookies ............................................................................................. 161
Pomys ............................................................................................................ 162
Zalety oraz wady .............................................................................................. 166
Podsumowanie .......................................................................................................... 166
wiczenie .................................................................................................................. 167
Rozdzia 5. Praca z XML ........................................................................................................................169

Podstawy XML ............................................................................................................ 170
Tworzenie znacznikw ............................................................................................ 170
Skadnia XML ....................................................................................................... 170
Dokumenty XML poprawne skadniowo oraz strukturalnie ......................................... 172
Ekstrakcja danych za pomoc JavaScriptu .................................................................... 177
Wykorzystywanie wzw ........................................................................................ 177
Dostp do elementw XML po ich nazwie ................................................................ 179
Dostp do wartoci atrybutw ................................................................................ 179
Ajax. Od podstaw
Wykorzystywanie CSS z danymi XML ............................................................................ 183
Wykorzystywanie CSS z dokumentami XML .............................................................. 185
Wykorzystywanie CSS z Ajaksem ............................................................................ 185
Waciwo style ............................................................................................. 185
Waciwo className .................................................................................... 186
Podsumowanie .......................................................................................................... 186
wiczenia .................................................................................................................. 187
Rozdzia 6. Usuwanie oraz obsuga bdw ..........................................................................................189

Obsuga bdw w JavaScripcie ................................................................................... 190
Obsuga wyjtkw ................................................................................................. 190
Program obsugi zdarze onerror ............................................................................ 192
Konsola bdw w przegldarkach Mozilla ............................................................... 194
Microsoft Script Debugger ..................................................................................... 196
Firebug ................................................................................................................. 199
Inspektory DOM ......................................................................................................... 202
Inspektor DOM z przegldarki Firefox ...................................................................... 202
Inspektor DOM w przegldarce Internet Explorer ...................................................... 204
MODI (Mouseover DOM Inspector) ......................................................................... 204
Rozwizywanie problemw zwizanych z Ajaksem .......................................................... 205
Wykorzystywanie dodatku Firebug z XMLHttpRequest ............................................... 206
Dodatek Live HTTP Headers ................................................................................... 206
Podsumowanie .......................................................................................................... 208
wiczenia .................................................................................................................. 209
Rozdzia 7. Usugi sieciowe, API oraz aplikacje typu mashup ..............................................................211

Czym jest usuga sieciowa? ......................................................................................... 212
Publiczne usugi sieciowe ...................................................................................... 213
Wykorzystywanie usug sieciowych nalecych do innych podmiotw ............................... 214
Struktura usugi sieciowej ........................................................................................... 216
Podejcie oparte na REST ...................................................................................... 217
Podejcie oparte na SOAP ..................................................................................... 218
Integrowanie usugi sieciowej z wasn aplikacj opart na Ajaksie ................................ 219
Wykorzystywanie usugi z obiektem XMLHttpRequest ............................................... 220
Polityka tego samego pochodzenia .................................................................... 220
Tworzenie proxy dla aplikacji .................................................................................. 221
Sztuczka ze znacznikiem script .............................................................................. 228
Przysze alternatywy .............................................................................................. 231
Wykorzystywanie API ................................................................................................... 232
Rnica midzy usugami sieciowymi a API .............................................................. 233
Google Maps API .................................................................................................. 234
Klucz Google Maps API ..................................................................................... 234
Obiekt mapy .................................................................................................... 234
Obiekt Geocode ............................................................................................... 235
Metoda fabrykujca XMLHttpRequest ................................................................ 236
Aplikacje typu mashup ................................................................................................ 244
W jaki sposb Ajax uatwia wykorzystywanie aplikacji typu mashup ................................. 245
Wykorzystywanie Flickr API ..................................................................................... 246
Etykietki (lista waona) .......................................................................................... 246
Wykorzystywanie klucza Flickr API ........................................................................... 247
Spis treci
Tworzenie przykadowej aplikacji ............................................................................. 247

Dodawanie informacji o miejscu zrobienia zdjcia w serwisie Flickr ...................... 248
Wywietlanie zdj z Flickr ..................................................................................... 257
Podsumowanie .......................................................................................................... 261
wiczenia .................................................................................................................. 262
Rozdzia 8. XSLT oraz XPath .................................................................................................................263

XSLT oraz jego cel ...................................................................................................... 264
Elementy XSLT ........................................................................................................... 266
Element xsl:stylesheet .......................................................................................... 266
Element xsl:output ................................................................................................ 267
Element xsl:include ............................................................................................... 268
Elementy xsl:template, xsl:apply-templates oraz xsl:call-template ............................. 268
Atrybut match .................................................................................................. 268
Atrybut name ................................................................................................... 269
Parametry XSLT ............................................................................................... 270
Element xsl:if ....................................................................................................... 270
Elementy xsl:choose, xsl:when oraz xsl:otherwise .................................................... 270
Znoszenie znaczenia specjalnego znakw w XSLT ............................................... 271
Element xsl:for-each .............................................................................................. 272
Element xsl:value-of .............................................................................................. 272
Element xsl:sort .................................................................................................... 273
Element xsl:variable .............................................................................................. 273
Obsuga XSLT w najwaniejszych przegldarkach ........................................................... 274
Wykonywanie transformacji ......................................................................................... 274
Wykonywanie transformacji w przegldarce Internet Explorer .................................... 274
Wykonywanie transformacji w przegldarce Firefox ................................................... 279
Wykonywanie transformacji po stronie serwera ........................................................ 281
Tworzenie arkusza stylw XSLT dla koszyka z zakupami ................................................. 284
XPath oraz jego cel ..................................................................................................... 294
Podstawowe moliwoci XPath .................................................................................... 294
Wyraenia XPath ................................................................................................... 295
Kontekst biecy ............................................................................................. 295
Wze gwny dokumentu ................................................................................. 296
Element gwny dokumentu .............................................................................. 296
Rekurencyjne schodzenie w d drzewa .............................................................. 296
Okrelone elementy ......................................................................................... 297
Funkcje XPath ....................................................................................................... 297
Funkcja number ............................................................................................... 297
Funkcja position .............................................................................................. 298
Funkcja count .................................................................................................. 298
Formatowanie acuchw znakw ...................................................................... 298
Funkcje arytmetyczne ....................................................................................... 299
Funkcje logiczne .............................................................................................. 299
Wykonywanie zapyta w dokumentach XML za pomoc XPath ........................................ 300
Ulepszenie przykadu z koszykiem z zakupami, tak by uywa on XSLT oraz Ajaksa ........... 305
Podsumowanie .......................................................................................................... 313
wiczenia .................................................................................................................. 314
10
Ajax. Od podstaw
Rozdzia 9. Wzorce .................................................................................................................................315
Podstawy wzorcw projektowych .................................................................................. 316
Sprawdzanie poprawnoci formularzy ........................................................................... 317
Problem ............................................................................................................... 317
Wzorzec ............................................................................................................... 317
Dodatkowe informacje we wzorcach zwizanych z najedaniem mysz na element ......... 325
Problem ............................................................................................................... 325
Wzorzec ............................................................................................................... 326
Wzorzec odpytywania serwera ..................................................................................... 333
Problem ............................................................................................................... 333
Wzorzec ............................................................................................................... 333
Wzorzec sucy do tworzenia list opartych na przeciganiu oraz upuszczaniu ................. 343
Problem ............................................................................................................... 343
Wzorzec ............................................................................................................... 343
Wzorzec obsugi bdw .............................................................................................. 357
Problem ............................................................................................................... 358
Wzorzec ............................................................................................................... 358
Podsumowanie .......................................................................................................... 364
wiczenia .................................................................................................................. 365
Rozdzia 10. Praca z danymi zewntrznymi ........................................................................................367

Praca z kanaami informacyjnymi XML .......................................................................... 368
RSS 0.9x ............................................................................................................. 370
RSS 2.0 ............................................................................................................... 371
RSS 1.0 ............................................................................................................... 373
Atom .................................................................................................................... 374
Ekstrakcja danych z kanau informacyjnego XML ........................................................... 376
Ekstrakcja danych w postaci XML ........................................................................... 376
Ekstrakcja danych w postaci acucha znakw ........................................................ 383
Budowanie czytnika kanaw online opartego na Ajaksie ................................................ 385
Podsumowanie .......................................................................................................... 396
wiczenia .................................................................................................................. 396
Rozdzia 11. JSON ...................................................................................................................................397

Skadnia JSON ........................................................................................................... 398
Typy danych JSON ................................................................................................. 398
Literay obiektw ................................................................................................... 399
Literay tablic ........................................................................................................ 400
Wykorzystywanie analizatora skadniowego JSON ..................................................... 400
Formaty transmisji danych .......................................................................................... 401
Ajax oraz JSON ........................................................................................................... 403
Tworzenie dania ................................................................................................. 403
Analiza skadniowa odpowiedzi ............................................................................... 405
Wykorzystywanie metody eval() ......................................................................... 405
Wykorzystywanie parseJSON() ........................................................................... 406
Dodawanie danych JSON do strony internetowej ...................................................... 406
Wykorzystywanie JSON z PHP ...................................................................................... 410
Podsumowanie .......................................................................................................... 412
wiczenia .................................................................................................................. 412
Spis treci
11
Rozdzia 12. Zaawansowany przykad lista sortowana .................................................................413

Wykorzystywanie MySQL ............................................................................................. 414
Tworzenie tabeli MySQL ......................................................................................... 414
Dodawanie danych do tabeli .................................................................................. 416
Tworzenie poczenia z baz danych ....................................................................... 417
Tworzenie zapyta do bazy danych ............................................................................... 418
Uzyskanie aktualnych wartoci pl .......................................................................... 419
Porzdkowanie listy w kolejnoci ............................................................................ 419
Edycja rekordw bazy danych ...................................................................................... 421
Wstawianie rekordu ............................................................................................... 421
Usuwanie rekordu ................................................................................................. 423
Wykorzystywanie biblioteki Scriptaculous w przeciganiu oraz upuszczaniu ..................... 424
Tworzenie elementu typu Droppable ....................................................................... 424
Tworzenie elementu typu Sortable .......................................................................... 426
Interakcja z uytkownikiem strona gwna ................................................................ 427
Wykorzystywanie Ajaksa do uaktualniania listy .............................................................. 431
Tworzenie da POST .......................................................................................... 432
Tworzenie da GET ............................................................................................ 434
Przetwarzanie wynikw .......................................................................................... 435
Dodawanie stylu ................................................................................................... 437
Pliki .......................................................................................................................... 437
Podsumowanie .......................................................................................................... 438
Dodatek A Rozwizania wicze ..........................................................................................................439

Dodatek B Istniejce zasoby Ajaksa platformy oraz biblioteki ......................................................461
Dodatek C Istniejce zasoby JavaScriptu ............................................................................................471
Dodatek D Przewodnik po jzyku JavaScript .....................................................................................475
Skorowidz .............................................................................................................................................523
Ajax oraz technologie

po stronie serwera
Po lekturze wczeniejszych rozdziaw mona odnie wraenie, e Ajax to tylko to, co
dzieje si po stronie klienta. W pocztkowej definicji Ajaksa okrelenie, e wsppracuje
on z danymi wejciowymi ze strony serwera byo istotnym ograniczeniem. Tak naprawd
wielu programistw Ajaksa uwaao, e aplikacja uywajca XMLHttpRequest do uaktualnienia strony bez danych wejciowych z serwera nie jest prawdziw aplikacj ajaksow.
W omwionych dotychczas kwestiach unikano problemu drugiej strony komunikacji klient-serwer
strony serwera. W rzeczywistoci caa ta sytuacja przypomina rozmow telefoniczn,
w ktrej mwi si, jednak nie jest si w stanie sysze, co odpowiada rozmwca. W dwch
pierwszych rozdziaach niniejszej ksiki w ogle nie uywano adnego kodu po stronie
serwera. Musi si to zatem zmieni.
Jednym z pocztkowych zaoe tej ksiki byo pozostanie niezalenym i niejednoznacznym w kwestii wyboru technologii po stronie serwera. Tak naprawd w niniejszym rozdziale zaoono, e Czytelnik dokona ju wyboru, dlatego pisanie o tym, jakie technologie
preferuj autorzy, mogoby tylko prowadzi do antagonizmw. Jedn z istotniejszych zalet
Ajaksa jest to, e w aplikacjach opartych na tej technologii mona z atwoci uy dowolnej technologii po stronie serwera. Zostanie to zademonstrowane w niniejszym rozdziale.
Sposb, w jaki Ajax (czyli obiekt XMLHttpRequest) komunikuje si z serwerem, jest w kadej technologii w zasadzie taki sam. Rnice polegaj jednak na sposobie obsugi danych,
ktre dotr do serwera. Oczywiste jest, e niemoliwe byoby omwienie wszystkich technologii po stronie serwera w jednym rozdziale, dlatego autorzy ksiki wybrali trzy z nich,
uwaane za najbardziej popularne w kontekcie Ajaksa: ASP.NET, PHP oraz Jav. Jeli
Czytelnik pracuje w innej technologii, moe si przyjrze zaprezentowanym tutaj wzorcom
i pomyle, w jaki sposb mona je zastosowa w innych warunkach.
W omwieniu tym nie zamieszczono zbyt wielu szczegw na temat tego, w jaki sposb
dziaaj te technologie; nie omwiono take detali skadni czy jej zastosowania. W rozdziale tym przechodzi si od razu do sedna sprawy i pokazuje przykad tego, w jaki sposb
92
Ajax. Od podstaw
aplikacje oparte na Ajaksie wsppracuj z kad z trzech przedstawionych technologii,
a take jak dana technologia po stronie serwera moe przekazywa z powrotem do klienta
informacje oraz dane, ktre mog by uyte w aplikacji.
W niniejszym rozdziale omwiono nastpujce zagadnienia:
Q
Ajax oraz technologie po stronie serwera,
ASP.NET,
PHP,
serwlety Javy.
Ajax oraz technologie po stronie serwera

W niniejszej ksice zarysowano ju najwaniejsz rnic pomidzy sposobem dziaania
tradycyjnych technologii po stronie serwera (model dodaj dane-wylij-czekaj) a sposobem
dziaania aplikacji opartych na Ajaksie (asynchroniczne wywoywanie serwera), ktra polega
na zmianie tradycyjnych wzorcw uycia stron internetowych w aplikacjach ajaksowych.
Ajax nie jest ograniczony tylko do jednego wzorca uycia, a w rozdziale 9. zaprezentowane
zostan rne wzorce, w ktrych Ajax moe zmieni przepyw danych od klienta do serwera.
Jedynym podobiestwem pomidzy tymi wzorcami jest to, e nie jest si ju przywizanym
do jawnego wysyania formularza, a nastpnie zmuszonym do czekania na jego odpowied.
Warto zatem skupi si chwil na wykorzystywaniu formularzy oraz kontrolek HTML na stronie.
Formularze oraz kontrolki HTML

Ajax nie zmienia zasadniczego sposobu dziaania kontrolek HTML oraz sposobu pobierania z nich danych. Nadal ma si do dyspozycji zbir kontrolek HTML (takich, jak listy
rozwijane, przyciski opcji, pola wyboru czy pola tekstowe), ktre w dalszym cigu s przesyane do serwera. Serwer pobiera je w ten sam sposb.
Istniej jednak dwie zasadnicze zmiany. Pierwsz z nich jest sposb wywoywania strony
po stronie serwera, a drug fakt, i formularz HTML moe by cakowicie usunity ze strony
bd przerobiony tak, e nie dziaa w oczekiwany sposb. Zostanie to wyjanione po bliszym przyjrzeniu si temu, jak dziaa istniejcy model przesyania formularza do serwera.
Model przesyania formularzy

W przypadku dowolnej technologii po stronie serwera normalny sposb przesyania formularza polega na dodaniu do niego przycisku, po klikniciu ktrego formularz przesyany
jest do serwera.
Rozdzia 3.
93
Normalnie ASP czy PHP korzystaj z atrybutu action formularza, by przekierowa uytkownika ze strony pocztkowej na stron odpowiedzi. Przetwarzanie wykonywane jest na
serwerze, zanim uytkownik zostanie przekierowany do nowej strony, natomiast nowa
strona uywana jest do wywietlenia danych (rysunek 3.1).
Rysunek 3.1. Klasyczny model przesyania formularzy w PHP oraz ASP
W ASP.NET model ten nieco zmieniono, usuwajc atrybut action i dodajc atrybut RUNAT=
"SERVER". Zamiast przechodzi do innej strony, strona ta przele dane z powrotem do samej
siebie. Ponownie jednak strona dziaa w momencie interwencji uytkownika (rysunek 3.2).
Rysunek 3.2. Model przesyania formularzy w ASP.NET
W modelu ASP.NET nawigacja pomidzy stronami wykonywana jest czciej za pomoc

metod Response.Redirect bd Server.Transfer. Jedn z najwikszych przeszkd stojcych przed pocztkujcymi programistami przechodzcymi z ASP na ASP.NET byo zrozumienie tej rnicy konceptualnej. Pozostao to popularnym zastosowaniem a do czasw
Ajaksa, ktry przywrci pomys wymuszenia na skrypcie przesyania strony.
94
Ajax. Od podstaw
Model przesyania formularzy w Ajaksie oraz JavaScripcie

W modelu przesyania formularzy w JavaScripcie, ktry wykorzystywany jest w Ajaksie,
znowu wprowadzono zmian. Formularz moe (cho nie musi) zosta cakowicie usunity
z tego modelu.
Model ten wykorzystuje JavaScript do przechwycenia wywoania zdarzenia, a kiedy takie
zdarzenie nastpuje (na przykad gdy uytkownik kliknie przycisk bd dokona wyboru
w kontrolce HTML), wywoanie przekazywane jest do skryptu. To skrypt ma nastpnie zainicjowa wywoanie serwera (rysunek 3.3).
Rysunek 3.3. Model przesyania formularzy w JavaScripcie oraz Ajaksie
Skrypt nie musi oczywicie przesya danych natychmiast. Moe poczeka na spenienie
innych warunkw oraz kryteriw przed przesaniem danych. W tym modelu poniewa
skrypt moe odpowiedzie na zdarzenie natychmiast i nie musi czeka na jawne przesanie
zwracanie danych z serwera nie musi rwnie by natychmiast widoczne dla uytkownika.
Skrypt nie jest ograniczony czekaniem na odpowied.
Od strony serwera
JavaScript wykorzystywany jest do rozpoczcia interakcji pomidzy klientem a serwerem.
Zostawmy na razie ten podzia i skupmy si na tym, co dzieje si z danymi, kiedy docieraj
one do serwera. Poniewa kady etap tego procesu odbywa si osobno, mona podzieli go
na czci i kad z nich omwi niezalenie od pozostaych. Czci te mona sobie wyobrazi
jako czarne skrzynki. Wymagaj one dostarczenia okrelonych danych wejciowych i dostarczaj pewne dane wyjciowe, cho to, co dzieje si w rodku, moe by bardzo rne.
Rozwamy na przykad bankomat. Wkada si do niego kart, wpisuje numer identyfikacyjny (PIN) i oczekuje si, e pienidze (oraz by moe potwierdzenie) zostan wydane przez
maszyn. W caym kraju istniej tysice bankomatw nalecych do wielu rnych bankw.
Rozdzia 3.
95
Niektre pobieraj opaty, inne pozwalaj sprawdzi szczegy zwizane z kontem, a inne
umoliwiaj tylko dostp do gotwki. Bankomaty dziaaj rnie, jednak maj ten sam interfejs, za pomoc ktrego mona si z nimi komunikowa.
Cz transakcji pomidzy klientem a serwerem odbywajca si po stronie serwera
przebiega do podobnie jak w przypadku tej hipotetycznej czarnej skrzynki czy bankomatu. Otrzymuje ona dane z dania HTTP i w kocu, po przetworzeniu owych danych,
musi zwrci je jako odpowied serwera.
Przesyanie danych do serwera

Cho istnieje kilka metod przesyania danych do serwera, skupimy si tylko na obiekcie
XMLHttpRequest. By przesa dane do serwera za pomoc tego obiektu, naley wykona
trzy kroki:
1.
Ustawi zdarzenie, ktre zostanie wywoane po otrzymaniu danych.
2. Wywoa metod open wraz z daniem.

3. Przesa danie.
Metoda open jest jedyn, jak trzeba bdzie omwi.

XMLHttpRequestObject.open(metoda, URL do wywoania, asynchroniczna bd
synchroniczna);
Metoda ta przesya danie w jeden z dwch moliwych sposobw. Pierwszy odbywa si za

porednictwem metody HTTP GET, gdzie wiadomo przesyana jest tak, jak w poniszym kodzie:
XMLHttpRequestObject.open("GET", "response.aspx?value=1", "true");
Drugi sposb to wykorzystanie metody HTTP POST. W poniszym fragmencie kodu dane
ze zmiennej s kodowane w URI, opakowane w ciao dania i przesyane:
var argument = "value=";
argument += encodeURIComponent(dane);
XMLHttpRequestObject.open("POST", "response.aspx", "true");
xHRObject.send(ciao_dania)
Kod ten pozwala na przesanie wartoci kontrolek HTML oraz danych z formularzy do
serwera w dokadnie taki sam sposb i w tym samym formacie, w jakim przesyano by
stron za pomoc PHP czy ASP.NET.
Serwer otrzymuje danie

Co dzieje si, kiedy serwer otrzymuje dane? Kod w JavaScripcie okreli ju metod GET
lub POST, ktra przesya dane albo jako cz adresu URL, albo jako cz ciaa dania
Request. W klasycznym ASP bd w ASP.NET mona wykorzysta zbiory QueryString,
Form lub Params do pobrania tych elementw. W PHP uywa si do tego zbiorw $_GET,
$_POST bd $_REQUEST.
96
Ajax. Od podstaw
Nie ma zauwaalnej rnicy w otrzymywaniu danych za pomoc formularza HTML bd
z dania pochodzcego ze skryptu w JavaScripcie. Mona na przykad doczy do strony
pole tekstowe o nazwie MyTextbox1 dziki nastpujcemu kodowi na stronie HTML:
<input type="text" id="MyTextbox1" name="MyTextbox1" />
Kiedy wyle si dane z pola za pomoc metody GET i z uyciem jzyka C#, dane pojawi
si w zbiorze QueryString w ASP.NET:
string TextBox = Request.QueryString["MyTextbox1"].ToString();
Dane mog te pojawi si w zbiorze Form, kiedy wysyane s za pomoc metody POST.
string TextBox = Request.Form["MyTextbox1"].ToString();
Aby pobra element o tej nazwie albo ze zbioru QueryString, albo z Form, mona wykorzysta nastpujcy kod:
string TextBox = Request.Params["MyTextbox1"].ToString();
W PHP odpowiednikiem tego bdzie zbir $_REQUEST. Mona na przykad uy nastpujcego kodu:
$TextBox = $_REQUEST["MyTextbox1"];
W PHP mona rwnie pobra wartoci tych zbiorw osobno za pomoc zbiorw $_GET
oraz $_POST, ktre s analogiczne do zbiorw QueryString oraz Form z ASP.NET.
$TextBox = $_GET["MyTextbox1"];
$TextBox = $_POST["MyTextbox1"];
Po pobraniu danych serwer moe je przetworzy i zwrci do klienta.
Pisanie odpowiedzi HTTP

W normalnej sekwencji wydarze wystpujcej przy uyciu technologii po stronie serwera
informacje, ktre chce si wywietli, nie mog by natychmiast wypisane na stronie.
Zamiast tego trzeba spakowa je w odpowied HTTP Response. Jest to o wiele atwiejsze,
ni moe si wydawa na pierwszy rzut oka.
W ASP oraz ASP.NET wypisuje si dane za pomoc metody Response.Write.
string data = "To s nasze dane.";
Response.Write(data);
W PHP uywa si polecenia echo.

$data = "To s nasze dane.";
echo $data
Rozdzia 3.
97
Mona tworzy bardziej skomplikowane struktury (takie jak dokumenty XML), pod warunkiem e bd analizowane skadniowo jako tekst. Mona to zaimplementowa w ASP.NET
w nastpujcy sposb:
XmlDocument XmlDoc = new XmlDocument();
XmlNode versionNode = XmlDoc.CreateXmlDeclaration("1.0", "UTF-8", "yes");
XmlNode mainNode = XmlDoc.CreateElement("root");
XmlDoc.AppendChild(mainNode);
XmlNode childNode = XmlDoc.CreateElement("child");
childNode.AppendChild(XmlDoc.CreateTextNode("Dane"));
mainNode.AppendChild(versionNode);
mainNode.AppendChild(childNode);
string strXml = XmlDoc.InnerXml;
Response.Write(strXml);
W PHP to samo mona zrobi w nastpujcy sposb:

$doc = new DomDocument('1.0');
$root = $doc->createElement('root');
$root = $doc->appendChild('root');
$child = $doc->createElement('child');
$child = $root->appendChild($child);
$value = $doc->createTextNode("Dane");
$value = $child->appendChild($value);
$strXml = $doc->saveXML();
echo $strXml;
W ten sposb powstanie nastpujcy dokument XML:

<?xml version="1.0"?>
<root>
<child>Dane</child>
</root>
acuch znakw doczany jest do odpowiedzi HTTP i odsyany z powrotem do klienta jako
gotowy do pobrania. Cho ta cz procesu jest prosta, kiedy odpowied wraca do klienta,
pobranie danych jest nieco bardziej skomplikowane.
Obiekt XMLHttpRequest
Jak zostanie to zaprezentowane w rozdziale 4., obiekt XMLHttpRequest nie jest jedyn metod,
ktr ma si do dyspozycji w wykonywaniu interakcji pomidzy klientem a serwerem w aplikacjach opartych na Ajaksie. Jest jednak metod najczciej uywan.
W niniejszym rozdziale nie omwiono szczegw dziaania tego obiektu, dlatego najlepiej
bdzie go sobie wyobrazi jako kolejn czarn skrzynk, ktra oczekuje na dane wejciowe
z odpowiedzi HTTP.
98
Ajax. Od podstaw
Funkcja zwrotna
Pierwszy krok otrzymywania danych znany jest pod nazw funkcji zwrotnej (ang. callback
function). Jest to po prostu funkcja JavaScriptu, ktra wykonywana jest, kiedy dane zostan
w caoci pobrane z serwera. Mona jej nada do ogln nazw, tak jak na przykad
getData(), a funkcja ta bdzie w wikszoci aplikacji opartych na Ajaksie wygldaa do
podobnie. Wewntrz funkcji zwrotnej pierwszym zadaniem do wykonania jest sprawdzenie,
czy dane s gotowe do pobrania. Wykonuje si to za pomoc sprawdzenia, czy waciwo
readyState obiektu XMLHttpRequest rwna jest 4 (warto ta oznacza ukoczenie). Na razie
typowa funkcja zwrotna bdzie wygldaa nastpujco:
function getData()
{
if (xHRObject.readystate == 4)
{
// Tu nastpuje przetwarzanie
}
}
Po upewnieniu si, e dane s gotowe, mona je pobra za pomoc jednej z dwch waciwoci obiektu XMLHttpRequest:
Q
responseText,
responseXML.
Waciwo responseText
Wykorzystywanie waciwoci responseText jest najczciej stosowanym podejciem do
pobierania danych z odpowiedzi HTTP; jest rwnie najatwiejszym rozwizaniem. Mona
utworzy now zmienn JavaScriptu, ktra przechowa zawarto odpowiedzi i zwrci j
jako acuch znakw:
var text = xHRObject.responseText;
Jeli na stronie w ASP.NET utworzy si poniszy kod, wtedy waciwo responseText dla
data bdzie zawieraa tekst To s nasze dane.:
string data = "To s nasze dane.";
W PHP naley zrobi to w nastpujcy sposb:

$data = "To s nasze dane.";
echo $data
I to wszystko. Mona rwnie pobra w ten sposb kod HTML bd XHTML. Co si jednak
stanie, gdy chce si pobra dane XML? Nadal mona uy metody responseText, zwrci
ona jednak dane XML w postaci acucha znakw. Mona zastanowi si nad poniszym
kodem w ASP.NET:
string data = "<?xml version=\"1.0\" encoding=\"UTF-8\"
standalone=\"yes\"?><root><child>Dane</child></root>";
Rozdzia 3.
99
W PHP bdzie to wygldao nastpujco:

$data = "<?xml version=\"1.0\" encoding=\"UTF-8\"
echo $data
Powysze fragmenty kodu zwrc nastpujce dane:

<?xml version="1.0" encoding="UTF-8"
standalone="yes"?><root><child>Dane</child></root>
Zwracanie dokumentw XML w postaci acuchw znakw moe jednak zniwelowa

wiele zalet korzystania z XML. Dlatego te istnieje waciwo responseXML.
Waciwo responseXML
Waciwo responseXML na pierwszy rzut oka wyglda, jakby lepiej nadawaa si do sytuacji,
w ktrych chce si przekazywa z powrotem do klienta dokumenty XML. Pozwala ona
traktowa odpowied jako obiekt dokumentu XML i wykonywa iteracje po rnych elementach, atrybutach oraz wzach tekstowych za pomoc DOM. Jak to jednak zwykle bywa
w przypadku Ajaksa, trzeba sobie zdawa spraw z istnienia kilku problemw zwizanych
z korzystaniem z tej waciwoci.
Powiedzmy, e mamy nastpujcy kod po stronie serwera, ktry wczytuje dokument XML:
A kod w JavaScripcie zmieni si na nastpujcy:

var text = xHRObject.responseXML;
Jeli oczekuje si, e z powrotem otrzyma si w peni dziaajcy dokument XML, to mona
si srogo zawie. Z powrotem otrzyma si obiekt, jednak bdzie on pusty, bez ladu po
kodzie XML, jaki si przesyao. Dzieje si tak, poniewa ContentType odpowiedzi Response
musi by ustawiony na text/xml przed wypisaniem odpowiedzi.
Response.ContentType = "text/xml";
Niestety, Internet Explorer szczeglnie le to toleruje. Jeli nie ustawi si tego dobrze na
serwerze, nie bdzie mona wykorzystywa responseXML w tej przegldarce. W przegldarce
Firefox moliwe jest uycie w JavaScripcie metody overrideMimeType przed wywoaniem
kodu, dziki czemu mona nadpisa i ustawi typ zawartoci na text/xml po stronie klienta,
jak w poniszym kodzie:
xHRObject.overrideMimeType("text/xml");
xHRObject.send(null);
var document = xHRObject.responseXML;
100
Ajax. Od podstaw
Metody tej nie ma jednak w przegldarce Internet Explorer. Problemy nie kocz si jednak na tym. Jeli popeni si bd w dokumencie XML, tak e nie jest on poprawny skadniowo, w IE otrzyma si ponownie pusty obiekt bez oczywistego komunikatu o bdzie.
Usuwanie bdw z responseXML

Przy ustalaniu przyczyny otrzymywania pustego obiektu z responseXML mona uy czterech
metod. Pierwsza polega na sprawdzeniu, czy dane s zwracane w responseText. Mona na
przykad wykorzysta do tego okno dialogowe z ostrzeeniem typu alert, jak poniej:
var text = xHRObject.responseText;
alert(text);
Mona oczekiwa, e zobaczy si co takiego, jak poniej:

<?xml version="1.0" encoding="UTF-8"
standalone="yes"?><root><child>Dane</child></root>
Jeli tak nie jest, oznacza to, e odpowied nie zostaa poprawnie przesana przez serwer
i naley sprawdzi kod po stronie serwera. Wysoce prawdopodobne jest jednak, e dane te
s poprawne.
Jeli dane nie s poprawne, kolejnym krokiem bdzie sprawdzenie kodu bdu.
Usuwanie bdw z responseXML w przegldarce Internet Explorer

By odnale wicej informacji na temat bdu w przegldarce Internet Explorer, naley
skorzysta z poniszego kodu, by mc uzyska nieco bardziej szczegowy komunikat o bdzie
oraz rad na temat tego, co naley poprawi w dokumencie XML:
var errorcode = xHRObject.responseXML.parseError.errorCode;
W normalnej sytuacji kod zwracany z przegldarki Internet Explorer powinien by rwny zero.
Jednak, co bardziej prawdopodobne, jeli ContentType na pewno jest ustawiony na text/xml,
a responseXML.xml jest pusty, wtedy kod ten bdzie inny ni zero.
Dalsze informacje na temat znaczenia kodu zwracanego z waciwoci responseXML mona
uzyska w nastpujcy sposb:
var errormessage = xHRObject.responseXML.parseError.reason;
Usuwanie bdw z responseXML w przegldarce Firefox

Cho w przegldarce Firefox nie ma odpowiednika obiektu parseError, w menu Narzdzia
mona znale opcj Konsola bdw, ktra pozwala na przejrzenie znaczcych komunikatw o bdzie obejmujcych typ obiektu powodujcy wystpienie bdu. Jeli w odpowiedzi istnieje problem z formatowaniem XML, konsola udostpni informacje takie, jak
ponisze, i nie wymaga to adnych zmian w kodzie w JavaScripcie ani te dodawania do
niego czegokolwiek:
Rozdzia 3.
101
Bd: niepasujcy znacznik. Oczekiwano: </error>.

Plik rdowy:
http://localhost:8080/Company/WebPages/framed.jsf?com.asparity.AJAX_CLIENT_ID=
_idJsp0%3AmasterTree&com.company.AJAX_REQUEST=true&oracle.adf.faces.STATE_TOKEN=3&
nodeString=%3A%3AdomainModel%3A1&clientNodeId=%3A%3AdomainModel%3A1%3Aawaiting
AjaxData
Wiersz: 1, Kolumna: 6905
Kod rdowy: [...]
Dodatkowo istnieje rwnie atwy do zainstalowania dodatek Firebug1, ktry pozwala programistom bada ruch XHR w czasie rzeczywistym zarwno dania, jak i odpowiedzi.
Wykorzystywanie danych
Po zwrceniu danych z waciwoci responseXML mona je pobra tak, jakby byy obiektem
DOM. Zamy na przykad, e mamy nastpujcy dokument:
<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<cart>
<book>
<Title>Ajax. Od podstaw.</Title>
<Quantity>1</Quantity>
</book>
</cart>
Mona zwrci element <cart> z dokumentu XML w nastpujcy sposb:

var XMLDoc = xHRObject.responseXML;
var book = XMLDoc.getElementsByTagName("book");
Mona rwnie przej do pierwszego elementu zawartego w <book> w nastpujcy sposb:

var title = book[0].firstChild;
Istnieje znaczca rnica pomidzy dwoma najwaniejszymi przegldarkami (Internet Explorer oraz Mozilla) w kwestii tego, w jaki sposb zawarto tekstowa zwracana jest z dokumentw XML.
W Internet Explorerze zawarto tekstowa zwracana jest za pomoc waciwoci text,
jak w poniszym kodzie:
var title = book[0].firstChild.text;
// Tytu bdzie rwny "Ajax. Od podstaw."
W przegldarkach Mozilla zawarto tekstow zwraca si za pomoc waciwoci textContent,

co wida w poniszym fragmencie kodu:
var title = book[1].firstChild.textContent;
// Tytu bdzie rwny "Ajax. Od podstaw."
Firebug, a take inne narzdzia i sposoby usuwania bdw z aplikacji, omwione s w rozdziale 6.
przyp. tum.
102
Ajax. Od podstaw
Nietrudno rwnie zauway, e w Internet Explorerze do pierwszego wza odnosi si
przez book[0], natomiast w przypadku przegldarki Firefox jest to book[1]. Dzieje si tak,
poniewa w Firefoksie book[0] zawiera wze tekstowy ze znakiem nowego wiersza, gdy
przegldarka ta nie opuszcza biaych znakw (ang. whitespace) traktuje je jak osobne
wzy, podczas gdy Internet Explorer tego nie robi.
I znw niezbdne jest uwzgldnienie tych rnic w kodzie, by dostp do danych zwracanych
z serwera dziaa we wszystkich przegldarkach.
Technologie po stronie serwera

Dotychczas wspomniano jedynie o procesie, w ktrym dane mog by przesyane do serwera i odsyane z niego; nie omawiano tego, co dzieje si na samym serwerze. Technologie
po stronie serwera to zagadnienie niezalene od Ajaksa, dlatego trzeba si tych kwestii
uczy osobno. Zamy zatem, e Czytelnik posiada ju praktyczn znajomo jednej z tych
technologii, poniewa bez umiejtnoci wykonywania przetwarzania na serwerze daleko si
nie zajdzie. Poniej znajduje si krtkie wprowadzenie do kadej z wybranych technologii
wraz z prost przykadow aplikacj opart na Ajaksie, ktra z nich korzysta.
Jeli Czytelnik jest zaznajomiony z ASP.NET, ale z PHP czy Jav ju nie, nie powinien
pomija podrozdziaw powiconych tym ostatnim jzykom. Znajomo innych jzykw
czy technologii poza tymi, ktre ju si dobrze zna, daje programicie nie tylko dobre podstawy,
ale take zabezpieczenie na przyszo. Czsto mona spotka kontrakty czy zlecenia, ktre
obejmuj przeniesienie aplikacji z jednego jzyka na drugi, co wymaga dobrej znajomoci obu.
Klasyczny ASP oraz PHP s do siebie do podobne i wkrtce ich podobiestwo zostanie
zaprezentowane. W poniszym omwieniu zostanie krtko wspomniana Java, by pokaza,
w jaki sposb zgrabnie czy si ona z filozofi Ajaksa. Na pocztek jednak pora na aktualny
sztandarowy produkt firmy Microsoft ASP.NET.
ASP.NET
ASP.NET to technologia firmy Microsoft suca tworzeniu dynamicznych stron internetowych. By moga dziaa na komputerze, konieczne jest spenienie dwch warunkw: zainstalowanie platformy .NET Framework oraz posiadanie kompatybilnego serwera WWW,
najczciej IIS (Internet Information Services).
.NET istnieje od 2002 roku, jednak aktualne wiksze wydanie (.NET 3.0) zostao opublikowane w listopadzie 2006 roku. Najnowsz wersj mona pobra ze strony http://update.
microsoft.com. Naley wybra opcj Instalacja niestandardowa, a nie Instalacja ekspresowa,
i szuka w Oprogramowanie opcjonalne.
Serwer IIS jest z kolei dostpny tylko jako cz systemu operacyjnego Windows. W wielu
wersjach systemu Windows domylnie nie jest on zainstalowany i tym samym nie jest dostpny
w Windows XP Home Edition. Mona go jednak doda, przechodzc do Panelu sterowania
i wybierajc Dodaj lub usu programy, a pniej Dodaj/Usu skadniki systemu Windows.
Rozdzia 3.
103
ASP.NET ma by niezaleny od jzyka programowania. Pomys polega na tym, e mona

uywa implementacji dowolnego jzyka w .NET, w ktrym tworzy si aplikacje. Zazwyczaj sprowadza si to do wyboru pomidzy dwoma jzykami programowania Visual Basic
oraz C#. W tej ksice przykady w ASP.NET tworzone bd w jzyku C#, poniewa jest
on podobny do JavaScriptu, jeli chodzi o struktur oraz opcje, takie jak znaczenie wielkoci liter. Jzyk ten jest rwnie bardziej zbliony do PHP.
By uruchomi aplikacj w ASP.NET, naley umieci j w folderze C:\inetpub\wwwroot\
nazwa_aplikacji (czy te dowolnym innym miejscu wybranym dla aplikacji), a nastpnie
uy serwera IIS do utworzenia wirtualnego katalogu. Mona to zrobi poprzez uruchomienie IIS i kliknicie prawym przyciskiem myszy katalogu, jaki chce si uruchomi, a nastpnie wybranie jego Waciwoci, co wida na rysunku 3.4.
Rysunek 3.4. Wybieranie waciwoci katalogu w IIS
Nastpnie w oknie dialogowym, ktre si pokae, naley klikn przycisk Utwrz, dziki
czemu tworzy si now aplikacj (jak wida na rysunku 3.5).
Pniej w przegldarce przechodzi si do nowej aplikacji (w tym przypadku do http://localhost/
BegAjax/r03), po czym otrzymuje si Bd HTTP 403 Dostp zabroniony, ktry oznacza,
e udao si utworzy katalog.
Po poprawnym umieszczeniu aplikacji na serwerze WWW wywouje si j z JavaScriptu
dziki odniesieniu si do strony ASP.NET, jak chce si wywoa, za pomoc metody Open
obiektu XMLHttpRequest, jak poniej:
XMLHttpRequestObject.open("POST", "response.aspx?value=1", "true");
104
Ajax. Od podstaw
Rysunek 3.5.
Przycisk Utwrz
w oknie dialogowym
Waciwoci
Przykad wykorzystujcy Ajaksa oraz ASP.NET

Utwrzmy fikcyjn stron z katalogiem dla sprzedawcy ksiek wraz z koszykiem na zakupy.
Pozwoli to uytkownikowi na umieszczanie wybranych przedmiotw w koszyku z zakupami i uaktualnianie tego koszyka bez koniecznoci odwieania strony. Zamy, e uytkownik zosta ju zidentyfikowany, by strona moga by tak prosta, jak to tylko moliwe.
Koszyk z zakupami bdzie mia trzy opcje:
Q
mona do niego dodawa przedmioty,
jeli doda si do niego kolejny przedmiot, liczba przedmiotw wzronie o jeden,
mona z niego usuwa przedmioty.
Oczywicie nie jest to co, co mona osign cakowicie po stronie klienta, cho po stronie klienta wszystko mona zainicjowa. Aplikacja odczyta tytu ksiki ze strony klienta
i przekae go do serwera. Jest to wykorzystywane przy identyfikacji ksiki, kiedy umieszcza si j w koszyku z zakupami.
Na serwerze koszyk z zakupami musi ledzi, jakie przedmioty umieci w nim uytkownik,
a take jaka jest ich liczba. By mc tego dokona, koszyk zostanie przechowany w zmiennej sesji. Oznacza to, e w duym katalogu uytkownik bdzie mg przechodzi ze strony
do strony bez tracenia informacji o tym, co zostao umieszczone w koszyku.
Do przechowania informacji w koszyku z zakupami mona wykorzysta dokument XML.
Istnieje tylko jeden element koszyka, a wewntrz niego znajduje si element ksiki dla
kadego tytuu, jaki kupuje uytkownik. Element ksiki zawiera elementy tytuu oraz liczby
Rozdzia 3.
105
egzemplarzy (cho mona oczywicie doda numer ISBN, cen oraz autorw). Cho ma si
tylko jedn stron katalogu, przykad ten jest skalowalny, wic powinno si go da uruchomi na wielu stronach z katalogami produktw.
sprbuj sam Przykad z koszykiem z zakupami w ASP.NET

1.
Naley utworzy nowy plik o nazwie Catalogue.htm.

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<script type="text/javascript" src="Cart.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<br/>
<img id="cover" src="ajaxzp.jpg" />
<br />
<br />
<b>Ksika:</b><span id="book">Ajax. Zaawansowane programowanie</span><br />
<b>Autor: </b><span id="authors">Nicholas C. Zakas, Jeremy McPeak,
Joe Fawcett</span>
<br /><b>ISBN: </b><span id="ISBN">978-83-246-0567-5</span>
<br /><b>Cena: </b><span id="price">67.00</span>
<br /><br />
<a href="#" onclick="AddRemoveItem('Add');" >Dodaj do koszyka</a>
<br /><br />
<span id="cart" ></span>
</body>
</html>
1.
Naley utworzy skrypt o nazwie Cart.js.

var xHRObject = false;
if (window.XMLHttpRequest)
{
xHRObject = new XMLHttpRequest();
}
else if (window.ActiveXObject)
{
xHRObject = new ActiveXObject("Microsoft.XMLHTTP");
}
function getData()
{
if ((xHRObject.readyState == 4) && (xHRObject.status == 200))
{
var serverResponse = xHRObject.responseXML;
var header = serverResponse.getElementsByTagName("book");
var spantag = document.getElementById("cart");
spantag.innerHTML = "";
for (i=0; i<header.length; i++)
{
if (window.ActiveXObject)
{
spantag.innerHTML += " " +header[0].firstChild.text;
106
Ajax. Od podstaw
spantag.innerHTML += " " + header[0].lastChild.text + " " + "<a
href='#' onclick='AddRemoveItem(\"Remove\");'>Usu przedmiot</a>";
}
else
{
spantag.innerHTML += " " +header[0].firstChild.textContent;
spantag.innerHTML += " " + header[0].lastChild.textContent + " " + "<a
}
}
}
}
function AddRemoveItem(action)
{
var book = document.getElementById("book").innerHTML;
if(action=="Add")
{
xHRObject.open("GET", "ManageCart.aspx?action=" + action + "&book=" +
encodeURIComponent(book) + "&value=" + Number(new Date), true);
}
else
{
}
xHRObject.onreadystatechange = getData;
}
1.
Naley utworzy stron o nazwie ManageCart.aspx.

<%@Page Language = "C#" Debug="true" %>
<%@ import Namespace="System.Xml" %>
<script language="C#" runat="server">
void Page_Load()
{
string newitem = Request.Params["book"];
string action = Request.Params["action"];
Hashtable ht = new Hashtable();
if (Session["Cart"] != null)
{
ht = (Hashtable)Session["Cart"];
if (action == "Add")
{
if (ht.ContainsKey(newitem))
{
int value = int.Parse(ht[newitem].ToString());
ht.Remove(newitem);
value++;
ht.Add(newitem, value);
Session["Cart"] = ht;
Response.Write(toXml(ht));
}
Rozdzia 3.
else
{
ht.Add(newitem, 1);
}
}
else
{
ht.Remove(newitem);
Session["Cart"] = null;
}
}
else
{
ht.Add(newitem, 1);
}
}
string toXml(Hashtable ht)
{
XmlNode versionNode = XmlDoc.CreateXmlDeclaration("1.0","UTF-8","yes");
XmlNode mainNode = XmlDoc.CreateElement("cart");
XmlDoc.AppendChild(versionNode);
foreach (string key in ht.Keys)
{
XmlNode childNode = XmlDoc.CreateElement("book");
XmlNode TitleNode = XmlDoc.CreateElement("Title");
XmlNode QuantityNode = XmlDoc.CreateElement("Quantity");
TitleNode.AppendChild(XmlDoc.CreateTextNode(key));
QuantityNode.AppendChild(XmlDoc.CreateTextNode(ht[key].ToString()));
childNode.AppendChild(TitleNode);
childNode.AppendChild(QuantityNode);
}
return strXml;
}
</script>
1.
Naley uruchomi plik Catalogue1.htm w przegldarce, a nastpnie wybra

odnonik Dodaj do koszyka, jak wida na rysunku 3.6.
5. Naley klikn ponownie odnonik Dodaj do koszyka, a liczba przedmiotw
w koszyku z zakupami wzronie o jeden, co wida na rysunku 3.7.
107
108
Ajax. Od podstaw
Rysunek 3.6. Odnonik Dodaj do koszyka
Rysunek 3.7. Liczba przedmiotw w koszyku zwiksza si o jeden
Rozdzia 3.
109
6. Teraz naley klikn odnonik Usu przedmiot przedmiot znika z koszyka
z zakupami, co wida na rysunku 3.8.
Rysunek 3.8. Przedmiot znika z koszyka z zakupami
Jak to dziaa
Cykl trzech stron dokadnie odzwierciedla model JavaScriptu omwiony wczeniej. Strona
HTML jest sztuczn stron, na ktrej wywietlany jest jeden przedmiot z katalogu. W rzeczywistoci byaby to strona po stronie serwera, ktra pobieraaby szczegy na temat
ksiki z bazy danych i wywietlaa je na ekranie. Strona z katalogu zawiera rwnie skrypt
Cart.js. Skrypt ten wywoywany jest za pomoc odnonika Dodaj do koszyka:
<a href="#" onclick="AddRemoveItem('Add');" >Dodaj do koszyka</a>
W skrypcie wykorzystuje si jedn funkcj zarwno do dodawania do koszyka, jak i do

usuwania z niego przedmiotw. Do skryptu jako argument przekazuje si tylko zmienn
bdc acuchem znakw, wskazujc na to, czy chce si przedmiot doda (Add), czy usun (Remove). Nie ma co skupia si na szczegach tej funkcji, poniewa omwienie
obiektu XMLHttpRequest nie jest celem tego wiczenia.
Funkcja dokonuje ekstrakcji ksiki ze strony za pomoc metody document.getElementById
i tworzy jedno z dwch zapyta do serwera w zalenoci od tego, czy element chce si
doda do koszyka (Add), czy z niego usun (Remove). Skada ona acuch znakw zapytania
i wywouje stron po stronie serwera.
110
Ajax. Od podstaw
function AddRemoveItem(action)
{
var book = document.getElementById("book").innerHTML;
if(action=="Add")
{
}
else
{
}
xHRObject.onreadystatechange = getData;
}
W kodzie po stronie serwera ManageCart.aspx istniej dwie metody. Pierwsza cz znajduje si w metodzie Page_Load i wykonywana jest po wywoaniu strony. Druga toXml
serializuje koszyk z zakupami do postaci XML i przygotowuje go do odesania z powrotem
do klienta. Rozpoczyna si w Page_Load od utworzenia trzech zmiennych. Pierwsze dwie
su do przechowywania tytuu ksiki pobranego ze strony znajdujcej si po stronie
klienta, natomiast trzecia jest dziaaniem, jakie wybra uytkownik (moe to by Add bd
Remove). Nastpnie tworzy si tablic mieszajc (ang. hash table), w ktrej przechowywane bd przedmioty z koszyka z zakupami. W koszyku naley przechowa tytu przedmiotu
wraz z liczb egzemplarzy, jak wybra uytkownik.
void Page_Load()
{
string newitem = Request.Params["book"];
string action = Request.Params["action"];
Nastpnie sprawdza si, czy zmienna Session przechowujca koszyk z zakupami jest pusta.
Jeli nie jest pusta, wiadomo, e uytkownik ju odwiedza stron, dlatego moe to by
jedna z poniszych sytuacji:
Q
Uytkownik dodaje przedmiot i przedmiot ten jest ju obecny w koszyku

z zakupami.
Uytkownik dodaje nowy przedmiot, ktrego nie ma jeszcze w koszyku

z zakupami, natomiast sam koszyk z zakupami ju istnieje.
Uytkownik usuwa przedmiot z koszyka z zakupami.
Uytkownik dodaje przedmiot, ale koszyk jeszcze nie istnieje, dlatego trzeba go
utworzy.
Jeli uytkownik dodaje przedmiot do koszyka z zakupami, a przedmiot ten jest ju obecny
w Hashtable ht, mona wykona nastpujcy kod:
if (Session["Cart"] != null)
{
ht = (Hashtable)Session["Cart"];
if (action == "Add")
Rozdzia 3.
{
111
if (ht.ContainsKey(newitem))
{
int value = int.Parse(ht[newitem].ToString());
ht.Remove(newitem);
value++;
ht.Add(newitem, value);
}
Bez wzgldu na wykonywane dziaanie naley si upewni, e otrzyma si najbardziej aktualn wersj koszyka z zakupami ze zmiennej Session, a nastpnie przechowa si j
w Hashtable ht. Sprawdza si, czy zmienna dziaania rwna jest Add, a take to, czy przedmiot obecny jest w tablicy mieszajcej. Nastpnie tworzy si warto zmiennej, ktra przechowuje liczb powizan z przedmiotem znajdujcym si w tablicy mieszajcej. Przedmiot usuwany jest z tej tablicy. Dodaje si jeden do wartoci, a potem dodaje si nowy
przedmiot do tablicy mieszajcej. Wczytuje si uaktualnion tablic do zmiennej Session.
Kolejny krok jest bardzo istotny. Ustawia si ContentType na text/xml. Jeli si tego nie zrobi,
waciwo responseXML nie bdzie dziaaa poprawnie. Na koniec zapisuje si tablic mieszajc do strumienia Response za pomoc funkcji toXml (co zostanie omwione wkrtce).
Jeli tablica mieszajca nie zawiera przedmiotu, naley go doda, zatem wykonuje si poniszy kod:
else
{
ht.Add(newitem, 1);
}
Przedmiot dodaje si do tablicy mieszajcej i przypisuje si mu warto 1. Ustawia si rwnie ContentType na text/xml, a nastpnie zapisuje wszystko do strumienia Response. Trzeba
to zrobi na kocu kadego moliwego scenariusza, by upewni si, e klient wywietla
poprawne informacje.
W trzecim scenariuszu zmienna Action nie bya rwna Add, dlatego zakada si, e musi
mie warto Remove. By usun przedmiot, naley wykona nastpujcy kod:
else
{
ht.Remove(newitem);
Session["Cart"] = null;
}
Przedmiot usuwany jest z tablicy mieszajcej. Ustawia si zmienn Session zawierajc

koszyk z zakupami na zero, po czym warto ContentType ustawiana jest na text/xml, a tablica
mieszajca zapisywana jest do strumienia Response.
112
Ajax. Od podstaw
Ostatni scenariusz bdzie wyglda znajomo. Jest on w zasadzie prawie taki sam jak drugi.
Dodaje si przedmiot do tablicy mieszajcej, przechowuje si tablic mieszajc w zmiennej
Session, zapisuje ContentType jako text/xml i zapisuje tablic mieszajc do strumienia
Response.
else
{
ht.Add(newitem, 1);
}
Na kocu kadego scenariusza wywouje si funkcj toXml, ktra serializuje tablic mieszajc do postaci XML. Wicej informacji na temat XML znajduje si w rozdziale 5.,
dlatego nie bdziemy teraz traci czasu na omawianie struktury dokumentu.
XmlNode versionNode = XmlDoc.CreateXmlDeclaration("1.0","UTF-8","yes");
XmlNode mainNode = XmlDoc.CreateElement("cart");
XmlDoc.AppendChild(versionNode);
Tworzy si nowy dokument, a take jego wze deklaracji. Tworzy si take wze gwny
dokumentu i nadaje mu nazw cart. Nastpnie dodaje si deklaracj oraz wze gwny do
dokumentu.
Pniej wykonuje si iteracj po kadym kluczu z tablicy mieszajcej. Przechowano tytu
ksiki (Title) jako klucz w tablicy, a take liczb egzemplarzy, jak uytkownik chce zakupi (Quantity), jako warto. Dla kadego elementu z tablicy mieszajcej tworzy si
element ksiki z Title oraz Quantity. Poniewa Title oraz Quantity s podelementami
ksiki, naley uwaa, w jakiej kolejnoci si je dodaje i do jakich elementw.
foreach (string key in ht.Keys)
{
XmlNode childNode = XmlDoc.CreateElement("book");
XmlNode TitleNode = XmlDoc.CreateElement("Title");
XmlNode QuantityNode = XmlDoc.CreateElement("Quantity");
Najpierw jednak naley doda wartoci tekstowe z tablicy mieszajcej do elementw. Dodaje
si klucz tablicy do elementu Title, a warto tego klucza do elementu Quantity:
TitleNode.AppendChild(XmlDoc.CreateTextNode(key));
QuantityNode.AppendChild(XmlDoc.CreateTextNode(ht[key].ToString()));
Nastpnie dodaje si dwa podelementy do elementu potomnego <book>. Na koniec dodaje si

ksik do elementu <cart>, co koczy dokument.
childNode.AppendChild(TitleNode);
childNode.AppendChild(QuantityNode);
}
Rozdzia 3.
113
Jedyne, co trzeba jeszcze zrobi, to otrzymanie tekstowej wersji tego dokumentu za pomoc
metody innerXml i zwrcenie jej do metody wywoujcej:
return strXml;
Oczywicie nie wszystko jest jeszcze gotowe. Udao si przesa dane do serwera, natomiast
na serwerze spakowano je i wysano odpowied z powrotem w postaci dokumentu XML.
Trzeba zatem odczyta dokument XML i wywietli go na stronie. Jest to zadanie dla JavaScriptu
oraz funkcji getData(), ktra jest wywoywana po wywoaniu zdarzenia readystatechange.
Wewntrz funkcji zwrotnej pobiera si dane z waciwoci responseXML obiektu XMLHttpRequest. Izoluje si podzbir XML za pomoc metody DOM getElementsByTagName, by
pozyska tablic elementw bdcych ksikami.
var serverResponse = xHRObject.responseXML;
var header = serverResponse.getElementsByTagName("book");
W tym samym czasie trzeba rwnie pobra informacje o elemencie HTML, ktry bdzie
wywietla koszyk z zakupami. Na stronie Catalogue1.htm utworzono pusty element <span>.
Tutaj pobiera si go za pomoc metody DOM getElementById i upewnia si, e jego waciwo innerHTML ustawiona jest na zero.
var spantag = document.getElementById("cart");
spantag.innerHTML = "";
Kiedy pobrano ju wszystkie elementy ksiki i przechowano je w tablicy, czas je rozpakowa. Tworzy si ptl i ustawia jej maksimum na liczb elementw w tablicy. Nastpnie
sprawdza si, czy uytkownik korzysta z przegldarki Internet Explorer, czy Mozilla. Jeli
uywa Internet Explorera, naley skorzysta z waciwoci text do wywietlenia kadego
elementu ksiki. Jeli przegldarka wykorzystywana przez uytkownika to Mozilla, wtedy
naley uy waciwo textContent. Pierwszym elementem potomnym (firstChild) elementu ksiki jest Title. Ostatnim elementem potomnym (lastChild) jest Quantity.
for (i=0; i<header.length; i++)
{
{
spantag.innerHTML += " " + header[0].lastChild.text + " " + "<a href='#'
onclick='AddRemoveItem(\"Remove\");'>Usu przedmiot</a>";
}
else
{
spantag.innerHTML += " " +header[0].firstChild.textContent;
spantag.innerHTML += " " + header[0].lastChild.textContent + " " +
"<a href='#' onclick='AddRemoveItem(\"Remove\");'>Usu przedmiot</a>";
}
}
Po wywietleniu tytuu oraz liczby wybranych ksiek tworzy si rwnie dynamiczny odnonik pozwalajcy uytkownikowi usun przedmiot z koszyka. Odnosi si on z powrotem do JavaScriptu z wywoaniem AddRemoveItem, przekazujc do tej funkcji Remove jako
argument. W ten sposb cykl zostaje zakoczony.
114
Ajax. Od podstaw
Strona ASP.NET zawiera do sporo kodu, jednak, jak wida, w samym kodzie nie ma nic
szczeglnie skomplikowanego. Tak samo bdzie w przypadku wersji w PHP.
PHP
PHP jest akronimem, o ktrym mwi si, e ma kilka znacze. Najczciej akceptowanym
jest po prostu Hypertext PreProcessor, cho dla innych bdzie to Personal Home Pages
czy PHP Hypertext PreProcessor (potencjalny akronim rekursywny). PHP jest chyba najprostsz alternatyw dla ASP.NET. W przeciwiestwie do ASP.NET (ktry wykorzystuje
istniejce jzyki programowania) PHP sam w sobie jest jzykiem programowania. Moe
dziaa na najwaniejszych serwerach WWW (IIS oraz Apache) i nie jest powizany z platform Windows. W jzyku tym udao si zachowa wiele z prostoty, ktra na pocztku
przycigna tylu programistw do klasycznego ASP, to znaczy jzyk ten nie wymaga silnego
typowania zmiennych ani te pakowania wszystkiego w osobne procedury bd metody.
PHP jest produktem Open Source, ktry zosta skomercjalizowany przez firm Zend Technologies. Mona go pobra ze strony www.php.net. Aktualn wersj w momencie pisania
niniejszej ksiki jest 5.1.6. Podczas gdy ASP.NET teoretycznie wymaga przynajmniej zakupu systemu operacyjnego Windows, PHP jest zupenie darmowy, poniewa moe dziaa
na systemie operacyjnym z gatunku Open Source (takim jak Linux). Dziaa rwnie na popularnym serwerze WWW Apache (www.apache.org), ktry moe si pochwali tak samo
szerok obsug rnych platform oraz elastycznoci jak sam PHP.
PHP przypomina dwa gwne jzyki. Zosta utworzony w jzyku PERL przez Rasmusa
Lerdorfa, a take w jzyku C. Jest jednak w duej mierze pozbawiony stopnia skomplikowania zwizanego z tymi jzykami. Ma zbir obiektw, ktry naladuje obiekty klasycznego
ASP oraz ASP.NET, wcznie z obiektami Request oraz Session, dlatego nie powinien wyglda zbyt obco dla programistw pracujcych w tych dwch jzykach.
Cho poprzednie wcielenia jzyka PHP cieszyy si opini nieatwych w instalacji, najnowsza
wersja PHP 5 jest bardzo atwa w uyciu na serwerze IIS. Jeli utworzy si katalog na
twardym dysku i dokona ekstrakcji pliku instalacyjnego ZIP dla Windows pobranego ze
strony www.php.net/downloads.php#v5, wystarczy tylko zarejestrowa filtr ISAPI za pomoc IIS. eby tego dokona, naley przej do IIS, klikn prawym przyciskiem myszy
pozycj w Domylna witryna sieci Web i wybra Waciwoci. Naley wybra zakadk
Filtry ISAPI, pokazan na rysunku 3.9. Trzeba klikn Dodaj, utworzy filtr o nazwie PHP
i skierowa plik wykonywalny na php5isapi.dll.
Po poprawnej instalacji aplikacji na serwerze WWW mona wywoywa j z JavaScriptu,
przekazujc referencj do strony PHP, jak chce si wywoa, w ten sam sposb jak w przypadku ASP.NET za pomoc metody open obiektu XMLHttpRequest, jak poniej:
XMLHttpRequestObject.open("POST", "response.php?value=1", "true");
Tak naprawd PHP moe bez adnego problemu dziaa obok ASP i ASP.NET.
Rozdzia 3.
115
Rysunek 3.9.
Zakadka Filtry ISAPI
Przykad wykorzystujcy Ajaksa oraz PHP

Czas przekonwertowa wczeniejszy przykad tak, by zamiast ASP.NET uywa on teraz
PHP. Jeli chodzi o kod po stronie klienta, dokonanie zmian jest bardzo proste. Zmienia si
tylko wywoania strony ASP.NET na stron PHP.
Jeli Czytelnik nie chce tworzy najpierw przykadu w ASP.NET, powinien
postpowa zgodnie z dwoma pierwszymi punktami z czci Sprbuj sam
z ASP.NET, a pniej przej do pierwszego punktu z poniszej czci Sprbuj sam.
Nastpnie w PHP stosuje si ten sam wzorzec co w przypadku kodu w ASP.NET. Kod ma
dwie czci odpowiedzialn za dziaania zwizane z koszykiem z zakupami (dodawanie
i usuwanie przedmiotw) oraz za serializacj zawartoci koszyka z zakupami do postaci
dokumentu XML.
sprbuj sam Przykad koszyka z zakupami w PHP

1.
Naley otworzy stron Catalogue1.htm i zmieni nastpujcy wiersz, po czym

zapisa j jako Catalogue1PHP.htm:
...
<head>
<script type="text/javascript" src="CartPHP.js"></script>
</head>
...
116
Ajax. Od podstaw
2. Naley zmieni podkrelone wiersze w pliku Cart.js w funkcji AddRemoveItem,
by miay one widoczn poniej form, a nastpnie zapisa ten plik jako CartPHP.js:
if(action=="Add")
{
xHRObject.open("GET", "ManageCart.php?action=" + action + "&book=" +
book + "&value=" + num, true);
}
else
{
xHRObject.open("GET", "ManageCart.php?action=" + action + "&book=" +
}
3. Teraz naley utworzy now stron o nazwie ManageCart.php i doda do niej
nastpujcy kod:
<?php session_register('Cart'); header('Content-Type: text/xml'); ?>
<?php
$newitem = $_GET["book"];
$action = $_GET["action"];
if ($_SESSION["Cart"] != "")
{
$MDA = $_SESSION["Cart"];
if ($action == "Add")
{
if ($MDA[$newitem] != "")
{
$value = $MDA[$newitem] + 1;
$MDA[$newitem] = $value;
$_SESSION["Cart"] = $MDA;
ECHO (toXml($MDA));
}
else
{
$MDA[$newitem] = "";
ECHO (toXml($MDA));
}
}
else
{
$MDA= "";
$_SESSION["Cart"] = "";
ECHO (toXml($MDA));
}
}
else
{
$MDA[$newitem] = "1";
ECHO (toXml($MDA));
}
function toXml($MDA)
{
Rozdzia 3.
117
$cart = $doc->createElement('cart');
$cart = $doc->appendChild($cart);
foreach ($MDA as $Item => $ItemName)
{
$book = $doc->createElement('book');
$book = $cart->appendChild($book);
$title
$title
$value
$value
=
=
=
=
$quantity
$quantity
$value2 =
$value2 =
$doc->createElement('title');
$book->appendChild($title);
$doc->createTextNode($Item);
$title->appendChild($value);
= $doc->createElement('quantity');
= $book->appendChild($quantity);
$doc->createTextNode($ItemName);
$quantity->appendChild($value2);
}
return $strXml;
}
?>
4. Naley uruchomi przykad, zaczynajc od strony Catalogue1PHP.htm.
Powinien on dziaa dokadnie tak samo, jak poprzednio.
Jak to dziaa
W kodzie po stronie klienta nie zmieniono prawie nic poza zmian referencji na kod PHP.
W czym zatem kod w PHP jest inny? PHP nie ma na przykad wbudowanej obsugi tablic
mieszajcych jako struktur danych. Zamiast tego naley skorzysta z wielowymiarowej
tabeli, w ktrej przechowa si zmienn Session. Poza tym jednak kod ten prawie dokadnie
odpowiada kodowi w ASP.NET.
Ponownie trzeba zaj si czterema scenariuszami:
Q
Uytkownik dodaje przedmiot i przedmiot ten jest ju obecny w koszyku

z zakupami.
Uytkownik dodaje nowy przedmiot, ktrego nie ma jeszcze w koszyku

z zakupami, natomiast sam koszyk z zakupami ju istnieje.
Uytkownik usuwa przedmiot z koszyka z zakupami.
Uytkownik dodaje przedmiot, ale koszyk jeszcze nie istnieje, dlatego trzeba go
utworzy.
Poniewa w PHP nie jest wymagane silne typowanie zmiennych, kod ten moe by nieco
krtszy i prostszy od kodu w ASP.NET. Poniewa nie jest wymagane okrelone zdarzenie
on_load, kod PHP, jaki ma by wykonywany za kadym wywoaniem strony, mona umieci w jej czci head.
118
Ajax. Od podstaw
Rozpoczyna si od zarejestrowania zmiennej Session o nazwie Cart, ktra przechowuje koszyk z zakupami. Ustawia si te Content-Type odpowiedzi na text/xml, by mona byo
skorzysta z waciwoci responseXML.
<?php session_register('Cart'); header('Content-Type: text/xml'); ?>
Nastpnie tworzy si dwie zmienne, ktre bd przechowyway tytu ksiki oraz dziaanie,
jakie uytkownik chce wykona. S one pobierane ze zbioru $_GET, ktry zosta dodany jako
acuch znakw zapytania do dania wykonanego przez JavaScript:
$newitem = $_GET["book"];
$action = $_GET["action"];
Pniej sprawdza si zmienn $_Session["Cart"], by przekona si, czy jest ona pusta. Jeli
nie jest pusta, tworzy si zmienn o nazwie $MDA, w ktrej przechowana zostanie zmienna
Session. Poniewa nie uywa si silnego typowania, nie trzeba si martwi o rzutowanie
zmiennych PHP z jednego typu na drugi. Zazwyczaj odbywa si to automatycznie.
if ($_SESSION["Cart"] != "")
{
$MDA = $_SESSION["Cart"];
Dalej sprawdza si, czy zmienna $action zawiera sowo Add, ktre zostao na pocztku
przekazane z JavaScriptu. Jeli tak jest, mamy do czynienia z jednym z dwch scenariuszy.
Pierwszy z nich to sytuacja, w ktrej ma si ju przedmiot w koszyku z zakupami i chce si
doda kolejny, przechowa now warto w tablicy, przechowa tablic w zmiennej Session,
a nastpnie dokona serializacji tablicy, jak poniej:
if ($action == "Add")
{
if ($MDA[$newitem] != "")
{
$value = $MDA[$newitem] + 1;
$MDA[$newitem] = $value;
ECHO (toXml($MDA));
}
Ta tablica dziaa bardzo podobnie do tablicy mieszajcej z ASP.NET. Do kadego elementu

mona si odnie za pomoc tytuu przechowywanej ksiki. Wartoci indeksu tablicy
jest po prostu tytu ksiki. Jeli w koszyku nie ma przedmiotw, warto ustawia si na
pust, przechowuje tablic w zmiennej sesyjnej i serializuje j do postaci XML.
else
{
$MDA[$newitem] = "";
ECHO (toXml($MDA));
}
}
W trzecim scenariuszu usuwa si przedmiot poprzez ustawienie tablicy oraz zmiennej Session
na puste acuchy znakw, a nastpnie dokonuje si serializacji do postaci XML:
Rozdzia 3.
119
else
{
$MDA= "";
$_SESSION["Cart"] = "";
ECHO (toXml($MDA));
}
}
W ostatnim, czwartym scenariuszu (gdy koszyk z zakupami nie istnieje) wykorzystano ten
sam kod co w pierwszym:
else
{
$MDA[$newitem] = "1";
ECHO (toXml($MDA));
}
Warto ustawia si na 1. Tworzy si zmienn Session o nazwie Cart i przypisuje si do

niej tablic. Nastpnie dokonuje si serializacji tablicy do postaci XML.
Cho PHP nie posiada wbudowanego zbioru metod sucych specjalnie do tworzenia dokumentw XML, posiada metod DomDocument. W tym przykadzie mona utworzy dokument XML jako dokument DOM, a nastpnie utworzy elementy XML i dodawa je do
dokumentu wraz z wzami tekstowymi tak samo, jak w ASP.NET. Do dyspozycji jest
element gwny <cart>, wewntrz ktrego tworzy si element book dla kadego tytuu znajdujcego si w koszyku z zakupami. Element book zawiera elementy <title> oraz <quantity>,
do ktrych przypisuje si wzy tekstowe przechowujce dane.
function toXml($MDA)
{
$cart = $doc->createElement('cart');
$cart = $doc->appendChild($cart);
foreach ($MDA as $Item => $ItemName)
{
$book = $doc->createElement('book');
$book = $cart->appendChild($book);
$title
$title
$value
$value
=
=
=
=
$quantity
$quantity
$value2 =
$value2 =
$doc->createElement('title');
$book->appendChild($title);
$doc->createTextNode($Item);
$title->appendChild($value);
= $doc->createElement('quantity');
= $book->appendChild($quantity);
$doc->createTextNode($ItemName);
$quantity->appendChild($value2);
}
return $strXml;
}
120
Ajax. Od podstaw
Funkcj saveXML wykorzystuje si do skompilowania dokumentu jako jednej caoci. Przechowuje si go jako acuch znakw i zwraca do funkcji echo. Funkcja ta zapisuje dane do
strumienia Response i przekazuje informacje z powrotem z serwera do skryptu po stronie
klienta, w ktrym dokument XML zostaje wykorzystany do zoenia strony HTML.
Serwlety Javy
Ostatnia omwiona technologia po stronie serwera wykorzystuje Jav. Cho rodowisko
uruchomieniowe Javy moe by obecne na kliencie, tym razem przedstawione zostanie
wykorzystywanie Javy na serwerze z uyciem serwletw. Serwlety (ang. servlet) to aplikacje po stronie serwera napisane w jzyku programowania Java. S wykorzystywane do tworzenia interaktywnych stron internetowych i udostpniaj te same moliwoci, jakich mona oczekiwa od PHP czy ASP.NET (na przykad przetwarzanie formularzy, zarzdzanie
sesj oraz cookies, obsuga logowania).
Tak jak w przypadku PHP, cho Java jest technologi wasnociow2, jest dystrybuowana
za darmo przez firm Sun i dostpna pod adresem http://java.sun.com.
Jak na ironi, Ajax jest obecnie wykorzystywany do wypeniania luki, jak Java miaa wypeni dekad temu. Na pocztku Java wykorzystywaa wirtualn maszyn Javy (JVM, Java
Virtual Machine), by uruchamia po stronie klienta aplikacje, ktre byyby bardziej interaktywne i miayby wiksze moliwoci.
Akurat to zastosowanie Javy ograniczyo kilka problemw. Pierwszym z nich byo to,
e znacznik <applet>, ktry by dodatkiem zaakceptowanym przez Netscape (co zostao
ustandaryzowane w HTML 3.2), wykorzystywanym do uruchamiania apletw Javy, szybko
w wersji 4.0 HTML uznany zosta za przestarzay i odradzany; traktowany by rwnie jako swego rodzaju aberracja. Tak naprawd cay standard HTML 3.2 by postrzegany
jako nieco samowolny.
Zaakceptowanym zamiennikiem zosta znacznik <object>, ktry od duszego czasu obecny by w przegldarce Internet Explorer, dlatego w efekcie brakowao standardowego sposobu dodawania aplikacji w Javie. Na dodatek wirtualna maszyna Javy, ktra wymagana
bya do uruchomienia Javy, bya stale uaktualniana, natomiast wersje doczone do przegldarek zostaway te same, o ile si ich osobno nie uaktualnio. W rzeczywistoci oznaczao to, e, by uruchomi nowsze aplety Javy, czsto trzeba byo najpierw pobra zupenie
now wersj wirtualnej maszyny Javy.
Ostatnim powodem niepowodzenia byo to, e Java przeniosa prawie cay ciar przetwarzania z powrotem na klienta. Aplety Javy czsto pobieray si bardzo powoli, a jeszcze wolniej
zaczynay dziaa w zalenoci od mocy maszyny uytkownika. Cho Java nadal jest
bardzo popularnym jzykiem oraz rodowiskiem programowania, Ajax zdecydowanie przej
jej rol po stronie klienta.
2
W listopadzie 2006 firma Sun ogosia, e kod rdowy Javy zostanie opublikowany jako wolne oprogramowanie
na licencji GNU GPL. Stao si tak w okresie pomidzy listopadem 2006 a majem 2007; jedynie fragmenty
pochodzce od innych podmiotw, ktre nie zgodziy si na opublikowanie ich na licencji GNU GPL, pozostay
kodem wasnociowym. Sun planuje je jednak zastpi implementacjami alternatywnymi przyp. tum.
Rozdzia 3.
121
To, e Ajax zaj miejsce Javy po stronie klienta, nie oznacza, i nie mona z powodzeniem
poczy Ajaksa z Jav dziaajc na serwerze.
Przykad wykorzystujcy Ajaksa oraz serwlety Javy

Wzorzec powinien ju by znany. Czas przystosowa przykad omawiany w niniejszym
rozdziale tak, by w aplikacji opartej na Ajaksie korzysta on z serwletw Javy.
By tworzy i uruchamia serwlety, potrzebne bd nastpujce elementy:
Q
J2EE SDK, wersja 2 (http://java.sun.com/products/servlet/download.html)

to aktualna wersja jzyka programowania Java,
Tomcat@Jakarta (http://tomcat.apache.org/) serwer, na ktrym mona

uruchamia serwlety.
Serwlety wymagaj serwera z obsug Javy wraz z silnikiem obsugujcym serwlety. Naley
zainstalowa J2EE SDK zgodnie z zaczonymi instrukcjami i uruchomi serwer aplikacji
Javy. Serwer ten najczciej dziaa pod adresami http://localhost:8080, http://localhost:8081
bd http://localhost:4848. Nastpnie naley zainstalowa serwer Tomcat i uruchomi
usug, na ktrej jest on oparty, zgodnie ze wskazwkami dostarczonymi przy instalacji.
Kiedy aplikacja zostanie poprawnie zainstalowana na serwerze WWW, mona j wywoa
z JavaScriptu w podobny (cho nieco odmienny) sposb jak poprzednio. Serwlety musz
by skompilowane, zanim bdzie si mona do nich odnosi, dlatego naley skompilowa
klasy Javy w pliki .class. Nastpnie naley si odnie do pliku .class za pomoc metody
open obiektu XMLHttpRequest, jak poniej:
XMLHttpRequestObject.open("POST", "response?value=1", "true");
I znw przykad ten wymaga minimalnej interwencji w przypadku kodu po stronie klienta.
Zmieniony zostanie jedynie kod po stronie serwera, a poniewa w przykadzie tym wykorzystano serwer Tomcat, konieczna bdzie rwnie zmiana lokalizacji plikw aplikacji.
Tomcat wymaga take wykonania kilku czynnoci konfiguracyjnych, by serwlet dziaa.
sprbuj sam Przykad koszyka z zakupami w Javie

1.
Naley umieci wszystkie pliki w folderze C:\Program Files\Apache Software

Foundation\Tomcat 5.5\webapps\ROOT (lub w innym folderze, w ktrym
zainstalowano serwer Tomcat). Naley otworzy plik Catalogue1.htm,
zmieni poniszy wiersz i zapisa plik jako Catalogue1Java.htm:
...
<head>
<script type="text/javascript" src="CartJava.js"></script>
</head>
...
2. Naley zmieni ponisze podkrelone wiersze w pliku Cart.js w funkcji AddRemoveItem,
by miay one widoczn poniej form, a nastpnie zapisa ten plik jako CartJava.js:
122
Ajax. Od podstaw
if(action=="Add")
{
xHRObject.open("GET", "ManageCartServlet?action=" + action + "&book=" +
}
else
{
xHRObject.open("GET", "ManageCartServlet?action=" + action + "&book=" +
}
Naley rwnie zmieni ponisze wiersze:

{
spantag.innerHTML += " " + header[0].lastChild.text + " " + "<a
}
else
{
spantag.innerHTML += " " +header[0].childNodes[1].textContent;
spantag.innerHTML += " " + header[0].childNodes[3].textContent +
" " + "<a href='#' onclick='AddRemoveItem(\"Remove\");'>Usu
przedmiot</a>";
}
3. Nastpnie naley utworzy plik tekstowy o nazwie ManageCartServlet.java i
doda do niego nastpujcy kod:

import
import
import
import
import
import
import
import
javax.servlet.http.HttpServlet;
javax.servlet.http.HttpServletResponse;
javax.servlet.http.HttpSession;
javax.servlet.http.HttpServletRequest;
javax.servlet.ServletException;
java.io.IOException;
java.util.Hashtable;
java.util.Iterator;
public class ManageCartServlet extends HttpServlet

{
public void doGet(HttpServletRequest req, HttpServletResponse res)
throws IOException, ServletException
{
String newitem = req.getParameter("book");
String action = req.getParameter("action");
HttpSession session = req.getSession(true);
if (session.getAttribute("cart") != null)
{
ht = (Hashtable) session.getAttribute("cart");
if ("Add".equals(action))
{
if (ht.containsKey(newitem))
{
int value = 1;
if (ht.containsKey(newitem))
Rozdzia 3.
{
Integer currentQuantity = (Integer) ht.get(newitem);

value += currentQuantity.intValue();
}
ht.put(newitem, new Integer(value));
session.setAttribute("cart", ht);
String cartXml = toXml(ht);
res.setContentType("text/xml");
res.getWriter().write(cartXml);
} else
{
ht.put(newitem, 1);
}
} else
{
ht.remove(newitem);
session.setAttribute("cart", null);
;
}
} else
{
ht.put(newitem, 1);
}
public String toXml(Hashtable ht)

{
StringBuffer xmlDoc = new StringBuffer();
xmlDoc.append("<?xml version=\"1.0\" encoding=\"UTF-8\" standalone=
\"yes\"?>\n");
xmlDoc.append("<cart>\n");
for (Iterator<String> x = ht.keySet().iterator(); x.hasNext();)
{
String item = x.next();
int Quantity = ((Integer) ht.get(item)).intValue();
xmlDoc.append("<book>\n");
xmlDoc.append("<title>");
xmlDoc.append(item);
xmlDoc.append("</title>\n");
xmlDoc.append("<quantity>");
xmlDoc.append(Quantity);
xmlDoc.append("</quantity>\n");
xmlDoc.append("</book>\n");
}
xmlDoc.append("</cart>\n");
return xmlDoc.toString();
}
123
124
Ajax. Od podstaw
4. Naley skompilowa aplikacj do pliku .class. JDK z firmy Sun zawiera
kompilator wiersza polece javac. Przy kompilacji niezbdne bdzie rwnie
doczenie API serwletu w nastpujcy sposb (warto zwrci uwag na to,

e adres URL moe si rni w zalenoci od instalacji serwera Tomcat).
Dla wygody plik ManageCartServlet.java umieszczony zosta w tym samym
folderze co kompilator javac.exe z poniszego polecenia:
javac -classpath ".;C:\Program Files\Apache Software Foundation\Tomcat 5.5\
common\lib\servlet-api.jar" ManageCartServlet.java
5. W domylnej konfiguracja serwera Tomcat skompilowane serwlety umieszczane
s w folderze webapps\ROOT\WEB-INF\classes katalogu instalacyjnego Tomcata.

Naley umieci plik ManageCartServlet.class w tym katalogu. Jeli uruchamia
si serwer po raz pierwszy, naley najpierw utworzy odpowiedni folder.
6. Naley utworzy nastpujcy plik web.xml i zapisa go w folderze WEB-INF
znajdujcym si w folderze ROOT:

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://java.sun.com/xml/ns/j2ee" xmlns:xsi="http://www.w3.org/
2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee
http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd" version="2.4">
<display-name>Aplikacja ManageCartServlet</display-name>
<description>Testowanie Ajaksa</description>
<servlet>
<servlet-name>ManageCartServlet</servlet-name>
<servlet-class>ManageCartServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>ManageCartServlet</servlet-name>
<url-pattern>/ManageCartServlet</url-pattern>
</servlet-mapping>
</web-app>
7. Teraz naley uruchomi przykad raz jeszcze, otwierajc stron
http://localhost:8080/Catalogue1Java.htm, jednak tym razem z uyciem Javy.

Przykad bdzie dziaa dokadnie tak samo, jak w przypadku ASP.NET oraz PHP.
Jak to dziaa
Przykad ten w peni odzwierciedla dwa poprzednie, cho wymaga dodatkowej konfiguracji,
by zacz dziaa. Ponownie wykorzystuje si dwie metody, ktre wykonuj podane zadania.
Metoda doGet przypomina metod OnLoad z ASP.NET, poniewa jest ona wywoywana za
kadym razem, gdy uruchamiana jest strona. Jeli Czytelnik nie jest zaznajomiony z ASP.NET,
wystarczy wiedza, e jest to metoda wywoywana za kadym razem, gdy strona rozpoczyna
dziaanie. Zazwyczaj w pliku PHP jest to kod, ktry nie zosta ujty wewntrz funkcji.
Czas powrci do czterech scenariuszy. Nie ma sensu ich powtarza kolejny raz ani te dokadnie
analizowa podobnego kodu. Zamiast tego warto zwrci uwag na najistotniejsze rnice.
Rozdzia 3.
125
Ponownie mona skorzysta z tablicy mieszajcej do przechowania informacji o koszyku

z zakupami, a tablica ta mieci si w zmiennej Session. Z punktu widzenia semantyki obsuga sesji w Javie jest nieco bardziej rozwleka ni w ASP.NET oraz PHP, jednak w duej
mierze dziaa w ten sam sposb. Ustawia si wartoci i przechowuje je w tablicy mieszajcej.
Wykorzystuje si klucz tablicy mieszajcej do przechowania tytuu ksiki. Ustawia si zawarto zmiennej Session, Content-Type odpowiedzi, a take zapisuje zserializowan
(za pomoc metody toXML) tablic mieszajc w niemale identyczny sposb jak w przykadach opartych na ASP.NET oraz PHP.
Metoda toXML jest nieco bardziej prymitywna od jej odpowiednikw w ASP.NET oraz PHP
i by przykad ten pozosta prosty, utworzono obiekt StringBuffer, po czym dynamicznie
utworzono acuch znakw z dokumentem XML:
public String toXml(Hashtable ht)
{
StringBuffer xmlDoc = new StringBuffer();
xmlDoc.append("<?xml version=\"1.0\" encoding=\"UTF-8\"
standalone=\"yes\"?>\n");
xmlDoc.append("<cart>\n");
for (Iterator<String> x = ht.keySet().iterator(); x.hasNext();)

{
String item = x.next();
int Quantity = ((Integer) ht.get(item)).intValue();
xmlDoc.append("<book>\n");
xmlDoc.append("<title>");
xmlDoc.append(item);
xmlDoc.append("</title>\n");
xmlDoc.append("<quantity>");
xmlDoc.append(Quantity);
xmlDoc.append("</quantity>\n");
xmlDoc.append("</book>\n");
}
xmlDoc.append("</cart>\n");
return xmlDoc.toString();
Dane te s zwracane do metody doGet() wraz ze zserializowanym dokumentem XML, a stamtd

z powrotem do klienta. Poniewa ustawiono Content-Type odpowiedzi na text/xml, dokument XML zostanie poprawnie przetworzony przez obiekt XMLHttpRequest pomimo tego,
i na serwerze zosta on utworzony jako acuch znakw.
Ktr technologi powinno si wykorzystywa?

Autorzy ksiki maj nadziej, e Czytelnik zapozna si z najpopularniejszymi technologiami po stronie serwera. ASP.NET oraz PHP dziaaj na serwerze IIS. PHP mona rwnie uruchomi na serwerze Apache, natomiast serwlety Javy wymagaj wasnego serwera
aplikacji. aden z przykadw nie rni si znaczco od pozostaych, a najbardziej skomplikowanymi ich czciami s chyba instalacja technologii po stronie serwera i wykorzystanie jej do osignicia zamierzonego celu.
126
Ajax. Od podstaw
Celem niniejszego omwienia nie jest ocena zalet oraz wad wymienionych technologii.
Zazwyczaj to konieczno napdza programistw, wic na og albo klient nakazuje uycie
okrelonej technologii, albo te autor aplikacji zna jedn z nich na tyle dobrze, e to na niej
oprze swoj aplikacj.
Oczywicie czasami jedna z technologii lepiej od pozostaych nadaje si dla konkretnej implementacji. ASP.NET posiada o wiele bardziej rozbudowan i skomplikowan obsug stanw od PHP, a take zawiera alternatywny sposb zarzdzania stanem, ktry nie wie si
z wykorzystywaniem cookies. PHP oraz Java dziaaj na wikszej liczbie platform ni ASP.NET,
jednak ASP.NET staje si coraz bardziej wszechobecny. Jeli chodzi o odpowied na pytanie, czy jedna z tych technologii dziaa lepiej z Ajaksem, czy te lepiej do Ajaksa pasuje,
odpowied moe by tylko jedna nie. Tak naprawd lepiej spojrze na to z drugiej strony
Ajax wypenia luk, ktr naleao wypeni w kadej z tych technologii.
Wybr naley zatem do programisty i nie powinien on odrzuca Ajaksa tylko dlatego, e
jest przywizany do okrelonej platformy programistycznej czy technologii. Ajax dziaa rwnie
dobrze na kadej z nich.
Podsumowanie
Niniejszy rozdzia by krtkim spojrzeniem na rol serwera w aplikacjach opartych na
Ajaksie. Jeli Czytelnik zainteresowa si Ajaksem i oczekiwa, e w technologii tej nie ma si
do czynienia z serwerem, moe si czu nieco zawiedziony. W przypadku wikszoci aplikacji nie da si tego prawdopodobnie obej. Rozpoczto od zbadania roli serwera w tradycyjnym cyklu danie-odpowied w programowaniu webowym, a nastpnie porwnano
j z wykonywaniem zapyta do serwera w Ajaksie oraz JavaScripcie. Nastpnie rozszerzono
omwienie kadego z krokw tego cyklu.
Pniej krtko omwiono kad z trzech wybranych technologii po stronie serwera. Utworzono
przykad z koszykiem z zakupami oraz dopasowano do niego stron po stronie serwera napisan w ASP.NET, PHP oraz Javie, by zobaczy, jak niewiele rnic wystpuje pomidzy
tymi technologiami. Niewiele miejsca powicono operacjom po stronie klienta, jednak wspomniano nieco o tym, w jaki sposb obiekt XMLHttpRequest wykorzystywany jest do inicjowania da i otrzymywania danych.
W rozdziale 4. kwestie te omwione zostan o wiele bardziej szczegowo wraz z metodami
wykorzystywanymi w Ajaksie do tworzenia dania oraz obsugiwania jego wynikw.
wiczenia
Sugerowane rozwizania poniszych zada znajduj si w dodatku A.
1.
Naley doda numer ISBN do dokumentu XML. Dlaczego moe to by uyteczne?
2. Naley ulepszy koszyk z zakupami, tak by numer ISBN by teraz w nim widoczny.

Ajax. Od Podstaw

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Ajax. Od Podstaw

Transféré par

Droits d'auteur :

Formats disponibles

Ajax.

Model i skadnia aplikacji opartej na technologii Ajax

Poznaj nowe sposoby programowania webowego

Rozdzia 3. Ajax oraz technologie po stronie serwera ..........................................................................91

Waciwo responseXML .................................................................................. 99

Rozdzia 4. Techniki Ajaksa ...................................................................................................................127

Rozdzia 5. Praca z XML ........................................................................................................................169

Rozdzia 6. Usuwanie oraz obsuga bdw ..........................................................................................189

Rozdzia 7. Usugi sieciowe, API oraz aplikacje typu mashup ..............................................................211

Tworzenie przykadowej aplikacji ............................................................................. 247

Rozdzia 8. XSLT oraz XPath .................................................................................................................263

Rozdzia 10. Praca z danymi zewntrznymi ........................................................................................367

Rozdzia 11. JSON ...................................................................................................................................397

Rozdzia 12. Zaawansowany przykad lista sortowana .................................................................413

Dodatek A Rozwizania wicze ..........................................................................................................439

Ajax oraz technologie

Ajax oraz technologie po stronie serwera,

Ajax oraz technologie po stronie serwera

Formularze oraz kontrolki HTML

Model przesyania formularzy

Ajax oraz technologie po stronie serwera

Rysunek 3.1. Klasyczny model przesyania formularzy w PHP oraz ASP

Rysunek 3.2. Model przesyania formularzy w ASP.NET

W modelu ASP.NET nawigacja pomidzy stronami wykonywana jest czciej za pomoc

Model przesyania formularzy w Ajaksie oraz JavaScripcie

Rysunek 3.3. Model przesyania formularzy w JavaScripcie oraz Ajaksie

Ajax oraz technologie po stronie serwera

Przesyanie danych do serwera

Ustawi zdarzenie, ktre zostanie wywoane po otrzymaniu danych.

2. Wywoa metod open wraz z daniem.

Metoda open jest jedyn, jak trzeba bdzie omwi.

Metoda ta przesya danie w jeden z dwch moliwych sposobw. Pierwszy odbywa si za

Serwer otrzymuje danie

Po pobraniu danych serwer moe je przetworzy i zwrci do klienta.

Pisanie odpowiedzi HTTP

W PHP uywa si polecenia echo.

Ajax oraz technologie po stronie serwera

W PHP to samo mona zrobi w nastpujcy sposb:

W ten sposb powstanie nastpujcy dokument XML:

W PHP naley zrobi to w nastpujcy sposb:

Ajax oraz technologie po stronie serwera

W PHP bdzie to wygldao nastpujco:

Powysze fragmenty kodu zwrc nastpujce dane:

Zwracanie dokumentw XML w postaci acuchw znakw moe jednak zniwelowa

A kod w JavaScripcie zmieni si na nastpujcy:

Usuwanie bdw z responseXML

Mona oczekiwa, e zobaczy si co takiego, jak poniej:

Usuwanie bdw z responseXML w przegldarce Internet Explorer

Usuwanie bdw z responseXML w przegldarce Firefox

Ajax oraz technologie po stronie serwera

Bd: niepasujcy znacznik. Oczekiwano: </error>.

Mona zwrci element <cart> z dokumentu XML w nastpujcy sposb:

Mona rwnie przej do pierwszego elementu zawartego w <book> w nastpujcy sposb:

W przegldarkach Mozilla zawarto tekstow zwraca si za pomoc waciwoci textContent,

Technologie po stronie serwera

Ajax oraz technologie po stronie serwera

ASP.NET ma by niezaleny od jzyka programowania. Pomys polega na tym, e mona

Rysunek 3.4. Wybieranie waciwoci katalogu w IIS

Przykad wykorzystujcy Ajaksa oraz ASP.NET

mona do niego dodawa przedmioty,

jeli doda si do niego kolejny przedmiot, liczba przedmiotw wzronie o jeden,

mona z niego usuwa przedmioty.

Ajax oraz technologie po stronie serwera