1 • .

rORMA ~ ~

Alerant

Meqbizhato informatika

(8i;ranl

A j6v6ben gondolkodunk. Celunk, hogy a legmodernebb technol6giai eredrnenyekre epul6 informatikai rendszereinkkel hozzajaruljunk vallalata fejlodesehez, Atfog6 tavk6zlesi, penzintezeti, ipari rneqoldasaink seqitseqevel On is lepest tarthat korunk egyre gyorsul6 vllaqaval

A SOA rnaqyarorszaqi szakerto]e

Kris Hadlock Webalkalmazasok fejlesztese Ajax segltsegevel

Budapest, 2007

Kris Hadlock

A forditiis a kovetkezo angol eredeti alapjan keszult:

Kris Hadlock: Ajax for Web Application Developers

Authorized translation from the English language edition, entitled AJAX FOR WEB APPLICATION DEVELOPERS,. uh Edition, ISBN 0672329123, by HADLOCK, KRIS, published by Pearson Education, Inc., publishing as Sams Publishing.

Copyright © 2007 by Sarris Publishing

Translation and Hungarian edition © 2007 Kiskapu Kft. All rights reserved!

All rights reserved. No part of this book, including interior design, cover design, and icons, may be reproduced or transmitted in any form, by any means (electronic, photocopying, recording,

or otherwise) without the prior written permission of the publisher. .

Trademarked names appear throughout this book. Rather than list the names and entities that own the trademarks or insert a trademark symbol with each mention of the trademarked name, the publisher states that it is using the names for editorial purposes only and to the benefit of the trademark owner, with no intention of infringing upon that trademark.

Fordiras es magyar vahozai © 2007 Kiskapu Kft. Minden jog fenntartval

A konyv egyetlen resze sem sokszoroslthato sernmilyen m6dszerrel a Kiad6 elozetes trasos engedelye nelkul. Ez a kcrlatozas kiteried a belso tervezesre, a borttora es az ikonokra is.

A konyvben bejegyzeu vedjegyek es rnarkanevek is felbukkanhatnak, Ahelyetl, hogy eZI minden egyes helyen kulon jeleznenk, a Kiado ezennel kijelenti, hogy a rmfben elofordulo valamennyi vedert never es jelzest szerkesztesi celokra.johiszernuen, a nev tulajdonosanak erdekeu szern elan tarrva hasznalja, es nem all szandekaban az azokkal kapcsolatos jogokat rnegszegni, vagy ketsegbe vonni,

A szerzok es a kiado a lehet6 legnagyobb korultekintessel jan el e kiadvany elkesznesekor. Sem

a szerzo, sem a kiad6 nern vallal semminemG felelosseget vagy garanciat a konyv tartalmaval, teljessegevel kapcsolatban, Sem a szerzc, sem a kiado nem vonhat6 felelossegre barrnilyen baleset vagy karesemeny miatt, mely kozvetve vagy kozvetlenul kapcsolatba hozhat6 e kiadvannyal.

Forditas: Batiz jttdil, Gilicze Balint, Nagy Daniel/a, Pataet Peter, vtaseoous Dora Lektoralas: Ri1zmiio8s Laszl6

Miiszaki szerkesztss: Csutai: Hoffmann Leuente Borite: Bognar Tamas

Felelds kiad6 a Kiskapu Kft. ugyvezeto igazgat6ja © 2007 Kiskapu Kft.

1134 Budapest, Csang6 u. 8.

Telefon. (+36-1) 477-0443 Fax: (+36-1) 303-1619 http://www.kiskapukiado.hu/

e-mail: kiado@kiskapu.hu

ISBN: 978 963 9637 23 8

Keszult a debreceni Kinizsi Nyorndaban Felelds vezeto: Bordas janos

Ezt a k6nyvet jelesegemnek, Lisdnak ajdnlom, aei szinte veletleniU ismertetett meg a webteruezes es -feflesztes vilagaval, es aei minduegig mel/ettem alit a vegelathatatlan ol"lik soran, amikor elhanyagoltam ot, mer! ezt a konyvet irtam. Ajanlom meg ezt a konyue: nehai nagyszuleimnee, akik nelkal nem tudtam oolna befejezni az iskolaimat, tis akiknele az onzetlensege nelkal ma nem lennee az, aki vagyok.

l_ZUX&AS .• ".=CC,) e,;;c~

A szerzor61

Kris Hadlock. 1996 ota dolgozik webfejlesztokent es -tervezokent, es gyakran jelennek meg cikkei az InJormlt-ban, ilIetve szarnos mas, webtervezoknek sz616 foly6iratban. Alapit6ja a Studio Sedition neV11 webalkalmazas-fejlesztd cegnek, es tarsalapitoja a 33Inc-nek, arnely a DashboardHQ keszit6je. Webnapl6ja, amelynek cime Designing with Code, a tervezes szempontjabol foglalkozik a webalkalmazasok fejlesztesevel, es gyakran mutat be olyan hasznos k6dokat, amelyekkel hatekonyabba tehetjuk a webalkalmazasarnkat. Krisrdl a webhelyen, a www.krishad 1 oc k . com clmen tudhatu nk meg tobbet.

•

Koszonetnyilvanftas

Szeretnek koszonetet mondani Robert Hoekrnan Jr.-nak, tarsarnnak a 33Inc-nel, aki bevezetett a mtfszaki konyvek icisanak rejtelmeibe, es aki szenvedelyesen kiall az egyuurmikod6 programok tervezese es altalaban a j6zan esz mellen, Rajta krvul halas vagyok Nikki McDonaldnek, szerkesztomnek az Inform/t-nel, aki a Sams Publishing kiadohoz iranyitorr.

Bevezetes

Valami biztosan ehhez a konyvhoz vonzotta az Olvas6t ~ talan webfejleszto, aki meg szeretne tanulni, hogyan hasznosithatja jobban az Ajaxot a munkaja saran, talan egy konynyen forgathat6 kezikonyvet szeretne az asztalan tudni, amikor a holnap technologiajat fejleszti az Ajaxszal. Nem szarnit, hogy mi az igazsag, oruhink, hogy kezebe vette ezt

a konyvet,

Ebben a kotetben nagyjabol mindent megtalalunk az Ajaxr61, illetve arr61, hogy mikent epithetjuk be a webalkalmazasainkba. Olyan professzionalis webfejlesztoknek szantuk, a kozephaladoktol a halad6kig, akik tij rnodszereket szeretnene elsajatitani, hogy webalkalrnazasaikat magasabb szintre emeljek,

A konyv elsa resze (Az elsa Iepesek) az Ajax alapjait targyalja. A 2. fejezetben megrnutatjuk, hogyan hajthatunk vegre kerelrneket, a 3. fejezetben azt, hogy mikenr fogadhatjuk

a valaszokat mind XML, mind JSON formatumban, a 4. fejezetben pedig arra terunk ki, hogy rnikent kepezhetjuk Ie az ada to kat a CSS es az XHTML segitsegevel. A masodik resz (A JavaScnpt-motor letrehozdsa es hasznalata) tema]a egy Ajax-motor keszitese JavaScripttel. Az 5. fejezetet azzal kezdjilk, hogy megtanuljuk, hogyan hozhatunk letre objektumokatJavaScripttel ~ ez szukseges ahhoz, hogy tisztaban Jegyiink az objektumkozpontu JavaScript alapjaival, Ha mar ertjuk az objektumok letrehozasanak modjat, a motor elkeszitesere osszpontosithatunk ~ ez a 6. fejezet temaja, Ezzel a tudassal felvertezve a 7. fejezetben rnegnezzuk, hogyan hasznalhatjuk fel a motort egy val6s webalkalmazasban, a 8. fejezetben pedig a JavaScriptben elerheto hibakeresesi m6dszereket tekintjuk at, amelyek rnegkonnyithetik az eletunket, Az Ajax-motor mtlkodeset jobban megerrve mar kepesek leszunk arm is, hogy tovabbi JavaScript-objektumok hozzaadasaval a 9. fejezerben b6vftsilk az Ajax-rnotort.

A harrnadik resz (Ojrahasznosithat6 elemek letrehozasa) azt targyalja, hogyan hozhatunk letre a kiszolgalorol kapott valaszadatok megjelenltesere Aiax-kepes osszetevoket, A bernutatott osszetevok a harrnonika, a fanezet, az ugyfeloldali ellen6rz6, illetve az adatracs, A 14. tejezettel kezdodo negyedik reszben (Ajax-mintiik) eloszor az Egyke (Singleton) rnintat, es annak adott JavaScript-objektumokkal valo hasznalatat rnutatjuk be, amelyeket Ajax-kepes webalkalrnazasunkban hasznalunk fel. A 15. fejezet elrnagyarazza, hogyan szervezhetjuk JavaScript-objektumainkata Modell-Nezet-Vezerlo rninra segftsegevel, a 16. fejezetben pedig a Megfigyelo rninta kerul sorra, illetve a hibakezelesre hasznalhato objektumok letrehozasa. A 17. fejezet temajat az Adatrukrozesi es a Tobbfelhasznalos minta adja, arnelyek rnegertese szukseges ahhoz, hogy interaktlv webalkalrnazasokat keszithessunk, amelyek lehetove teszik a felhasznaloknak, hogy webteruletuket megosszak rnasokkal, es menet kozben lassak, mit m6dositottak a t6bbiek. A 18. es 19. fejezet egyarant olyan rnodszereket es iranyelveket rnutat be, arnelyek webalkalmazasaink egyutemukodesi kepesseget es hasznalhatosagat novelik. Az otodik resz (EgyiittmiikOdes a kiszolgiil601- dallal) azoknak a kulonfele nyelveknek a hasznalatat targyal]a, arnelyekkel kiszolgalooldali technologiakhoz es adatbazisokhoz kapcsol6dhatunk. A konyv hatodik, utols6 resze ( Vegso Simitasok) cimenek rnegfeleloen az Ajax-kepes webalkalrnazasok finomhangolasaval foglalkozik, es a biztonsagot, valamint a legfontosabb iranyelveket helyezi a kozeppontba.

-

LIf'_·

~.4S

Akonyv peldak6djai

Ahogy korabban ernlitettem, ennek a konyvnek az a celia, hogy rnegtanltsa, hogyan keszitherunk ujrahasznosfthato Ajax-alkalrnazasokat objekturnkozpontu JavaScriptteL Ogy dontottem, onallo, kornyezetbe nem agyazott peldak helyett olyan k6dokat rnutatok be, arneIyek onrnagukban is hasznalhatok, de egyben egy nagyobb webalkalmazas reszei, ezert

az egyes fejezetekben egyenkent megtanuljuk, hogyan keszlthetunk egy Ajax-moron, osszetevoket, illetve adatbazis-kapcsolatokat, majd ezeket a darabokat egy nagyobb alkalrnazasban fogiuk ossze, amelyet fokozatosan epltunk fel a konyv saran. A vegso alkalmazas ezekbol az elemekbol fog allni, arnelyeket az Ajax kapcsol egymashoz, es egyun egy olyan belso webes levelezoprogramma allnak majd ossze, amelyet barrnilyen felhasznalo alapu webhelyen (mondjuk egy webes kozossegben is) felhasznalhatunk.

A fejezetek es vegsosoron a teljes alkalrnazas peldakodjai rnegtalalhatok a samspubl ishing. com webhelyen (termeszetesen, a Klskapu Kiad6 honlapjarol is letolthetok a http://www.kiskapukiado.hu/13 2 cimrol). A fejezetekben a kesz alkalmazasba n megtalalhato kodreszleteket cimekkel lattuk el, amelyek alapjan minden reszlet azonoslthate. Nem csak azt tanuljuk meg, hogyan keszithetunk es hasznalhatunk sajat, ujrahasznosithato Ajax-osszetevoket, hanern azt is, hogy rnikent aknazharjuk ki ezr a tulajdonsagukat ahhoz, hogy kesobb felepitendo Aiax-alkalmazasokhoz kapcsoljuk 6ket.

I. resz • Az els616p6sek

1. fejezet • AI Ajax bernutatasa

2. feiezet • A kerelem

3. Iejezet • A valasz

4. feiezet • A valasz lekepezese XHTMl-lel es CSS-sel

II. risz • A JavaScript-motorletrehoz6sa 6s hasm61ata

5. feiezet • Obiektumktizponru JavaScript

6. fejezet • A motor elkeszltese

7. faiezet • A motor hasznalata

8. feiezet • Hibakereses

9. faiezet • A motor bovitese

III. r6sz • Ojrahasmosflhat6 elemek l6trehozisa

10. fejezet • Osszecsukhat6 elemek - hermonikak

11. feiezet • Fanezet

12. feiezet • Ogyfeloldali ellenorzes

13. feiezet • Adatracsok

IV. resz • Ajax-mint6k

14. feiezet • Az Egyke minta

15. fejezet • A Modell-Nezet-Vezerlo minta

16. fejezet • A Megfigyelo minta

17. fejezet • Az AdattUkrtizes minta

18. fejezet • Egyuttmuktidesi mintiik

19. fejezet • Hasznalhat6sagi mintak

,

Attekintes

V. resz • EgyUttmGk6des a kiszolgal6oldallal

20. fejezet • Az Ajax es az adatbazisok egyiittmukodese

21. fejezet • EgyiittmukOdes adatbezisokkal: a kiszolgal6oldal

22. fejezet • Az Ajax egyuttmukodese adatbazisokkal- magas szinten

VI. feSZ • Vegs6 simft6sok

23. fejezet • AI alkelmazas blztonsaqossa tetele

24. fejezet • Gyakorlati tanacsok

Targymutat6

Tartalomjegyzek

A szerz6r61 vii

Koszonetnyilvanltas ix

Bevezetes xi

A konyv peldakodiai xiii

Attekintes xv

Tartalomjegyzek xvii

I. resz • Az els618pesek

1. fajezat • Az Ajax bemutat6sa

AzXMLDOM .:1

Az el6oy6k merlegelese .:1

2. fsiezat • A k6relam

Az XMLHttpRequest reszletesen 7

Szabvanyos XHR , . , 8

Adatbazis-megfeleld XHR , . 9

Adatok kuldese az adatbazis-megfeleld XHR-eknek 10

Az objektum letrehozasa , , , 11

Aszinkron adatatvitel , , 12

A keszenleti allapot , , 14

H1TP-allapotk6dok es -fejlecek ., ,. 15

3. fejezat • A v61asz

XML 19

Elemek 20

jellernzok 21

CDATA 22

Az XML elemzese 23

JSON 27

A JSON nyelvtana 28

A JSON hasznalata 29

A JSON elemzese 30

4. fejezet • A v61asz leUpez6se XHTML-lel6s CSS-sel

XHTML 33

CSS 36

II. resz • A JavaScript-motor latrehozasa as haszn6lata

5. fejezet • Objeirtumkozpontil JavaScript

Objektumkozponni rnegkozelitesek 42

A new rrnivelet hasznalata 42

l.iteralis jeloles 43

Tarsitasos lombok 43

JScripl.NET 44

Objektumkonstruktorok , ,., 45

Peldanyok 45

Tulajdonsagok 46

Tagfuggvenyek , 47

Prototipusok , 49

Peldanyok , 50

Tulajdonsagok letrehozasa 51

Pararneterek felulbtralasa es felulirasa ., 52

A tulajdonsagok vedelrne 52

Tagfuggvenyek 53

Objektumok bovttese prototipusos tagfuggvenyekkel 53

6. fajazat • A motor alk9szft6se

Egyedi Ajax burkol6 letrehozasa , , , , , , , , , . , . , . , , 55

Kerelmezes , , , , , , , , , , , , , , , . " . , . , . , , 56

A keszenleti allapot , .. ' , , , , , 57

A valasz _ ' . ' .. _ _ _ , , , , , 58

Ajax-frissit6 letrehozasa . , , _ . - - - - 59

A:z. objektum megalkotasa 59

A kerelrnezo objektum frissitese , , 60

A valasz _ _ . __ 61

7. fajazat • A motor haszn61Bta

Az els6 lepesek ' .. _ . __ _ . _ . _ , , 63

Kerelmek elkeszitese _ . . _ 64

Motorfuggvenyek es -rulajdonsagok _ . _ . _ . , . _ . , ' , 65

8. fajazat • Hibakares6s

A JavaScript onerror esemenye _ . _ . , . , . _ 68

response'Text , . , . , . , . , . , , , 69

IE Developer Toolbar . _ . . , _ . _ , _ .. _ . , , ' '. ' . ' .. 69

A bovftmeny telepitese , , __ . , . , , . , . , __ 70

A gyorstar kikapcsolasa , , " , , ,_ ,.,., 70

Navigacio a DOM-ban , ,.,. , , , , . ' . , .. , 70

Osztaly- es azonositoinformaciok rnegtekintese ' , . ' . , , 72

A Safari Enhancer ,., , , , .. , ,., 72

A Safari Enhancer telepitese - .. 73

A JavaScript konzol 73

A FireBug . , , . , ' _ . , . , , .. , , 74

A FireBug telepitese _ _ _ _ 74

A parancssor _ " __ 75

Uzenetek naplozasa a konzolban . __ . _ . _ 77

Naplozasi szintek _ . _ . , , 77

Elernek vizsgalata _ , , , 78

Az Ajax kikemlelese _ .. _ ' ' . ' . " , , 80

9. fejazet • A motor b6vft6se

A Utilities objektum letrehozasa 83

A.llapotk6dok kezelese H'I'TPcobjektumrnal 90

A HTTP~allapotk6dok kategoriai 92

A HTTP objekrurn hasznalata 98

, .

III. resz • UJrahasznosfthat6 elemek latrehozasa

10. fejazet • Osszecsukhat6 elemek - harmonik6k

Lassunk hozzal 103

Az XIvlL-szerkezet 104

Az XML-kerelem 105

A harrnonika objektum letrehozasa 106

A panelek rmfkodese es az adatok megjelenitese 109

A CSS Ietrehozasa 112

11. fejezet • Fan6zet

Az adatok szerkezete 116

A valasz kezelese 118

A GUI letrehozasa 119

Stilus hozzaadasa az osszetevohez : 124

12. fejezet • Ogyf6loldali ellen6rz6s

Lassunk hozzal 127

Ellen6rz6 objektumok letrehozasa 129

A felhasznaloi bemenet ellenorzese 131

Vizualis visszacsatolas a felhasznalonak 133

A kiszolgalooldal 134

A letrehozofuggveny 136

A felhasznaloi adatok ellenorzese 137

Felhasznalok bejegyzese €os beleptetese 138

13. fejezet • Adatr6csok

Lassunk hozzal 141

Adatracs objekrum letrehozasa 143

Az adatok rnegjelenitese 146

DataRow objektumok letrehozasa 147

Adatoszlop objektumok letrehozasa 150

Az osszetevo forrnazasa , , , 151

IV . ..esz • Ajax-mint6k

14. fajazat • Az Egyka minta

Az Egyke minta attekintese , , . ' 155

Objektum letrehozasa az Egyke rnintaval ,., 156

Az Egyke objektumok hasznalata .. ,., ,., 159

15. fajazat • A ModalJ-N6zat·Vamr16 minta

Aminta attekintese ,.,., 161

Aminta elkeszitese " 163

Aminta hasznalata . , 164

16. fajazet • A Magfigyal6 minta

Aminta attekintese , ,",........... .' 167

Megfigyel6k feliratkozasa ' , , 167

A megfigyel6k ertesttese , .. , 167

Megfigyel6k leiratkozasa ' 168

Hibakezel6 objektum letrehozasa , 168

Megfigyel6k feliratkozasa 169

Megfigyel6k ertesitese . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 170

Megfigyel6k leiratkozasa , , 171

A hibakezeld objektum hasznalata 174

17. fajazet • Az AdattOkr6ms minta

Attekintes , , .. ,.,.......... . .. , 177

A Tobbfelhasznalos minta , 179

Aminta megvalositasa 180

18. fejezet • Egyiittmllk6dt\si mjn~k

EI6zmenyek kezelese sutikkel _ _ __ . _ _ 183

A Historian objekturn ,.,',., , 184

Az XML fajlletrehozasa es megielenitese " , 186

A Navigation objektum . _ .. , ' , , , , , 188

.Huzd es ejtsd" .,"',................. , .. , , 189

A DragDrop objektum ' . , . . . . . . . . . . __ . .. 190

19. fejezet • Hasznalhat6sagi mintjk

A visszajelzesek, hibak es figyelmeztetesek kezelese 198

Tervezes a k6dban , , , __ 201

v. resz • Egyuttmukodes a kiszolgal6oldallal

20. fejezet • Az Ajax as az adatb8zisok ogyiittmllk6dase

Kapcsolat a PHP-veJ __ , _ , _ . _ . _ . _ , . , .. __ _ , 208

A res athidalasa , . , .. , , 208

A kerelrnek vegrehajtasa . . ' ' __ , _ , . , . , , 210

A kapcsolat letrehozasa , . , , 215

21. fejezet • EgyOttmllkodes adatb8zisokkal:a kiszolg8l6oldal

Kapcsolodas az ASP_NET~hez ' , , , 225

Kapcsolodas a Coldfusionhoz , . , ,. , . . . . . . . . . . . . . . . . . . . . . . , 229

22. fejezet • Az Ajax egyiittmllkodese adatb8zisokkal - magas szinten

Kotegelt frissiresek , ' , 233

Tombok kuldese , , . , . , . 234

XML kuldese , , ' , 235

]SON kuldese " ,.,., '. , 236

Kiszolgalooldali XML es )SON , . , . , 236

XML , , , , , , " '. , . ' 236

JSON ' . , ' , . , , 237

VI. resz • Vegs6 simftasok

23. fejezat • Az alkalmms biztons6goss6 t6tele

Biztonsagi resek 241

Ajax-kerelrnek [elszavas vedelme 243

Egyedi jelszavak letrehozasa 243

jelszavak hitelesitese a kiszolgalooldalon 245

24. fejezet • Gyakortati tan6csok

A motor hasznalata ,.......... . 249

Tervezesi rnintak , . . . . . .. . 250

Osszetevok hasznalata ,....... . .. 250

Statikus es dinamikus valaszok .. . . . . . . . . .. . . . . . . . . 250

A hibak es visszajelzesek kezelese . 251

Az alkalmazas elozrnerryei . 251

Biztonsag . 252

Targymutato .

........ 253

1. fejezet Az Ajax bemutatBsa

2. fejezet A k6re1em

3. fejezat A v6Iasz

4. fejezst A v6Iasz 1ek6pez6se XHTML..JeI 6s CSS-sel

,

Az elso lepesek

Az Ajax bemutatasa

Koszonet mindenkinek, aki kezebe vette ezt a kbnyvet! Ebben a kotetben a celunk nem csupan az, hogy megvizsgaljuk az Ajaxot rneghatarozo technologiakat es azt, hogy ezek kolcsonhatasai mikent vezetnek hatekony ugyfeloldali egyuttrmfkodeshez, hanern azt is meg szeretnenk rnutatni, hogyan lehet barrnilyen Ajax-megfelel6 webes alkalrnazasban ujrahasznosithato, hasznos kodokat irni. Ezek a kodok a vallalkozasi szinnl alkalrnazasokban szukseges meretezhetoseg es rugalmassag erdekeben teljesen objektumkozpontuak lesznek, A konyv fejezetei vegigvezetnek bennunket az egyes peldakon bogyan lehet ujrahasznoslthato Ajax motort keszitenl, hogyan lehet az Ajaxszal egyuttrmfkodc osszerevoker letrehozni, valarnint - ez a szerz6 kedvence - mikent lehet az Ajax segnsegevel klszolgalooldall nyelvekhez kapcsol6dni. Az Ajax kulonbozd tarnogato technologiakat ig€myel- az XML-t (Extensible Markup Language, b6vithet6 jelolonyelv) es a JSON-t QavaScript Object Notation, JavaScript objekturnjeloles) az adatcserehez, tovabba a JavaScriptet es a C5S-t (Cascading Style Sheets, robbszinnl stiluslapok) az adatlekepezeshez es -rnegjeleniteshez -, ezert miel6tt elrnerulnenk az Ajax sokretu vilagaban, ezekre a technologiakra osszpontosltunk. Az ugyfeloldal es a kiszolgalooldal egyuttrrnfkodeser megisrnerve megtanuljuk, bogyan lehet az egyes kodokat rmlkodd alkalrnazasokka gyurni - vegul

is ezek annyira szorosan osszekapcsolodnak, hogy az Ajaxhoz mindkett6 ismeretere szukseg van. Olyan, az Ajaxra alkalrnazhato elteriedt programozasi mintakkal is foglalkozunk rnajd, amelyekkel sokkal gyorsabba es atlathatobba tehetjOk a fejlesztest, Ez uran elsajatlrunk nehany hasznos fogast, arnelyekkel biztonsagossa tehetjiik az Ajax-alkalmazasokat, es kozvetlen felhasznaloi interakciot, valamint uzenetkezelest es mas ugyfeloldali szolgaltatasokat biztoslthatunk.

Az Ajax mozaiksz6 az Asynchronous javaScript and XrvfL (aszinkron JavaScript es XML) kifejezesbdl ered, Az Ajax k6zponti eleme az XML DOM (Document Object Model, dokumentum-objektummodell) reszet kepezo XMLHTTPRequest objekrum, Mivel az XML DOM az Ajax rendkivul fontos resze, roviden tekintsiik at, hogy lassuk, hogyan kapcsol6dik a konyvben targyalt temakhoz.

AzXMLDOM

Az XML dokumentum-objekrummodell az XML dokurnentumok eleresenek es modositasanak szabvanyos modjat natarozza meg. A DOM hozzaferest nyUjt az XML, illetve az XHTML dokumentumok szerkezetet alkoto elernekhez, ezaltal teljes elerest nyujt a JavaScript szamara, A hozzaferest a JavaScript DOM-kezelessel foglalkozo belso objektumhalmaza teszi lehetove, A konyvben vegig ezt a modellt hasznaljuk majd, mert elengedhetetlen

az XMLHTTPRequest (XHR) kerelrnek letrehozasakor a kiszolgalooldalrol erkezo valaszok feldolgozasahoz, Ahogy korabban ernlitettuk, az XHR az Ajax-model! veleje, ami nelkul

a modell nem letezne, Mostanaban rnindenkit az Ajax-mozaiknak ez a darabja izgat, ugyanis lehetove teszi, hogy a bongeszd frissitese nelkul Indftsunk HTfP-kerelmeket.

Az ut6bbi id6ben ugyan megn6tt az Ajax koruli felhajtas, a technol6gia azonban mar eleg regota letezik, A Microsoft eredetileg 1999-ben bocsatotta ki a Windows IE 5-tel egyutt, egy JavaScripttel es VBScripnel elerhetd ActiveX objekturnkent, de rna mar a Mozilla,

a Firefox, a Safari es a Netscape is tarnogatja egy eredeti JavaScript objektum segitsegevel, amelyet az Internet EXplorer (IE) 7-es kiadasa szinten tamogat majd. Annak ellenere, hogy ezek a technologiak korabban is leteztek, es szamos fejlesztd alkalmazta oket, csak

az ut6bbi id6ben valtak igazan nepszenive. Ez az lijonnan szerzett nepszeruseg joreszt

a bongeszek altai nyujtott tarnogatasnak koszonheto, mivel a legut6bbi valtozatok el6n nem sok bongeszo rendelkezett a hatekony DHTML-hez, XHTML-hez, CSS-hez es XML~ HTTPRequest-ekhez szukseges tamogatassal, Most mar igen j6, tobb bongeszoben, iIletve tobb feliileten mGk6d6 eredmenyt kaphatunk az ilyen kolcsonhatasok lerrehozasaval.

Az emlften technologiak jobb tamogatasaval az Ajax eloterbe kerult, es a webfejleszt6kre ismet izgalrnas korszak koszontott. Nehany kisebb, ffiggetlen ceg rendszeresen all el6 olyan alkalmazasokkal, amelyek hatekony szolgaltatasaikkal es a felhasznaloi elmeny bamulatos bovttesevel felveszik a versenyt a munkaasztallal,

Az el6nyok merlegelese

Az Ajax olyan nyelvek hatekony gytljtemenye, amelyek egyOtt konnyen hasznalhato feluleteket esugyfeloldali parbeszedet eredrnenyeznek. Sok fejlesztot azonban annyira rzgarotta tesz az Ajax koruli felhajtas, hogy egyszertlen beszurjak a k6dot az alkalmazasba, anelkul, hogy elozoleg felrnernek annak elorryeit, Nem minden webalkalmazasban van szukseg

az Ajaxra, de egy adore alkalrnazas szarnos eleme jobba teheto az Ajax el6nyeinek kiaknazasaval Ebben a konyvben olyan felhasznalasi rnintakat tekintiink at, amelyek a visszajelzessel, a kiszolgalooldali urlapoknak az uriap elkuldese elotti ellenorzesevel es

a webalkalmazasok egyes elemeit rulzasok nelkul feljavirani kepes Ajax-megfelel6 osszetev6kkel fogialkoznak. Az Ajax olyankor is remekul alkalmazhato, amikor kiszolgalooldali kapcsolarot akarunk letrehozni es esetleg adatbazis-rrnfveleteket vegezni a bongeszd frissltese nelkul, Az Ajax eppen emiatt annyira hatekony, hiszen lehetove teszi, hogy adatcseret folytassunk a kiszolgaloval, HTTP-allapotk6dokat fogadjunk, adatbazisba mentsiink, illetve

rneghatarozzuk, hogy mi jelenjen meg a felhasznalo szarnara, anelkul, hogy egyszer is frissiteni kellene az oldalt. Az asztali alkalrnazasokhoz hasonloan ez a kerelern-valasz korforgas folyamatosan fennallhat, az Ajaxszal egyurtmukodc webalkalrnazasok azonban a Weben talalhatok, tehat barki, aki internetkapcsolattal rendelkezik, elerheti azokat, es nern kell semmit letoltenie vagy szallitasi koltseget fizetnie nagy, tarka dobozokert Az Internet az uj rnunkaasztal - a szoftver nagyszabasu valtozasanak kuszoben allunk, arnelyben az igeny szerint lehivhato informacio uttordikent tevekeny szerepet vallalharunk,

Az Ajax ertekes kapcsolatot teremthet a felulet es a kiszolgalooldali logika kozott, ami lehetove teszi, hogy a kiszolgalooldal nagy teljesitmenyu es hatekony legyen, rnikozben egyszenl, k6nnyen hasznalhato felulettel rendelkezik, amely igeny szennti visszacsatolast nyu]t a felhasznaloknak, A kiszolgalooldali nyelvekkel t6rten6 adatcsere, illetve az adatbazisban tarolas lehetoseget is biztositja, anelkul, hogy a felhasznalo es az alkalmazas kozotti kapcsolat rnegszakadna, ahogy a hagyornanyos alkalmazasokban a bongeszoablak frissltesekor tortenik. A k6nyv elolvasasa utan minden olyan informactc rendelkezesunkre all majd, ami a tokeletesen muk6d6 Ajax-alkalmazasok keszttesehez szukseges,

A kerelem

Most, hogy megisrnertuk az Ajax hatteret, es roviden attekintettiik, hogy mit szeretnenk elerni a peldaprojektben, felkeszultunk a kerelern osszeallitasara. Ez a fejezet a kerelern belso rmikodeset mutatja be, es nem csupan a kerelemobjekturn letrehozasanak modiat ismerteti, hanem a kulonbozd kerelernrnodellek megkozeliteset is megerteti.

Az XMLHttpRequest reszletesen

Az XHR (XMLHttpRequest) objektum az Ajax-motor szfve, Ez az objektum teszi lehetove, hogy az oldal hatterkerelemkent kapjon adatokat a kiszolgalotol (a GET eljaras segitsegevel), illetve kuldjon adatokat a kiszolgalonak (a POST eljaras segitsegevel), ami azt jeJenti, hogy a folyamat saran nern frissfti a bongeszot. Ahogy azt az L fejezetben kifejtettuk,

az Ajaxot ovezc felhajtast ez az objekturn okozza, tovabba az, hogy az altala letrehozott rnodell termeszetesebb, mint a szabvanyos HTIl'- (Hypertext Transfer Protocol, hiperszoveg-arviteli protokoll) kerelern, Ez azert van igy, rnert a valtoztatasok igeny szerint tortennek, amikor a felhasznalo vegrehajtja azokat, ezaltal a webalkalrnazas inkabb asztali alkalrnazas harasat kelti. Az XH"R hasznalatakor nem kell a kiszolgalora varni, hogy minden kerelemre uj oldallal valaszoljon, es lehetove valik, hogy a felhasznalok tovabbra is kapcsolatban maradjanak az oldallal ugy, hogy a kerelmek kuldese a hauerben folyik.

Ez kulcsfontossagu a kozvetlen felhasznaloi elrneny megorzesehez: aza j6, ha a felhasznaloknak egyaltalan nem kell tudniuk a folyamatr61, ehelyett a szolgaltatast hasznalo aktualis feladatra osszpontosfthatnak. Az XHH igenvkiszolgalo (on-demand) jeHege az olyan webalkalmazasoknal rendkivul hasznos, ahol a felhasznalok feladatokat probalnak megoldani, rnert a szabvanyos HTTP-kerelem inkabb a bemutato tipusu webhelyeknel alkalrnazhato.

A hatterben tortena adatkezelestol eltekintve az XHR objektum GET es POST e!j:ha.sa ugyarnigy muk6dik, mint egy hagyornanyos H'Tl'P-kerelemnel. A POST es a GET eljaras alkalmazasaval egyarant adatkerelrnet kuldhetunk a kiszolgalonak, arnelyre valarnilyen

szabvanyos formarurnban kapunk valaszt. A valaszok leggyakrabban XML, )SON es szoveges forrnatumban erkeznek. A 3. fejezetben az osszes formatumot reszletesen artekintjuk. A POST kifejezetten 512 bajtnal nagyobb adatok kuldesenel hasznos (ezt a meretet

a GETeljaras nem kepes kezelni). A valasz fogadasa utan a DOM vagy a DHTML ~ amely az XHTML, a JavaScript es a CSS kevereke - segitsegevel tolthetjuk be a kiszolgalotol szarmazo uj adatokat az alkalmazasba,

Minden Ajax-kerelem egy ugyfeloldali rmlvelertel indul, amelyet altalaban egy JavaScriptk6d kezel. AJavaScript letrehozza az XHR objektumot, es H'FfPckerelmet kuld a kiszolgalonak. Ez utan sokfele lepes kovetkezhet, VessGnk egy pillantast a harorn leggyakoribb kerelernmodellre es azok folyamataira.

Szabvlinyos XHR

Ha egy Ajax-kerelrnet lebontunk a puszta mtlkodes szlntjere, csupan ez rnarad, Ebben

az esetben az XHR objektum a GET eljaras segitsegevel egy azonos tartomanyban talalhato alland6 XML, )SON vagy szovegfajlt ker, amelyet azutan a kiszolgalo visszakuld, hogy

a kerelmet indft6 ugyfeloldali k6d kezelje. A 2.1. abran a szabvanyos Ajax-modell folyarnatat lathatjuk.

I JavaScript I

I (XIHTML I

..

I

HTTP-kerelem GET~liarli.

+

2.1. libra

Ez a kerelem az Ajax ktrelem-valnsz modelljiinek legegyszerilbb formaja, amery mindossze egy azonos tanomanyban tala/haf6 XML, jSON

vagy szoveg(ajlt igb/yel

XML. JSON

Ez a kerelemfajta olyankor lehet hasznos, amikor egy webhez ert6 ugyfel vagy egy fejleszto frissiti a kert fajlt a kiszolgalon, ami ritkan fordul e16, kulonosen a nagymerenf alkalmazasoknal Ha ez a modell nem felel meg az igenyeinknek, a kovetkezo megkozelitesben mar szerepel az, ami ebb61 a rnodellbol leginkabb hlanyzik: az adatbazis.

Adatb6zjs~megfeleI6 XHR

Az adatbazis-megfelelo XI--IR·ek letrehozasanak elsajatitasa oiyan, mint amikor eloszcr vegzunk adatbazis-mrlveletet. Az oj lehetosegek egesz tarhazat nyitja meg elottunk, es nem is annyira bonyolult, mint kepzelnenk; az adatbaziskepes Ajaxszal elerheto osszetetr szolgaltatasrendszert tekintve gyerekjatek. A modell hasznalatahoz eloszor egy kiszolgalooldali nyelvhez kell kerelmet indltani .. A kiszolgalooldall nyelv egyedi, meghatarozott adatbazls-rndveletek kezelese celjab61 frt eljarasokkal kerdezi le az adatbazist a kerelernnek rnegfeleloen. Miutan a kiszolgalooldali nyelven irt k6d megkap]a az adatokat, visszakuldheti az XHR-nek, amely eredetileg az ugyfeloldali k6d altai kezelt XML-kent, JSON-kent vagy szovegkent kerte azokat, Ez a kerelern lehetove teszi, hogy a telhasznalok az altaluk inditott kerelrneknek megfelel6, egyedi adatokat kapjanak, A 2.2. abrtit tanulmanyozva jobban rnegerthetjuk az adatbazls-rnegfelelo XHH folyarnatat.

•

(XIHTMl'CSS

I JavaScript I

t

Ajax-motor

+

(X)HTML

I

I HTIP-kerelem

t

GET .Ii.'"

+

I

XMUJSON

KISloiytJI6oidail motor

I

Adatbfizis t

SELECT/UPDATE I

Adatbiizisvalasz 2.2 libra

" Az adasbazis-megfeleki XHR a lehel{fsegek ege.sz tarhaztit nyitja meg efi]tliJnk, tis magasabb szintre emeli Ajax-atlealmazdsainkat

Adatbazis

Ez a kerelemrnodell ugyan j6vaJ hatekonyabb, mint a szabvanyos kerelern, megis lehet, bogy ennel is pontosabb szabalyozhatosagot szeretnenk, A kovetkezo modell lehetove teszl, hogy adatokat killdjilnk az adatbazisnak, es a kerelern alapjin kapjunk vissza adatot, vagy egyszertfen egy logikai erteket kapiunk, ha az adatbazisba t6rten6 bedlesztes (INSERT) sikeres volt - es mindezt az oldal frissftese nelkul,

Adatok kUld8se az adatbazis-megfelel6 XHR-eknek

Ha adatokat akarunk kuldeni egy adatbazisba, eloszor egy XHR GET vagy POST eljarast kell kuldeni egy kiszolgalooldali nyelvCI k6dnak, illerve rnotornak. Miutan a kiszolgalo meg, kapja a kerelmet, elemzi az XHR altaI kuldott XML-t vagyegyszertl kulcs-ertek part, majd eszerint frissiti az adatbazist. Ez a kerelernmodell felhasznaloi beavatkozas nyoman frissiti az adatbazist, a bongeszooldal ujrat61tese nelku], Ezzel a rnodszerrel rernekul visszaadhato az asztali alkalmazasokban szerepl6 "Mentes" gomb. A peldaban elektronikus levelek adatbazisba rnentesere hasznaljuk majd ezr a mode lit, fgy a felhasznalok kes6bb Iehivhatjak

a leveleket, A 2.3. abean ennek a kerelemtipusnak a folyarnatat latharjuk, az esetleges valaszadatokkal kiegeszftve, amelyeket majd a 2. fejezetben targyalunk.

(X)HTML'CSS

I JavaScr.ipt I

•

Ajax-motor

I +-

HTIP·kerelem

+ )'MLJSON

KI szo Iga 160 Ida Ii motor

I

Adatbazis INSERT +-

Ad'lM,i·, SElECTIUPOATf

+ AdatildliSV<ildSl

2.3. libra

Az adatMzis-meg{eleI6 XHR POST segitsegevel az XHR-I leljes adatbazis-eleressel 61v6zhetjak

A fejezetben emlitett kerelernrnodellek k6ztii az adarbazis-megfelelc XHR-eknek tortend adatkuldes a leghatekonyabb, Lenyegeben teljes adatbazis-vezerlest biztosft az XHR-en keresztul, Sok ktilonboz6 helyzet letezik, amikor erdemes az adatokat XHR-rel elkuldeni

a kiszolgalonak. Hasznos lehet peldaul, ha egy jelszo kiszolgalora kuldesevel, majd annak az adatbazis-Iekerdezes elotti hitelesitesevel vedjuk az XHR·t. Az is lehet, hogy rekordokat szeretnenk frissiteni vagy beszurni az adarbazisba, vagy a kerelem alapjan rekordokat akarunk kijel6lni.

Az Ajaxszal folytatott kiszolgalooldali parbeszed leherove teszi az adatbazls igeny szerinti frtssiteset, ugyanugy, ahogy az asztali alkalmazasok mentik a munkafolyamatot. A kerelmek kiszolgalooldalat annyira boven lehet targyalru, hogy az V. reszben egy teljes fejezetet szentelunk neki. Mieldrtazonban elrnelyednenk az osszetett kodban, fontos, hogy bizros ismeretekkel rendelkezzunk az objektumokrol es azok kepessegeirol.

Az objektum letrehomsa

Az XHR es a kOlonbozo kerelernmodellek bovebb ismereteben mar 6sszpontosithatunk az objektum letrehozasara. A kerelernobjekturn Ietrehozasa rendklvul egyszerd, ahhoz kepest, hogy mennyire hatekony egy projektben alkalmazva

A kerelernobjektum letrehozasahoz ellendrizni kell, hogya bongeszoaz XHR vagy az ActiveX objektumot hasznal]a. A ket objektumot elsdsorban az kulonbozteti meg egyrnast61, hogy melyik bongeszo hasznalja Az Internet Explorer (IE) 5-os es kesdbbi vahozatai az ActiveX objekturnot, rnfg a Mozilla, a Frrefox, a Netscape, az Opera es a Safari az eredetiJavaScript XHH objekturnot alkalrnazzak, A masik kulonbseg az egyes objekturnok letrehozasaban rejlik: az IE-nel az objekrum never parameterkent kell atadru az ActiveX konstruktornak, mig a tobbi bongeszoben rendelkezesre all az eredeti javaScript objektum, amelyet csupan peldanyositani kell-

function makeRequest(url) (

iflwindow.XMLHttpRequest) (

request = new XMLHttpRequest();

else if (window.ActiveXObject) {

reques t = new Ac t i veXObj ec t ( "Msxm12 . XMLHTTP ,. ) ;

sendRequest (uri) ;

Ahogy azt a fenti peldakod mutatja, az objektum letrehozasa tenyleg nagyon egyszero feladat, Lerrehozunk egy makeRequest new tagfuggvenyt, amely - mint az sejtheto - a kereJem inditasat kezeli, valarnint letrehoz egy az XHR objektum rnegletet ellen6rz6 felteteh, arnellyel megfejti, hogy a bongeszo miJyen objektumot hasznal, Ha ez az objekrum nem all rendelkezesre, az A.ctiveXObject-et keressuk, Mtutan rneghatarozruk a helves objekrurnnpust az adon bongeszo szarnara, peldanyositjuk a megfele16 objektumot, es letrehozzuk

a kerelemobjektumot. Ezzel az objekturnmal ezutan el lehet erni az XHR objekrum osszes rendelkezesre a1l6 tulajdonsagat es tagfuggvenyer, amelyeket a 2.1. es a 2.2 tablazat sorol fel

2.2 tablaz.at T~

Abort ()

2.1 tablazat

onreadystatechange

Bsernenykezelo, ameIy a kerelernobjektum allapotanak valtozasakor indul el.

readyState

Az objektum aktualis allapotat jelzd szarnertekeket ad vissza, Az ertekek felsorolasa a 2.3. tablazatban hithat6.

responseText

A kiszolgal6t6! erkezo valasz karakterlanc-valtozata.

responseXML

A kiszolgalotol erkezo valasz DOM-megfelel6 dokumentumobjektuma.

status

A kiszolgalotol erkezd valasz allapotkodja.

statusText

Karakterlanckent vlsszaadott allapotilzenet.

Visszavonja az aktualis HTIP-kerelmet.

getAIIResponseHeaders(}

KigyUjti az osszes HTIP-fejlec erteket,

getResponseHeader("cimke"}

KigyUjti az osszes rneghatarozou H'Ff'Psfejlec erteket a valasztorzsbol.

Open("tagfOggv~ny". "URL" I , asyncFlag

[, "felhaswa16nev" t • "jelsz6"111)

Meghataroz egy MSXIv1L2.xMLHTIP vagy

egy Microsoft.XIv1LHTIP kerelmet, majd beallitja a kerelemhez tartozo tagfuggvenyt, URL-t es

a hnelesitesi informaciokat.

Send(content)

H'I'Tl--kerelmer kuld a kiszolgalonak, rnajd fogadja a valaszt,

SetRequestHeader("cimke". "ertek")

A cimke alapjan rneghatarozza a HTIP-fejlec erteket,

Ugy nlnhet, hogy a ket tablazat nern sok lehetoseger tartalmaz, de a kesobbi fejezetekben kiderul, hogy ezek ktszolgalooldali koddal, adatbazissal es dinamikus ugyfeloldallal egyiitt alkalmazva rendkivul hatekonyak.

Aszinkron adabtvitel

Ha valaki nem jaratos az adatatvitelben, es nern pontosan erti, hogy valojaban mit [elent

az aszineron adatatvttel, nern kell agg6dnia: valoszlnrlleg nem tud arrol, hogy mar tisztaban van a fogalommal, es valoszintfleg alkalrnazta is mas programok fejlesztesekor. A programozasi nyelvekben ez a rmlveletfajta a leggyakoribb, es az. XHR, illetve ezaltal minden vallalati Ajax-aJkalmazas fontos resze, Ez a resz eloszlarja az aszinkron adatarvitelr ovezd titokzatossagot, miel6tt meg elmerulnenk az objekrumkozpontu Ajax-motor kodolasaban,

Az aszinkron adatatvitel olyan ketirany(J parbeszed, ami idoelrolodassal tortenik, lehetove teve, hogy az adatok a maguk idejeben erkezzenek, arnikor hozzaferhetok. Mas szoval megtehetjuk, hogy kerelmet inditunk a kiszolgalohoz, folytatjuk a tobbi adat feldolgozasat, rnajd fogadjuk a valaszokat, arnikor a kiszolgalo elerheto. Ezaltal a webalkalrnazas rendkivul rugalmassa valik, Az Ajax-motorban az XHR kerelern-valasz modellje alaphelyzetben aszinkron jellegif Ez azt jelenti, hogy a kerelern-valasz adatok nem elore rneghatarozortak, tllerve rendszeres idakozonkent tovabbltodnak. Ha peldaul HTTP-kerelmet kuldunk a kiszolgalonak, folytathatjuka tobbi ugyfeloldalt rntlvelet feldolgozasat, mikozben a hatterben a valaszra varunk. Ez mind tortenhet azalatt, amig a telhasznalo mas feladatokon dolgozik, vagy mas rmlveleteker vegez, es egyalralan nines tudornasa a hatterben foly6 adatfeldolgozasrol, Vagyis hivasokat indfthatunk egy kiszolgalooldali nyelvif programhoz, hogy adatokat keressen az adatbazisban, es azokar XML, ]SON vagy szoveges forrnatumban adja vissza. Adatokat is kuldhetunk a klszolgalooldali nye!vnek, hogy

az adatbazisban tarolja azokat, vagy egy statikus XML, ]SON, ilIetve szovegfajl betoltesevel dinarnikusan feltoltherjuk a webhely oldalait anelkul, hogy frissirenenk az oldalr, vagy megszakftanank a felhasznaloi parbeszedet az ilgyfeloldalon.

Ennek a kerelernnek a feldolgozasahoz eloszor ket XHR-tagfUggv€myt kell meghivni:

az cpen-t es a send-er. Az XHR objektum open tagfuggvenye harorn pararnetert fogad. Az elsa egy karakterlanc, amely azt mutatja, bogy milyen eljarassal ki:ildjDk a kerelrnet, Ez az eljarasertek GET,. POST vagy PUT lehet, A masodtk parameter az URl,amelyet karakterlanc formajaban kertink - ez lehet XML, ]SON, szoveg, vagy ezen forrnaturnok barrnelyiket visszaad6 kiszolgalooldali nyelv: Az utols6 parameter - szarnunkra most ez a. legfontosabb - olyan logikai ertek, amely aszinkron atvitelnel alapertelmezesben true (igaz), szinkron atvitelnel pedig false (harnis), A send tagfuggveny az open utan koverkezik, es valojaban ez kuldi el a HTTP-kerelmet, es fogadja az altalunk meghatarozott forrnatumu valaszt, Egy karakterlanc pararnetert var, ami lehet XML vagy egy posT-kent kuldott egyszeru kulcs-ertek par. Lassunk egy egyszenf peldat arrol, hogy rnrkent hasznaljuk az open es a send tagfuggvenyt egy egyszeru Ajax-kerelernben.

request. open ( "tag fuggVE!ny", "URL". true); request. send (null) ;

El6fordulhat, hogy az aszinkron adatatvitel nagyszsbasu rendszerekben nehezkesen kezelhet6nek bizonyul, rnegis sokkal jobban meretezheto es hasznalhato, mint a szinkron adatarvitel, Ahhoz, hogy kulonbozo kepessegekkel es tapasztalatokkal rendelkez6, osszeteu felhasznaloi kort lehessen ktszolgalni, a fejlesztoknek olyan t6bbret1l alkalmazasokat kell Ietrehozniuk, amelyek sokfele feladatot rudnak kezelni. Az aszinkron parbeszed egyszerre tobb feladat vegrehajtasat es hatekonyabb rnunkavegzest tesz lehetdve az ilyen felhasznalo: kornek, rnegkfmelve 6ket att61 a nyagtal, hogy a kiszolgalo valaszaira kelljen varniuk,

A szinkron rmlveletek megvarjak a kerelernre erkezo valaszt, miel6tt ujabb kerelrnet Iehetne kuldeni. Egy nagyszabasu webalkalmazasban egy ilyen mtlvelet miatt k6nnyen leallhat

az oldal, mialatt a klszolgalo egyenkent dolgozza fel a sorban all6 kerelmeker, Az alkalmazas vegul hasznalhatatlanna valna, es a felhasznalok valosztrulleg elpartolnanak tole.

A k6szeniMi allapot

Az XHR objekturn letrehozasa es a kerelem elinditasa utan tudnunk kell, hogy a valasz megerkezett-e, Ilyenkor hasznaljuk az onreadystatechange esemenykezelct,

Az onreadystatechange esemenykezelo akkor indul el, amikor a kerelernobjektum allapota rnegvaltozik, es lehetove teszi, hogy visszahiv6 eljarast inditsunk. A visszahlvo eljaras elindulasa utan nekiink kell kezelni a valaszt. A 2.1. kodszovegben bemutatott, onResponse nevtl egyedi visszahivo eljarast a 3. fejezetben targyaljuk, ahol az Ajaxvalaszok osszes elemevel foglalkozunk.

2.1. k6dslQVeg Kerelem kaldese

--------------------------------

function sendRequest(url)

(

request.onreadystatechange = onResponse; request.open('GET', urI. true);

request. send (null) ;

A 2.2. kodszoveg egy checkReadyState new egyedi eljaras, amely ellen6rzi az XHR objekturn keszenleti allapotat, es az egyes allapotokat kulon agakban kezeli, az adott allapotnak megfelel6 szarn szerint. Ezt az egyedi eljarast az onResponse tagfuggveny hivja meg, hogy rneghatarozza az XHR objektum keszenleti allapotit, mielott elvegezne a valaszobjektum feldolgozasat.

case 0:

document. getElementById (id) . innerHTML break;

case 1:

document. getElementById (id) . innerHTML break;

case 2:

document. getElementByld (id) .innerHTML break;

case 3:

document.getElementById(id) .innerHTML break;

case 4: docurnent.getElementByld(id).innerHTML return (obj.status == 200);

break;

default:

document.getElementById{id).innerHTML ~ ·Varatlan.hiba.";

2.2. k6dszQveg A readyState ertekenek meghatarozasa

function checkReadyState(obj, id) (

switch(obj.readyState) (

) }

"Kerelem kQldese ... N;

·Valasz ,bet6Itese ... ":

'Va.lasz bet6ltve ... ';

"Va.lasz kesz ... n;

Megfigyelhetjilk, hogy a fenti eljirasban ket parameter szerepel. Az els6 parameter neve obj - ez a kerelmet kuldd XHR objekrum, amely most a kiszolgalorol erkezo valasz readyStare allapotanak ellenorzesere szolgal. A readyState-re vonatkoz6 kulonbozo visszaadott ertekeket es azok rnagyarazatat a 2.3. tablazatban olvashatjuk.

2.3. tablazat A readyState-ertakek [elentsse as rneghatarozasa

re8dyState-eiUk ~ M~

o

-

Nines kezdoertek

Az objektumban meg nem szerepelnek adatok

1

Toltes

Az objektum tolti az adatokat.

2

Toltes kesz

Az objekrum befejezte az adatok tolteset.

3

Interaktiv

A felhasznalo kapcsolatot letesithet az objektummal, annak ellenere, hogy a toltes nem fejezodou be teljesen.

4

Kesz

Az objektum teljes mertekben rrulkodesre kesz,

A rnasodik, id nevtl parameter az ugyfeloldali XHTML-ben talalhato HTML elemek azonosit6ja. EZI az azonosltot a JavaScript document. getElementByld tagfuggvenye keresi meg, ameIJyel a DOM-ot eppen hasznalo oldalon azonosfro alapjan lehet rnegtalalni a meghatarozott elernet. Amikor ez az elem megvan, az innerHTML tulajdonsagaba egy testreszabott uzenet kerul, amelyet az adott keszenleti allapothoz kapcsolva akarunk rnegjeleniteni,

Ez kirun6 rnodszer arm, hogy visszajelzest adjunk a lelhasznalonak a kerelrnek allapotarol A 2.2. kodszovegben laton m6don oJyan szoveges uzenetet adunk meg, amely lenyegeben az egyes allapotokra jel1emz6 betoltesi uzenetet [elenit meg, hivatkozasi rendszert biztosirva a felhasznalo szarnara. Ha a ready State eleri a 4-es erteket, az aZI jeienti, hogy befejezodott a toltes, es ezutan a checkReadyState eljaras rnegmondja, hogy a valasz allapota egyenlo-e 200-zaJ. A 200-as HTTP-ii.llapot azt jelenti, hogy a kerelern sikeres volt, es keszen all a feldolgozasra Ez egyike annak a sok HlTP-allapotk6dnak, arnit kaphatunk, es amit

az Ajax-motomak helyesen kell kezelnie, A kovetkezo reszben tovabbi allapotkodokat ismerherunk meg, toviibbii a HTTI'-allapotk6dok es -fejlecek leggyakoribb felhasznalasi rnodjait bemutat6 peldakat talalunk.

HTTP-allapotk6dok as -feilacek

Az Ajax-objektum kerelemallapota megegyezik a kerr fajl HTIp-a[[apotaval. A HTTP-allapotk6dok a kiszolgalc valaszat jelolik, ami a ken fajl allapotat tukrozi. A H'I'I'Pvkerelern es az XHR szarnara elerheto allapotkodok or csoportba sorolhatok:

• Tajekoztato. lxx

• Sikeres: 2xx

• A.riranyitas; 3xx

• Ugyfelhiba: 4xx

• Kiszolgalohiba. 5xx

A Weben kereszttil kapott allapotkodokat szarnok jelolik - gondoljunk arra, amikor meg szeretnenk liitogatni egy webhelyet, es 404-es hi bat kapunk Ez oem tetszoleges szarn, hanern a fajlallapot megfeleloje, ami ebben az esetben "A fajl nem talalharo" valasz, A kiszolgalonak - es ezaltal a kerelrnet indit6 Ajax-motornak is - minden allapotkodot megfeleJ6en kell kezelnie. Az XHR objektummal toru§n6 kerelerninditaskor a valaszt fogad6 parancsfajlnak kell feldolgoznia ezeket az allapotkodokat, Ez azt jelenti, hogy a fejleszr6 felel6s azert, hogy a valasz alapjan vlsszajelzest adjon a felhasznalonak, amit valoban meg keJJ rennie, ha j61 hasznalhato webalkalrnazast akar kesziteni, Sikeres valasz eseten az uj adat jellemz6en XHTML-kent kepezodik le az ugyfeloldalon; ellenkezo esetben megjelenithet6 valarnilyen trzener, amely ertesiti a felhasznalot, hogy a mGvelet sikertelen volt, illerve megadja a hiba jelleget, A hibakezeles kodolasa nem a legizgalmasabb dolog a vilagon, de elengedhetetlen ahhoz, hogy hasznalhato alkalrnazasokat keszltsunk, raadasul olyan gyakorlatra tehetunk szert, amit mas kodolasi korulmenyek kozott nern tudnank megszerezni. A hibakezelessel an. reszben ismerkediink meg reszletesebben, aha! egyedi objektumokat hozunk letre az osszes lehetseges allapotkod kezelesere, valarnlnt hasznos tizeneteket adunk valaszkeru a hibakereseshez, valamint a felhasznalok tajekoztarasa celjab61. Ha valakl tobbet akar megrudni a HTTI)-allapotk6dokr61,. a W3C (World Wide Web Consortium) webhelyen, a http://www . w3 . org! Protocol s/rfc2616/ rfc26l6- sec10 . html cimen megtalalja a rneghatarozasok relies listajat.

Az XHR objektum HITP-feJleceket is fogadhat, illetve beallfthat a kiszolgalon. A fejlecek segitsegevel meghatarozott adatokat gyiIjlhetOnk egy kert fajlr61, vagy informaciokat kaphatunk bizonyos kiszolgalotulajdonsagokrol. Ezek az adatok peldaul akkor lehetnek hasznosak, amikor a tartalorn tipusat meghatarozo content-type fejlec alapjan dontjuk el, hogy mikent elemezzunk egy kert fajlt. Ha a tartalom tipusa mondjuk text/XML (szoveg/Xlvll.), akkor tudjuk, bogy az XML DOM alkalrnazasaval elernezhetiuk, es rnegfelel6 tagfuggvenyeket keszithetunk a kOi6nb6z6 rartalomtfpusok kezelesere. Sok mas dontest is lehet hozni a HTTP~fejlecek alapjan.

Az XHR objekturnban harem eredeti fejlecfuggveny talalhato: a setRequestHeader,

a getResponseHeader es a getAllResponseHeaders. A setRequestHeader tagfuggveny lehetove teszi, hogy a fejlec cimkevel toneno azonosttasaval es valamilyen ertek atadasaval beallltsuk a fejlec erteket, A fuggveny utasitasformaja a kovetkezo:

request .. setRequestHeader ( "cimke", "ertek');

A kerelern fejlecenek beallitasaval az adott kerelern soran hozzaadjuk, toroljtlk, felullrjuk vagy lecsereljuk a HTrP-kerelem fejlecenekalapertelmezett erteket, A nyelvtanilag helytelen fejlecek nem tovabbitodnak, hanern hiba keletkezik, ezert a fejlec beallitasa sikertelen lesz.

A fejlecek beallitasan tul az XHR azt is !ehet6v€: teszi, hogy a valasz kozben lekerjuk

a fejleceket, Erre a celra ket tagfuggveny hasznalharo: a getResponseHeader es a getAIIRe.sponseHeaders. A getResponseHeader tagfuggveny a fejlec cirnkejet alkalrnazza pararneterkent, arnelynek segftsegevel meghatarozotr adatokat szerzunk az adott fejlecbol. lrne a ket tagfuggveny egy-egy peldaja:

request.getResponseHeader("cimke"i; request.getAIIResponseHeaders(i;

A getAllResponseHeaders tagfuggveny a valasz osszes fejlecet visszaadja, amelyek

a valaszt kuldd kiszolgalotol fugg6en valtoznak, A 2.4. abean szereplo peldaban egy XML fajl osszes fejlece lathato, amelyek azon a Windowst futtat6 kiszolgalon erhetok el, ahol a szerzo webheJye jelenleg mtfkodlk.

&"","",""401

-- - CCttui·,~: tathn'iI

~,litp~-"",-."" ~'5<A. """"200600"""00 GI<I

--,-

~; ,.t1ZtcdIo.~1.14M~

-,~ .. _,.,.,:"'"

2.4. libra

A gelAIlResponseHeaders la8fu8f!,vermyellekrirheliJ osszes m7Pjejlec

A fentiek csupan rovid bepillantast adtak abba, hogy milyen hasznosak lehetnek a fejlecek a webalkalmazasokban, Kesoob tobb szaz felhasznalasi m6dot talalunk majd, de ezek oem tartoznak a konyv temajahoz. A HTrP-fejlecekrol a W3C webhelyen,

a http, //www.w3.org/Protocols/rfc2616!rfc2616-sec14 . html dmen tajekozodharunk b6vebben, aha! a teljes felsorolasuk megtalalharo.

A 2. fejezetben a keszenleti allapot es az allapotkodck targyalasakor sz6 esett a valaszrol Ebben a fejezetben a kerelem allapotanal tovabb megyOnk, es ket olyan adatcsere-formatumra osszpontositunk, arnelyekbena valaszokar fogadhatjuk. Az Arax-valaszok kulonbozo formaturnokban erkezhetnek. a leggyakoribb ajSON, a legszelesebb korben elfogadott pedig az XML Mindkett6 hasznos lehet, att61 fugg6en, hogy milyen eredrnenyt akarunk elerni. A j6v6beni kezeles szemponqabol azonban erdernes az alkalmazason belul egyetlen forrnatumnai maradni, kulonosen akkor, ha nagy leptektl alkalmazast keszftunk, Ha peldaul valarnilyen helyzetben az XML~t hasznaljuk valaszforrnarurnkent, sokkal egyszenibb, ha tovabbra is erre a formatumra szamithatunk az osszes tobbi kerelem indftasakor. Ez alkalmazasonkent valtozhat, de amennyiben lehetseges, kovessuk ezt az elver. A valasztott rnegoldas meretezhetoseget is erdemes szem elott tartani, kulonosen ha olyan bdvithetd alkalmazas letrehozasat tervezzuk, arnelyben exponencialls novekedesre szamltunk Kezdetnek tanulrnanyozzuk az XML-t, annak nyelvtanat, az elernzes modjat, illetve hogy mikent hasznaljuk majd a kovetkezo alkalrnazasunkban,

XML

Az XML~t (Extensible Markup Language, b6vithet6 jelolonyelv) szivesen valasztjak XHRkent, egyszeruen azert, mert olyan szabvanyos kozvetitc nyelv, arnelyet minden programozasi nyelv kepes hasznalni. Ezen kivU] a kiszolgalo- es az ugyfeloldalon egyarant tarnogatotr, emiatt egyben a legrugalmasabb megoldas is. Az XML lenyegeben egy olyan egyedi clrnke alapu szerkezet, amelyet a fejleszt6 hataroz meg. Az XML cirnkel hasonlitanak a HTML cirnkeihez, azzal az elteressel, hogy a HTML elore rneghatarozon cirnkekkel abrazolja a szerkezetet, peldaul fejlec, torzs, tablazatok, es 'igy tovabb. Lassuk a HTML tablazatok egy rendklvul egyszeril peldajat, arnelyet konnyen lehetne XHTML-Ie alakltani, illetve XHTML·kent alkalmazni:

<table><tr><td></td></tr></table>

Az XML ugyfeloldal es kiszolgalooldal kozotr tort€mo atadasaval a kulonbozd nyelvek egyszertien kommunikalhatnak egyrnassal. Rendkivul elonyos, hogy a kiszolgalo- es az ugyfeloldal kozott letezik ilyen kozos nyelv, Lehetdve teszi, hogy kozvetlen kapcsolatot letesitsunk a grafikus felhasznaloi felulet es egy kiszolgalooldali nyelv, majd kivansag szerint egy adatbazis kozott, A grafikus felulet es az ugyfeloldal kozorti XML-Iel rnegvalosftott parbeszed lehetove teszi a ket alkalmazasreteg teljes kulonvalasat, A graflkus felulet es a kiszolgalooldali logika elkulonitese rendkfvtll fontos, mert ezaltal teljesen onallo alkalmazast kapunk, amelyben a grafikus felhasznaloi felulet fejleszt6i dolgozhatnak az ugyfeloldalon, mig a kiszolgalooldali fejlesztok dolgozharnak a kiszolgalcoldalon. Ez rnagatol ertetoddnek nfrthet, de sok vallalatnal luanyzik ez a szemlelet, amely az alkalmazas bizonyos reszeit ktilonvalaszqa a konnyebb kezelhetoseg erdekeben, es lehetove teszi, hogy a csoportok, illerve az egyes fejleszt6k a jobbitasra szorul6 retegre osszpontositsanak. Ez a rnegkozelttes nem csupan a fejlesztocsapatoknak rendkfvul elonyos, hanern minden olyan onallo fejlesztonek fontos, aki az alkalmazss osszes elemen dolgozik. Ezzel a szerkezettel az egyes fejlesztok az alkalmazas bizonyos retegeire osszpontosfthatnak, anelkul, hogy erintenek

a szornszedos retegeket vagy m6dositaniuk kellene azokat.

Az XML formazasa egyszeru, de a rnegoldasok tervezesekor figyelembe kell venni nehany fontos alapelvet Kepzeljuk el, hogy az e-mailek adatait oJyan szerkezerte kell formalni, amely egy Ajax motoron keresztulIekerhetc, es ugyfeloldali JavaScript objektumokkal megjelenitheto, A konyvben szereplo peldahoz eppen iJyen szerkezetet keszitunk rnajd, amelynek tervezesekor erdernes szern eldtt tartani, hogy az alkalrnazasban esetleg tobb objektumban, illetve heJyen hasznsljuk majd, ezert a lehet6 iegmagasabb elvonatkoztatasi szmtre van szukseg .. Eloszor a szerkezetet alkoto f6 elemeker hatarozzuk meg.

Elemek

Az XML elemeeneh nevezeu egyedi cfrnkekbdl all, arnelyek meghatarozasa a webalkalrnazasok tervezesi szakaszaban tortenik. Az alkalrnazasban hssznalt barrnilyen never, erteket vagy adattipust jelolhetnek, Az XMl-szerkezetek letrehozasakor mi magunk vagyunk

az alkalrnazas tervezdi, mi dontjiik el, hogy milyen adatokra van szuksegunk bizonyos egysegek kepernyon val6 megjelenitesehez, vagy hogy egy adott felhasznalol muvelet milyen valaszr eredmenyezzen

Fontes, hogy a szerkezetek elvonatkoztatasi szintje a lehet6 legmagasabb maradjon, azaltal, hogy az elemeket nem a celalkalmazasrol fuggoen nevezzuk el, de erre gyakran nines lehetoseg. Ilyen esetekben nem szerencses, ha kulon idot szanunk ana, hogy az XMlszerkezet elvont legyen, mert lehet, hogy nines is szukseg az XML-adatok ujrahasznosltasara az alkalrnazas kulonbozd reszein. Mindamellett az e-mailes XML-mintapeldiiban lehetseges az elvonatkoztatas, es az alkalrnazas mas teruletein vegzunk is ujrahasznositast.

Az alabbt XML-formatum hasznalhato, de nem kifejezetten b6vitheto, illerve ujrahasznosfthato megoldas.

<categories> <From!> <Subject!>

<Date!>

</categories>

Ahhoz, hogy az alabbi kategoriak elvontak rnaradjanak, az elemek nevet category-ra valtoztaqu k:

3.1. k6dsz6veg Elvontkateg6rialista (.xml)

<categories> <category>From</category> <category>Subject</cetegory> <cetegory>Date<!category>

<!categories>

Ez a lehetoseg olyan rugalmassagot biztoslt, ami megkonnyiti a tovabbi kategoriak hozzaada sat. Az utobbi megoldas szamos okb61 meretezhetobb, az egyik fonros, megjegyzend6 szempont az, hogy az XML-adatok szerkezetenek megvaltoztatasa nelkul adhatunk a listahoz uj karegoriakat. Ezert olyan rugalrnas es jobban b6vithet6 ez a rnegoldas, mint az e16- z6 peldae. Ezen felul, ha objekturnokat hozunk letre az adatok megjelenltesehez, az Dj elernek kezelesehez nem kell tovabbi elemzc es megjelenit6 kodot Irni. Ezert fontos, hogy olyan elvont szerkezetekkel epitsuk fel a rnegoldasr, arnelyek rneretezhetok es konnyen atultethetdk mas alkalrnazasokba vagy objekturnokba .. Kepzeljuk el peldaul, hogy ketfelekeppen kell megjelenlteni ugyanazt a kategorialistat, mondjuk adatracsban es e-mail elonezetben. Mindket objektumnal hasznalhatjuk ugyanazt az elemhalmazt, ami kikuszoboli az alkalrnazas kodjaban fellelhet6 ismetlodeseket.

Igaz, hogy az XML-t elemek alkoqak, rnegsem lehet barrnit megvalositanl kizarolag elernek alkalmazasaval, Tekintsunk at a jellernzdket, es hogy a segitsegukkel mikent lehet tovabbi inforrnaciokat ruzni az XML-adatokhoz.

Jellemz6k

Az XML-jellemz6k olyan kiegeszftd tulajdonsagok, amelyeket az elernekhez adva tovabbi,

a szerkezetre vonatkozo informaciokat adhatunk meg. Vegyti.k az e-mailes pelda egy e-mail elernet. Az elektronikus levelek 5ZamOS jellemzovel rendelkeznek, peldaul azzal, hogy milyen esemenyt valt ki a level kijelolese, vagy egy ikonnal,. ami mondjuk egy zart vagy nyitott borftek, att61 filgg6en, hogy a leveler elolvastak-e, Ahhoz, hogy XML-ben jelenltsuk meg az elektronikusleveleket, olyan elemcsoportot hozunk letre, arnelybol kesobb objektum- vagy tombgydjterneny hozhato letre az ugyfeloldalon tortena elernzeskor, Az eserneny es az ikon jellemzok hozzaadasara itt kerul sor, A jellemz6ket egyszertien lehet az elemek-

hez adni, Vessunk egy pillantast a 3.2. kodszovegre, hogy rnegertsuk, hogyan adjuk majd az eserneny- es az ikonjellemzdket az XML-elemhez:

3 .. 2. kodszovsa EJemek elvont listaja (email.xml)

<items action~"alert('Grace Hopper');" icon~"img/mail.gif·> <item><! (CDATA(Grace Hopperll></item>

c i t em» e ! [CDATA «b>BUG Found</b> II ></ item> <item>2006-03-31 09:27:26</item>

</items>

Van nehany problema, arnelyekkel nagyon fontos ttsztaban lennunk a jellemz6k hasznalataker, kulonosen a nagy alkalmazasoknal, ahol egy tervezeskor vetett hiba nagy karokat okozhat a bovlteskor. A jellemz6k egyik legnagyobb problerna]a, bogy egyetlen jellemz6be nem lehet cobb erteket illeszteni. Ez olyankor okozhat gondot, ha kesobb ugy dontunk, hogy egy korabban jellernzokent meghatarozort elemb61 tobb peldanyra van szukseg Ilyenkor minden olyan helyen modosftasokat kell vegeznunk (sajat magunknak vagy a fejlesztotarsaknak), aho1 a jellemz6kre hivatkozunk.

Egy masrk fonros problema - arnelyre a kovetkezo reszben rnegoldast talalunk - a HTML hozzaadasa az XML-hez. A jellemzokhoz nern adharunk HTML-t, men ez ervenytelen szerkezetet eredmenyezne. XML-szerkezetekhez csak az elerneken belul adharunk HTML-t. Sokkal biztonsagosabb elernet hozzaadru, mint [ellernzot, mert ha kesobb eszreveszunk egy hibat, ahol nem a HTML~nek megfelel6en forrnaztuk az elernet, ut6lag barmikor ujraformazharjuk ugy, hogy HTML-t fogadjon, es ez nem utkozik semmilyen k6ddal, ami esetleg az elemre hivatkozik. Ha az elemzest vegzo prograrnozasi nyelv altal olvashatoan es az XML ervenyesseget betartva szeretnenk HTML-t adni az elernekhez, CDATA cirnkeker keJl illeszteni az elerncfmkekhez.

CDATA

A CDATA hihererlenul hatekonnya teszi az XML-t - es ezaltal az azt hasznalo webalkalrnazasokat -, rnivel lehetove teszi, hogy HTML~t adjunk az elernekhez. A HTML segitsegevel ezutan formazott adatokat [elenithetunk meg, kozvetlenul az Ajax-alkalrnazas ugyfeloldalan szerep16 DOM-e1emekben. Arnikor az alralunk hasznalt prograrnozasi nyelv elemzi az XML-t, az elemcimkek kozotti ertekeket is elemzi, A kovetkezo peldaban egy <items> elernbe agyazott < i, tern> e!emcsoportot lathatunk:

<items action~"alert('Grace Hopper');" icon="img/mail.gif'> <item>Grace Hopper</item>

<item>BUG found</item>

<item>2006-03-31 09:27:26</item>

</items>

Az egyrnasba agyazott elemeket az elemzonek reszelemekre kell bontania ahhoz, hogy

a prograrnozasi nyelv mondjuk gyerrnekcsomopontokkent ertelrnezze azokat, Ez azt jelenti,

hogy nem lehet HfMl-cimkeker agyazni az XML-elemekbe, men az elemz6 nern HTML~ cimkekkent, hanem a szuloelern beagyazort vagy gyermekelernelkent ertelmezi ezeket - ezaltal az XML ervenytelenne valik, ami elemzesi hib:.'tt vagy nern vart eredrnenyt idez elo,

Az alabbi XML-t larva az elemzo a HTML "felk6ver" dmkejet «/b» XML-elemkem ertelmezi, rnert nern HfMl-clmkekkent, hanem beagyazott XML-cimkekkent latja a felkover clmkeket:

<item><b>BUG Found</b></item>

Ahhoz, hogy HTML-t adjunk az XML-elemhez, CDATA-t kell hasznalnunk. Az XJ'I1L-elemz6k nem elernzik az olyan adatokat, amelyek kozvetlenul ezeket a cimkeket kovetik, fgy ervenyes rnarad az XML-szerkezet es egyuttal az oldalon megjelenfteni kivant HTML is. Az alabbi k6dban ervenyes XML-t latharunk, a CDATA segitsegevel beagyazort HTMLcimkekkel.

<item> <! [CDATA[<b>BUG Found</b>] J ></item>

Amikor az ugyfeloldali parancsnyelv - esertinkben a ja vaScript - elernzl ezeker az adarokat, a HTML ugy kepez6dik le, ahogy a clmkek kozon szerepel, A BUG Found szovegertek peldaul felkoveren jelenik meg a grafikus feluleten, ha az adatot beillesztjOk a dokumenturnba. Ezt ugy tehetjOk meg, hogy a DOM segftsegevel egyszenlen kijelolunk egy H'l'Ml-clmket, rnajd az erteket osszekapcsoljuk a JavaScript bels6 innerHTML tulajdonsagaval, vagy

a docurnen t . WI" it e ( ) ; alkalrnazasaval kozvetlenul arra a helyre irjuk az erteket, ahova a kodsort helyezzuk. Most pedig melyedjunk el jobban a valasz elemzesebent

Az XML elemz6se

Amikor az XML-ben hasznalt formazasr es cimkeneveket tervezzuk, tobb dolgot is lontos szem elan tartani. AltaHiban hasznos peldaul, ha egyedi neveket adunk a fajlban kulonbozo szinteken elhelyezked6 elemeknek, Igy elkerulhetjuk a J avaScript bels6 getEl emen t sByTagName tagfuggvenyenek hasznalatakor ad6d6 elernzesi problema kat. Ez a fuggveny

az osszes altalunk meghatarozott neva elem tombjet adja vissza, es nem figyeli, bogy ezek milyen szinten helyezkednek el. Az egyik hiba, ami ebb61 szarmazhat, az, hogy a kOJ6nb6za szinteken talalhato, nern osszetartozo errekcsoportok egyetlen tombbekertilnek, amely nem a.brazolja az adatok megfelel6 helyet, es ez elemzeskor remalomma valik szarnunkra, illerve a fejleszt6tarsak szarnara. Leteznek modszerek az ismetlad6 nevekkel rendelkez6 beagyazou cirnkeket hasznalo adatok elernzesere, peldaul a childNodes tulajdonsaggal torten6 kijeloies, de ez nehezkes, es hosszabba teheti a fejlesztesi folyamatot, Azt is megtehetjuk, hogy olyan objektumot hozunk letre, amely meghatarozott elerneket meghatarozott szlnteken, nevek szerint elemz6 tagfuggvenyekkel rendelkezik, ahogy mas nyelvekben az XPATH, vagy jellemz6k segftsegevel kulonboztequk meg az azonos newel rendelkez6 elterc csomoponrokat. A mi celjainkhoz azonban eleg, ha egyszeruen ugy hatarozzuk meg a szerkezetet, hogy ne kelljen a fenu nehezsegek miatt aggodni.

Az XML kulonbozo nyelvG kodokkal valo elernzesehez leteznek teljesen szabvanyos modszerek, az XMlJavaScriptteJ valo elernzese azonban kicsit mas. Mint azt korabban ernlirettuk, a JavaScriptben letezik egy getElementsByTagName neva beJs6 tagfuggveny,

arnely kozvetlenul nev szerint kepes kijelolni egy elerncsoportot, es lehetove teszi a hozzaferest az elem-, illetve jellernzoertekek egyszenf elemzese erdekeben. Ez a fuggveny egyetlen elernet vagy elemcsoportot ad vissza a parameter altai rneghatarozott cirnkenev alapjan, ahogy az alabbi peldaban:

response.getElementsByTagName('items') ;

Amikor a fuggveny egy elemcsoportot talal, a gyermekcsom6pontok tornbjet adja vissza, arnelyet elemezni kell ahhoz, hogy megkapjuk a bels6 csomopontertekeket, Ha ezr az eljarast akarjuk alkalmazni az elernzesben, ugyelni kell, hogy helyesen jeloljuk ki az XHR objektumot a valasz elkeszulte utan. A 3.3. kodszovegre pillantva azt a kesz XML-mintat latjuk, amelyet majd elernzesi peldakent hasznalunk.

3.3. k6dsz6veg Az. e-mail XML fajljanak vegs6 valtozata (email.xml)

<?xrnl version""l.O" encoding="iso-8859-1"?> <data>

<categories> <category>From</category> <category>Subject</category> <category>Date</category>

</categories> <row>

<items action:"alert('Grace Hopper');" icon="img/mail.gif"> <item><! [CDATA[Grace Hopperll></item>

<item><! [CDATA[<b>8UG Found</b>]J></item> <item>2006-03-31 09:27:26</item>

</items> </row>

<row>

<items action:"alert('Pi Sheng');" icon:"img/mail.gif"> <item><! [CDATA[Pi Sheng]]></item>

<item><! [CDATA[Movable type]]></item> <item>2006-01-15 12:32:45</item>

</items> </row> </data>

--------

Az elemzofuggvenyek kiprobalasahoz olyan HTML fajlt kell letrehozni, amelyben ket hiperhivatkozas talalhato: az egyik egy XML fajlt ker valaszkent, a masik pedig egy J50N fajlt. A 3.4. kodszoveg azt a HTML indexfajlt tartalmazza, arnely a kerelrnet indit6 hiperhivatkozasokat tartalmazza:

3.4. k6dsz6veg Az. XML as a JSON karelemminta indexfajlja (index.html)

<html> <head>

<title>The Response</title>

<script type="text/javascript" src:'javascript/ajax.js"></script> </head>

cbody>

ca href"" javascript :makeRequest (' services/email, XJlll', .. onXMLResponse);">XlTIlc/a>

&nbsp; I &nbsp;

ca hr e f,," j eve scr rpt . makeRequest (' aerv i cea lemail , j s ' ,

.. onJ SONResponse) ; '> j sen-e / a > cbr/>chr noshade="noshade"> cdiv id="loading'>c/div>

cdiv id='body">c/div>

</body>

c/html>

Lirhatjuk, hogy Ebben az allomanyban rnindossze ket hlperhivatkozas talalhato, arnelyekre kattinrva kerelmet inclitunk a 2, fejezetben letrehozort makeRequest tagfuggveny segitsegevel, Az egyetlen kulonbseg az, hogy most van egy valtozo visszahiv6 fuggvenyunk is, ami Iehetove teszi, hogy retszes szerinti visszahivo fuggvenyt adjunk at, hogy kedvunk szerint, egy bizonyos kerelern alapjin vegezzuk az elemzest, Ket div cimke is rendelkezesre all a ktilonbozo adatok megjelenitesere. az egyik cfrnke id (azonosiro) erteke loading (toltes), a mas ike body (torzs), A loading diva keszenleti allapot ellenorzesekor visszaadort betoltesi uzenethez szukseges, a body di v pedig a valasz elernzese utani tenyleges adatmegjelenitesre szolgal, Az adatok tetsz61egesen formazhatok: az egyszenJ adatlistatol kezdve egy rmfveleri adatokat tartalmaz6, XHTML-iel formazott GUI-ig barrnilyen formaban megjelenitl1et6k. Az XML"valasz formazasa el6tt meg kell adni a kerelernben meghatarozott visszahiv6 fuggvenyt, Peldankban egy onXMLResponse neva fuggvenyt adunk az indexbe betolton ajax. js-hez, ellendrizzuk a keszenleti allapotot, majd az XHR responseXML rulajdonsagaval jeloljuk ki az XML-adatokat (lasd a 3,5, kodszoveget),

3,5. k6dszoveg VlllaszfQggvlmy letrehozasa €IS a keszenleti allapot ellen6rzese (ajax.js)

----

function onXMLResponse() {

if (checkReadyState (request, 'loading') "" true) {

var response" request,responseXML,documentElement; IIItt t6rtenik az elemzes

I

I

A keszenleti allapot ellenorzesevel ket dolgot teljesitOnk: eloszor ellencrizzuk a kerelern allapotat, hogy kideritsuk, befejezodon-e a toltes, illetve keszen all-e az elernzesre, masodszor pedig atadjuk a div azonosit6t a keszenleti allapot uzeneteinek az innerHTML tulajdonsaggal torteno megjelenitesehez. A 2,1, tablazarban felsorolt rulajdonsagok kozul kett6t hasznalhatunk az adatok XHR-rel torteno kijelolesehez: az egyik a responseText, a masik a responseXML. A responseText rulajdonsag a kiszolgalorol kapott valasz karakterlanc-

valtozatat, a responseXML tulajdonsag pedig a kiszolgalo valaszanak DOM-megfelel6 dokumentumobjekrumat adja vissza. Ebben az esetben a responseXML tulajdonsagot alkalrnazzuk, mivel DOM-megfelel6 objekrumra van szuksegunk az XM:l-valaszhoz, hogy rnegkezdhessuk az elernek ertekeinek elemzeset, Eldszor az XMl fajl kategoriaertekeit elernezzuk, majd az innerHTML rulajdonsagon kereszrul atadjuk ezeket a body div-nek, a 3.6. kodszovegben Iatharo rnodon,

3.6. k6dsz6veg Kateg6riaertekek kigyCjtese az XML-b61 (ajax.js)

I/Kategoriak

document. getElementByld ( "body") . innerHTML = "- - - - - - - - - - - -<br I>" ; documen t . get Elemen t By Id ( • body:") . i nnerHTML + = "<b>Ca tegor i e s-c 1 b» -cbr I >" ; document. getElementByld ( "body") . innerHTML + = "- - - - - - -- - - - - cbr I >" ;

var categories = response.getElementsByTagName('category'); for (var i =0; i<categories. length; i ++)

{

document. getElementByld ( "body" ) . innerHTML += .. response.getElementsByTagName(

.. 'category') [il . firstChild.data +"</br>";

Az egyes kategoriak kijelolesehez a getElementsByTagName tagfuggvenyt kell alkalmaznunk, es a category erteket kell atadni parameterkent, lgyegy kategoriatombot kapunk eredmenyiil, amelynek elerneit egyenkent a body d i v-hez adhatjuk. A kategoriak hozzaadasakor az osszes cimkekben szerepl6 adator kijeloljuk, hogy minden elem tenyleges erteket rnegjelenitsuk,

A kategoriak rnegjelenftese utan tovabblepherunk az XML item (elern) cfmkeire. Ezeket kisse elteroen elernezzuk, a szulok, vagyis a row (sor) cimkek kijelolesevel, arnivel egy sorokb61 allo tombot ka punk. Ezutan a sorokat bejarva a J avaScript belso getA t t r i bu t e tagfuggvenyenek segltsegevel az i terns cimkekben szerepl6 act ion (muvelet) es icon (ikon) jellemz6ket [eloljuk ki. Miutan befejeztuk a jellernzoertekek di v-be inisat, ona.l16 elerneket jelolhetunk ki az egyes sorokban. Ezt ugy hajtjuk vegre, hogy ket for ciklust agyazunk a soroknal hasznalt for ciklusba, ezaltal egy harornretegu ciklust kapunk,

Az egyik ciklus az items dmke, a masik pedig az egyes item cirnkeken belul szereplo csornopontertekek bejarasara szolgal, a 3.7. kodszovegben lathato m6don.

3.7. k6dsz6veg Elemertekek kigyCjtese az XML-b61 (ajax.js)

IIElemek

document. getElementById (' body") . innerHTML + = "- - ~ - -- - ~ - - - - <br I>" ; docurnent.getElernentByld("body") .innerHTML += "<b>Items</b><br/>"; document. getEl ementById ( "body·') . innerHTML += "- - - - - - - - - - - -xbr' I >" ;

va r row = response. getElementsByTagName ( , row' ) ; for (var i=O; i<row. length; i ++)

var action "

- response .getElementsByTagName (' items') [i I .getAttribute (' action') ; var icon "

-response. getElernentsByTagName ( , items' ) [i I . getAt tribute ( , icon' ) ; document. getElementByld ( • body" ) . innerHTML ... "

_ action ... ·cbr/>· ... icon ... ·c/br>·;

var items" response.getElementsByTagName('items') til .childNodes; for{var j"O; jcitems.length; j ... +)

(

for(var k"O; k c i t ems Lj I .childNodes.length; k++} (

document.getElementByld(·body") .innerHTML ... =

- i terns (j I . childNodes (k I . nodeValue + "" /br>" ;

document. getElementByld ( .. body" ) . innerHTML +" "-- - - - - -- - - - -xbr /:>. ;

A kert Xtvl.L elernzese rneglehetosen egyszeru, ha tudjuk, hogy a kiszolgalo valasza milyen formatumban varhato, Ha az e[oz6 peldavalaszban nem rudruk volna, mire szarnitsunk, kezdetnek a responseText tulajdonsag alkalmazasaval karakterlanckent megjelenithettuk volna a szerkezetet, hogy megfejtsuk, milyen crmkeket kell kijelolni:

function onXMLResponse () (

if (checkReadyState(request, 'loading') == true) (

var response" request.responseText; alert(response);

Igy a teljes XML-szerkezetet egy figyelmeztet6 uzenerben kapruk volna meg. Ezutan mar meg lehet nezni a szerkezetet, es elIehet donteni, hogy mit akarunk elemezni a responseXML tulajdonsag segirsegevel.

Lathatjuk, hogy az Xtvl.L gyakorlaulag barmilyen adatszerkezetet kepes megval6sitani. es valojaban az Xtvl.L-t olvaso objektumokon rmilik, hogy valarni hasznosat kezdjenek vele. Vizsgaljuk meg, hogy ehhez kepest milyen a )SON, es hogy milyen e16ny6ket nyujt

a valaszok formazasakor.

JSON

A )SON, azazJavaScript Object Notation (JavaScript objekrurnjeloles) adatcsere-formarum egyre szelesebb korben elfogadott, mint az Ajax-alkalmazasok egy lehetseges forrnaruma. Lenyegeben egy tarsitasos tomb vagy hasitotabla, attol ruggoen, hagy melyik programnyelvben mozgunk a legotthonosabban. Ez azt jelenti, hogy a nevek, illerve clrnkek erte-

kekhez rendel6dnek egy tombszerkezetben vagy vesszokkel tagolt listaban, A:z. egyszerG nyelvtannak es a JavaScript szabvanyos ugyfeloldali parancsnyelvkent t6rteno atverelenek koszonhetoen ez a formaturn az Ajax-alkalrnazasokban hasznalt adatformaturnok kozott felveszi a versenyt az XML-Iel. Ezen kivu I a JSON-e1emzest tamogatja a JavaScript eval tagfuggvenye, ami rendklvuli m6don megkonnyiti az elemzest, ha az Ajax-alkalmazasunkban hasznaljuk Vannak azonban buktat6i is: az eval alkalmazasa rniatt nagyon lelassulhat

az elemzes, es ami meg fontosabb, az eval a biztonsag szernponqabol nagyon veszelyes lehet, Ez szerencsere nem jelenti azt, hogy a JSON kiesik az Ajax adatcsere-formarumainak versenyebol, csupan az a lenyeg, bogy kortlltekintdbbnek kell lennunk, amikor ezt valasztjuk adatforrnarumkent. Tobbek kozott ugy leherunk eldvigyazatosak, ha titkosltott jelszavakat adunk a kerelrnekhez, ahogy azt a 23. fejezetben majd lathatjuk,

Most, bogy mar rendelkezunk nerni ismerettel a JSON-r61, lassuk, hogy milyen nyelvtant kelt kovetnunk a szerkesztesekor,

A JSONnyeivtana

AjSON nyelvtana rendkivOl egyszerti, es igazolhat6an konnyebben kezelheto, mint az XML-e. Az XML az elemek isrnetlodese miatt meglehetosen nehezkes sok adat kezelesenel, ezert ilyenkor a jSON remek valasztas lehet. A jSON nem szabvanyos ada tcse re-formatum , de a sok rende!kezeSf€ al16 elernzo mian jarhat6 utat jelent, A http://www . j son. org clmen szinte az osszes JSON-elernzo fellelheto, de ha nem talalunk az adotr nyelvhez tartozo elemz6t, k6nnyen Irharunk egyet, hiszen a nyelvtan elernzese nem t61 nehez.

A j50N nyelvtana objektumkozponni szernlelettel vizsgalva konnyen befogadhat6.

A ]SON fajlok szerkezete megfelel a JavaScript-objektumokenak, abbol a szernpontbol, bogy egy fajl tobb objektumb61, tombb61, karakterlancbol, szarnbol es logikai ertekb61 allhat. A 3.1. tablaza t ]SO N- kent formazotr adattlpusokat sorol fel.

Karakterlanc

"icon": "img/mail.gif"

Szarn

"mynumber": 100

Logikai ertek

"myboolean": true

Tomb

"items" :

[

{

"act ion": "alert { . Grace Hopper');", "icon": "img/mail.gif",

"item": ["Grace Hopper", "<b>BUG Found-c z b»v , .. "2006-03 -31 09: 27: 26" 1

"action": "alert('Pi Sheng');", "icon": "img/mail.gif",

"i tern": I" Pi Sheng"" "Movable type", - "2006-01-1512:32:45"1

Objektum

"categories":

"category": [" From", "Subject", "Date" J

Az egyesJSON-adattipusokat egy nev vagy egy cimke jeloli, arnely Ulan kenosponr all. Csak az ertekek valtoznak tipusonkent. Az egyszertfbb tipusok egyertelrrnlek. a karakterlane ertekeket karakterlancok jelolik, a szarnokat szarnok, a logikai ertekeket pedig a true (igaz) va,gy a false (ertek), A tornbok es az objektumok bonyolultabb adatripusok. A tomboket szogletes zarojelek kozott a1l6, vessz6kkel tagolt lista kepviseli, A]SON-objektumok barrnilyen adatripus tulajdonsagalt tartalrnazhatjak - ezek kapesos zar6jelek kozott allnak, ugy, ahogy mas nyelvekben az osztalyokat formazzak, Annyi a kulonbseg, hogy itt nem adunk never a f6 szerkezetnek.

A JSON haszn61ata

A ]SON nyelvtananak megertese utan a forrnazas meglehetosen egyszerrl. Ha nagy menynyisegu adattal dolgozunk, erdekes osszehasonlltani a ]SON es az XML formaturnot, mert

a JSON vegul kisebb adatszerkezetet eredrnenyez. Ebben a reszben atalakitjuk az XML resz peldait, es a ket formatumot osszehasonlirva rnegnezzuk, bogy meret es olvashatosag szernpontjabol mennyire ternek el egyrnastol. Az osszehasonlitasok elvegzese utan a kovetkez6 reszben a]SON-adatszerkezetek elernzesevel foglalkozunk. A 3,8 kodszoveg adatszerkezete az e16z6 reszben szerepl6 XML fajl atalakiton valtozata.

3.8. k6dsz6veg A kesz JSON mintatorrnaturn (email.js)

"data" :

(

'·categories" :

{

"category': ["Prom", • Subject", "Date" I

I,

"row":

"items·:

"action": "alert ('Grace Hopper');", "icon":' "img/mail. gif",

"item": ["Grace Hopper", "<b>BUG Potmd-c/ bo " . "2006-03-31 09:27:26"1

), (

"action'" "alert (' Pi Sheng');", "icon": "img/rnail. gif',

"i tern": [" Pi Sheng", "Movable type", "2006-01-15 12:32:45"J

Lathatjuk, hogy ez sokkal kevesebb, mint az XML valtozatban, mert a cimkek az XMLszerkezettol eltercen itl nern ismetlodnek feleslegesen, Ne feledjuk, hogy ez a fajl sokkal tornorebb is lehet, csak a jobb olvashatosag kedveert jelenitettuk meg igy. A]SON adatszerkezet rnegkozelitoleg 200 karakterre] rovidebb: osszesen 316 karakterbol all, mig

az XML formaturn 519 karakter hosszu - ami igen nagy kulonbseg, Ahogy az alkalmazasban szerepl6 adatok sokasodnak, ez savszelesseg-problernakhoz vezethet, de ahogy korabban emlitettuk, a JSON-nallassabb lehet azugyfeloldali elernzes. VegGl el kell donteni, hogy melyik forma tum hasznalhatobb az adott alkalmazasban, illetve hogy szamunkra rnelyiket konnyebb elernezni es irni.

A JSON elemzBSe

A JSON XHR-b61 szarrnazo valaszkent val6 elernzese elter az Ajax-szal hasznalhato osszes tobbi adatcsere-formatum elemzesetol Az XML-nel alkalmazott responseXML tulajdonsag helyett a responseText rulajdonsagot kell hasznalni. Ezt a tulajdonsagot rendkivul egyszenf sima szoveggel vagy tiszta XHTML-lel alkalmazni, mert egyedtil ezt hasznaljuk a valasz ertekekent, ahogy a kovetkezo peldaban is:

document.write(request.responseText) ;

A responseText tulajdonsag]SON-nal t6rten6 alkalmazasa szinten egyszertl, csupan annyi a kulonbseg, hogy ki kell ertekelni ahhoz, hogy olvashato legyen az elernzeshez. A valasz kiertekelesevel lenyegeben letrehozzuk az adat javascript-objekrumat, arnelyet azutan al. ugyfeloldalon a GUI megjelenitesi adataikent hasznalhatunk, Azadatok elemzesehez eloszor letrehozzuk a visszahlvo fuggvenyt, ellenorizzuk a kerelem keszenleti allapotat, majd kiertekeljuk a responseText-et (lasd a 3.9. kodszoveget),

3.9. k6dszoveg Valaszobjektum letrehozasa (ajax.js)

function onJSONResponse() {

if (checkReadyState (request, 'loading') "" true) (

eva 1 ( "va r response " ( .. + reques t . responseText +" ) • ) ;

Ahogy azt a fejezet XML-lel foglalkozo reszeben targyaltuk, a checkReadyState tagfuggveny ket celra hasznalhato. a vslasz teljes betoltodesenek ellenorzesere, valamint betoltesi uzenet megjelenftesere a felhasznalo szarnara, barrnilyen pararneterkent rneghatarozort HTML-elemben. A valasz teljes betoltodese utan az XHR-b61 szarmazo responseText kiertekelesevel kezdjuk az elernzest, valamint letrehozunk egy response neVCI objekrumot

az eredrneny szamara. Ez az objektum ezutan kepes barrnilyen, a kiertekeles vagy az adatok elernzese soran hozzaadott erteket kijelolru. Kezdjuk azzal, hogy kijeloljuk az adatokbol

a kategoriakat, rnajd az indexfajlban szereplo body div-hez adjuk azokat (lasd a 3.10. kedszoveget).

3.10, k6dszQveg A JSON-kateg6riak elemzese (ajax.js)

//Kateg6riak

document. getElementById ("body") . innerHTML = ,,----- -------<br/>'·; document.getElementByld("body·) .innerHTML += "<b>Categories</b><br/>";

document. getElementsyld ( "body" ) . innerHTML +"= .. - - - - - - - - - - - - cbr / >" ;

for(var i in response.data.categories.category) (

document .getElementByld( "body") . innerHTML +=

... response. data. categories. category [i I +" <br I >" ;

Lathatjuk, hogy rniutan JavaScript-objektumma alakitottuk az adatokat, mar konnyil kijelolni azokat A rulajdonsagertekeket egyszerrlen, pont [elolessel lehet elerni. A 3.10. kodszovegben olyan kategoriakat [elolunk ki, amelyek lombok, mivel a category rulajdonsagban tobb ertek szerepelt. A kategoriatomb kijelolesehez pont jelolest alkalmazunk, amellyel sz6 szerint utvonalat rajzolunk a valaszobjekrurn egy adott tulajdonsagahoz

Most, hogy rnegtortent a kategoriak elemzese es a body d i v-ben torten6 megjelenitese, kijeloljuk az elemeket. Ehhez ket for ciklust kell beagyazni, csakugy, mint az XML-peldaban, de a tenyleges ertekek elernzese kisse elter majd a val6di elernek es a jellemzoik eseteben. A 3.11. kodszovegre tekintve rnegerthetjuk, mikent elemezzuk ezeket az adatokat,

3.11. k6dsz.6veg JSON-elemek elernzese

//Elemek

document _ getElementBy Id ( "body" ) . innerHTML += "- - - - - - - - - - - - -cbr / >" ; document.getElementByld("body").innerHTML += "<b>Items</b><br/>"; document. getElementBy Id ( "body" ) . innerHTML += "- - - - - - - - - - - - <br / >" ; forlvar i in response.data.row.items)

(

forlvar j in response.data.row.items[ij) {

document. getElementByld ( "body" ) . irmerHTML += .. response.data. row. items [i] [j I +"<br/>";

document.getElementByld("body") .innerHTML += "------------<br/>";

--------------------------------~-----------------~

Ahogy korabban ernlitetruk, az elernjellernzoket teljesen elte-fo m6don jeloljuk ki, mint az Xlvll-elemzesnel. Egy egyszeru for ... in ciklussal kijelolhetjuk az osszes rulajdonsagerteket egy adott objekrumon belul, Ezuttal az adatgyGjtes ezen modszeret hasznaljuk az elemiellemzok es az elemtombok ertekeinek eleresehez,

A]50N valaszformarurnkent torteno alkalmazasa meg hatekonyabb lehet, ha az adatforrnatumon belul esernenykezeloket hatarozunk meg, arnelyek a dokurnentumra lekepezheto bizonyos objektumtipusokat kepviselnek. Ezt nern targyaljuk reszletesen, de fontos, hogy tudjunk rola, men nagyon hasznos lehet a kesobbi alkalmazasokban, Elegedjunk meg egy peldaval, amely bernutatja, milyen megkozelitesben kell szerkeszteni az ilyen adatokat,

"items"; [

("value": "Read e+ma.i L'". "onc l d ck" ; "displayEmailDetail () "}

Most, hogy b6vebb ismeretekkel rendelkezunk az Ajax-valaszok kezeleserol, osszpontosttsunk a grafikus felhasznaloi felulet C55-sel vagy XHTML-lel tortend letrehozasara, illerve forrnazasara.

A valasz lekepezase XHTML-Iel as eSS-sel

Miutanatvettuk, hogyan lehet adatokat kerni az XHR objekturnmal, rnajd elernezni a valaszt, keszen allunk az adatok bongeszoben torteno lekepezesere es megjelenitesere. Szarnos rnodszer letezik az XHR-valaszokb6J kapott adatok kezelesere, de ebben a fejezetben az XHTML es a CSS alkalrnazasara osszpontosltunk majd. Az XHTML es a CSS lekepezi az adatokat, es megkonnyiti a DOM~n keresznil, javascnpttel t6rten6 rnodosftast. Ez a modszer tokeletes rnegoldast ny(!jt az Ajax-adatok lekepezesere es a konnyen kezelhet6 HTMLelernek Ietrehozasara,

XHTML

Az Ajax-rnegfelelo webalkalrnazasok egyik szepsege az egyszerilseg, amit hatranykent is lehet ertelmezni: a keres6motorok nern kepesek megtalalni az oldalhoz dinamikusan adott tartalmat, mert az nem jelenik mega forraskodban, Bizonyos helyzetekben ez mindenkeppen aggodalornra adhat okot, de a webalkalmazasok keszitesekor nem mindig eel, hogy magan az alkalmazason belul elokeld helyre keruid keresesi talalatokat kapjunk. Altalaban inkabb a fooldalnal vagy egyeb, az alkalrnazasban nem szereplo oldalaknal fontos a rangsor. A legt6bb webalkalmazasnal - tobbek kozott a k6nyvben letrehozott peldaban - a keresomotorokban elert helyezesnek nines jelenrosege .. Az ilyen alkalmazasok legtobbszor szernelyes es vedett adatokat tartalrnaznak, ezert termeszetesen konnyebbe valik a forraskod elrejtese,

Azoknak, akik megszoktak, hogy egymasba agyazott tablazatokat hasznalnak a HTML-ben, furesa valtas lehet, amikor elkezdenek d i.v cimkeket hasznalni. Eldszor talan kisse furesa, de hamar rajovunk majd, hogy a di v cimkek hasznalata hihetetlentil egyszenl, a bongeszo gyorsabban kepezi le azokat, es sokkal kevesebb forraskodra van szukseg, mint az osszevissza egymasba agyazott tablazatoknal. Az a legnagyszerubb, hogy ha DHTML-t hasznalunk Ajax-adatkerelrnekkel egyutt, sokkal konnyebb a kezelesuk, es a stilus sokkal jobban

elkulonul a tartalomtol, ami lenyegesen egyszenfbbe teszi a frissitest. A div cimkeket olyan adattaroloknak tekinthetjuk, arnelyek lehetove teszik, hogy az id (azonosito) es a name (nev) jellernzokon keresztul hivatkozzunk rajuk, igy a tartalrnuk, a helyuk, vagy akar barmelyik tarsitott stilusuk modositasa celjab61 kijelolhetok.

A kapon valaszt tekintve konnyen megallapithatjuk, hogy milyen elerneket kell letrehozru A 3. fejezetbol ernlekezhetunk, hogy a letrehozott XML es JSO fajlok az e-mailekben rnegjel no kulonbozd elernekbol alltak. Ebben a reszben olyan HTML-e1emeket hozunk letre, amelyekben megjelenitjuk az emlitett fajlokbol szarmazo adatokat, A fajlok altai tartalmazott else adatbalmaz a kateg6ria. A kategoriak vegul az elemgytljtemenyekben szereplo elernek szakaszfejlecei lesznek, ezert racsszeni szerkezetre van szukseg az adarok abrazolasahoz es ahhoz, bogy megfeleki adatokb61 a1l6, azonosithato szakaszokka formazzuk azokat Miutan azonositani tudjuk az oldal tartalmat, es ket elkulonuld reszre tudjuk valasztani azt, olyan HTML-elemeket hozharunk letre, amelyek a szerkezetet, illetve

az adatokat tartalrnazzak.

A 3. fejezetben ket tagfuggvenyt hoztunk letre az a j ax. j s fajlban, onXMLResponse, illetve onJSONResponse neven. Ezek a fuggvenyek ugy kepeztek Ie a valaszt, bogy a HTML indexoldal body di v elemeibe helyeztek az adatokat. Ebben a reszben ujralrjuk ezeket

az elemeket, hogy olyan di v elerneket hozzunk letre, ameIyek magukba foglaljak ezeket az adatokat, majd a body div-bez illesztjuk azokat. Ez Iehetove teszi, hogy kesobb CSS-en keresztul stilusokat tarsitsunk az elemekhez. Eloszor megszabadulunk az osszes olyan felesleges k6dt61, arnit a kategoriak es az elernek elvalasztasa celjabol adtunk hozza, mivel a stilusok ezt sokkal kifinomultabban vegzik helyertunk. Egyelore csupan egy helyorzo div elernet adunk a k6dboz egy ikonfejlec helyett, es meg nehany mas div elernet, arnelyekben header (fejlec) id erteket adunk meg, es az XML-, illetve a JSON-valaszok kategoriaibol szarrnazo adatokkal toltjuk fel azokat. A konyv egy kesobbi reszeben megtanuljuk, hogyan kell a DOM-on keresztul dinamikusan letrehozni HTML-elemeket, de most meg egyszertfbben jarunk el, es az elozoleg letrehozott di v elernekhez adunk tartalmat:

XML

var response = reguest.responseXML.documentElement:

document. getElementById ("body") . innerHTML " "<div id,,' icon' ></div>": var categories" response.getElementsByTagName('category');

for (va r i ,,0; i cce t sqor ies .length: i ++)

(

document.getElement8yld("body") .innerHTML +=

... "<d i v id,,'header'>&nbsp;"+ response. getElements8yTagName ( 'category') ... til .firstChild.data +"</div>";

JSON

eva 1 ( • va r response " (" + r eque s t . responseText +" ) " ) ;

document. get El ementByld ( • body") . innerHTML ,,' <di v id,,' icon' >< I di v>" ; for(var i in response.data.categories.category)

(

document.getElementById("body") .innerHTML +" "<div id,,'header'>&nbsp;" ... .. response.data. categories. category [i] ... "<div/>";

Lithatjuk, hogy az ikon es a kategona adatait egyszertfen betokozzuk ezekbe a div cimkekbe.amelyeket kesobb a CSS segitsegevel srilussal latunk el, es elvalasztunk azoktol

az elemadatoktol, arnelyeket ezekkel a kategorlakkal tarsitunk. Mas szoval gyakorlatilag racsot keszitunk a valasz megfeIel6 adatatbol, Most, hogy Ietrehoztuk a fejlecet alkot6 div elemeket, div elerneket adunk az elemadatokhoz, majd mindegyiket a megfelel6 moveIethez, illetve ikonhoz rendeljuk, Az egyes elernekhez tartozo div cfrnkek pusztan item (eiem) id erteket kapnak, A mtlveletet ugy tarsltjuk az egyes egysegek div cimkejehez, hogy mindegyikhez egyszenien egy onclick (kattintaskor) esemenyt adunk, majd hozzailleszrjuk a mifveleti valtozot, Az ikonok hozzaadasakor csak az egyes elemcsoportok else elernehez akarunk ikont adni, nem minden d i v-hez. Az alabbi kodak az XML- es a JSONvalaszhoz tartozo elernkodokhoz illesztenek div cimkeker:

XML

for(var i"O; i<row.length; i ...... } {

var action "

response. ge t El emen t sByTagName ( , items' ) [i I . getAt t r ibu te ( , act ion' ) ; var icon ,..

.. response. getElementsByTagNarne ( , items' ) [i 1 . getAt tribute ( , icon' ); var items " re spans e . ge t El emen ts ByTagNa.me ( . items' ) [i I . chi 1 dNodes; documen t . get E 1 ementBy Id ( "body" ) . inne rHTML ... =

~ "<div id='icon'><img src=''' ... icon ... "'I></div>"; for (ve r j =0; j -c i, terns. length; j ++)

{

for(var k"O; k<items(jl.childNodes.length; k ... +) (

document.getElementByld("body'") .innerHTML += "<div id='item' .. onclick=,"· ... action +"">&nbsp;"+

.. terns [j I. childNodes (kj .nodeValue + "</div>";

JSON

Most, hogy az XHTML az oldalra ir, ideje felvenni azokat a stilusokat, amelyek kialakitjak a vegs6 elrendezest. Ezt ugy oldjuk meg, hogy CSS-t tarsitunk az elernekhez.

for(var i in response.data.row.items) {

document. getElementByld ( "body") . innerHTML +'" "<di v id,,' icon' ><img - src",'"+ response.data.row.items[ij.icon +"'/></div>";

for(var j in response.data.row.items[i] .item) {

document.getElementById("body"} .innerHTML +'"'

- "cdiv id='item' onclick='"'+

- response.data.row.items[ij .action +"'">"+

- response .data. row. items [i I . item! j I + "</div>"';

ess

Ha az XHTML~t a CS5-sel egyutt alkalmazva kepezzuk le az Ajax-valaszadatokat, elkulonuld retegeket kapunk a k6dban, ami lehetove teszi, hogy az alkalmazas bizonyos teruleteit arielkul frissitsuk, hogy a tobbit barmilyen medon erintenenk. Miutan mar tudjuk, hogyan kell XHTML-kent lekepezni az adatokat ugy, ho~ JavaScripttel di v elemekhez adjuk azokat, hozzalatharunk az oldal dtszitesehez. Ehhez elcszor CSS-osztalyokat hozunk letre, amelyek meghatarozzak az egyes elemek stilusar, ezaltal az egesz olda! kulalakjat. Ahhoz, hogy C55-t hasznaljunk a HTML oldalon, ahhoz eJ6bb be kell tolteni azokat a C55 allomanyokat, amelyek rneghatarozzak az oldal elerneinek stilusar. El6szor hozzunk letre egy 6j fajlt, es nevezzuk el layout. cs s-nek, A 2. es 3. fejezet peldai alapjan a kovetkezo k6dot adjuk

a HTML indexfajl fejlecehez, hogy betoltsuk a C5S-t:

<link href="css/layout.css· rel="stylesheet" type="text/css" I>

Mivel mar azonosirortuk es elhelyezruk az oldal HTML elerneit, tudjuk, hogy milyen elemekhez kell stilust kesziteni. A stflusok letrehozasa el6tt el kell kepzelnunk, hogy milyennek szeretnenk latni az oldal kulalakjar. Ha az oldalkep gondolarban tOrlena megielenitese nem megy konnyen, egy grafikus szerkeszt6ben keszftherunk vazlatot, illetve mintat, Barhogy is erjuk el, ha mar megvan az elkepzeles, elkezdhetjuk a C55-se[ rendezni a.z elerneket. Ebben a peldaban egyszenf racsos elrendezest szerernenk az e-mail adatokhoz, amelyben a cellak fejlece es a cellakhoz tartozo adarok soronkent jelennek meg a fejlecek alatt. A 4.1. abran lathatjuk a racsszerkezetben talalhato adatok vegs6 elrendezeset,

4.1. abra

A oatas» vegs6 rdcsos elrendezese, miusa« CSS-t alkalmaztunk a H7ML-elemekre

Az uj C55 fajlban negy osztalyt hozunk letre, body, header, item es icon neven, Ez az

a negy elem, amelyet az el6z6 resz a j ax . j s f'ajljaban szerepl6 valaszfuggvenyek segirsegevel mar hozzaadtunk a kodhoz, A body d i v-vel kezdve - arnely eleve hozzaadodott

az oldalhoz - egy 570 keppontos width (szelesseg) ertekkel rendelkez6 osztalyt hozunk Ietre. Hz a szelesseg kiegyenlfti azt a margin (szegely) erteket, amelyet a riles minden eleme korul elhelyezunk, de ezt majd akkor reszletezzuk, amikor befejeztuk a header es

az i tern osztaly hozzaadasat, A body osztalyt az alabbi k6d hozza letre:

~body (

width: 570px; )

K6vetkez6 lepeskent letrehozzuk a header di v elem osztalyat. Ha vtsszatekintunk az altalunk kelt XML es )50N fajlokra, latharjuk, hogy harem fejlec es harorn elern szerepel bennuk. Ezeknek a fejleceknek es eiemeknek egymas mellett kellene sorakozniuk, hogy adatsorokat kepezzenek, Ennek rnegvalosftasat egy left (bal) ertekkel ellatott float (lebeges) jeUemz6 hozzaadasaval kell kezdeni, Ez minden header es item cimker balra zar, es ezaltal adatsorokat alkol. Akkor jonnek letre uj sorok, amikor elerjuk a tarolo szelessegenek hatarat, amit a body osztalyban hatarozrunk meg. Egy nyilmuta.t6t is felveszunk, amellyel minden elemet kattinthat6nak jeI6li.lnk. Az alabbi kodot rendeljtrk az egyes fejlecekhez es elernekhez:

IIheader (

float: left;

width: 180px;

padding: IOpx Opx IOpx Opx; background-color, n666; color: nff£;

marg in: lpx;

#item

float: left; width: 180px;

padding: IOpx Opx lOpx Opx; background-color: ~eaeaeal co l or : #333;

margin: Ipx;

cursor: pointer;

A body osztalyhoz rendelt szelesseg befogadja az egyes sorokban megjelen6 harem elem szelesseget es szegelyet, valarnint az ikonok szelesseget es szegelyet. Ha tobb elerner akarnank megjeleniteni egy sorban, egyszenlen arallitanank a tarolo szelesseget, figyelembe veve az elernek szegelyet es egyeb terkozeit, A 4.2. abra betekintest enged a racsban megjelen6 kul6nboz6 elemekbe,

4.2. abra

A rdcsot meghataroz6 HTML-elemek szerkezete

Lathatjuk, hogy a fejleceket es az elerneket hatterszfnnel es benfszinnel formazzuk, valamint nyilmutatot adunk az egyes elernekhez, ami egyertelrrulve teszi, hogy rajuk lehet kattintani. Ezeket az elemeket milliofelekeppen lehet testreszabni: erdernes egy kicsit [atszani es kiserletezni,

Az utols6 elem, amelyhez osztalyt kell letrehozni, az icon elem. Az ikon nagyon kicsi, ezert nines szuksege ugyanakkora szelessegre, mint egy hagyornanyos elemnek - eppen emiatt kell sajat osztalyt letrehozni az ikonok szarnara. Az icon elemet egyarant hasznaljuk helvorzokent a fejlecben az ikonokhoz szukseges hely fenntartasahoz, es tenyleges ikon kent, ami az elemek bal oldalara kerul. A racs osszes elernehez hasonloan ez az elern is a bal oldalra uszik, hogy sorok jojjenek letre. Egyeb altalanos tulajdonsagai is vannak, peldaul szelesseg (width), kitoltes (padding), benlszin (color) es szegely (margin):

heon (

float; left; width: 20px;

padding: 5px Opx 5px Opx; color: ~333;

margin: Ipx;

Most, hogy tudjuk mikent kell adatokat kerni, valaszt fogadni es dinamikus adatokat tartalmaz6 oldalt forrnazni a CSS es az XHTML segitsegevel, eggyel tovabblephetunk, hogy vilagosabb folyamatot alakltsunk ki, arnelyben objekturnokba es egy Ajax-motorba tokozzuk a k6dot. A kovetkezo fejezet elrnagyarazza, hogyan kell objektumkozpontu Ajax-motort letrehozni JavaSeript segitsegevel, hogyan kell hlbamentestteni a kerelmeket es a valaszokat, valamint hogy mikent lehet bovfteni a moron olyan tovabbi objekturnok letrehozasaval, amelyek korszenfve Ajax-megfelel6 webalkalmazasok kesziteset teszik lehetove,

A JavaScript-motor latrehozasa as hasznelata

5. fejezet ObjektumkozpontU JavaScript

6. fejezet A motor elkeszftese

7. fejezet A motor hasznarata

8. fejezet Hibakereses

9. fejezet A motor b6vftese

Objektum:kozpontu JavaScript

Az objektumkozponni JavaScript lerfontossagu a nagyrnerenl Ajax alkalrnazasok epitesehez. Ez a programozasi megkozelttes ujrahasznostthatosagor, meretezhetoseget es rugalmassagot kolcsonoz alkalmazasainknak. Az objekrurnkozponni megkozelites alapot ad az objektumok ujrahasznositasahoz, ami vegso soron csokkenti a szukseges k6d mennyiseget, A k6d mennyisegenek mlnimalizdlasa egyreszt lehetove teszi szarnunkra, hogy gyorsabban hozzunk letre egy alkalmazast, masreszt nagymertekben megk6nnyiti a k6d frissiteset es kezeleset. Amikor objektumkozpontu megkozelftessel keszitunk egy alkalrnazast, akkor bizonyos mennyisegtl tervezesre is szukseg van annak biztositasa erdekeben, hogy az objektumok 6jrahasznosithat6ak legyenek - most es az elore lathat6 jov6- ben is -, az alkalrnazas pedig meretezhetd, tehat b6vithet6, illetve frissftheto. Ezen objektumok letrehozasa nella talan rolzasnak tGnik abban az esetben, ha egy fejlesztd azt gondolja, hogy rovid id6 alatt osszeuthet egy alkalmazast, marpedig eleg gyakran ez

a helyzet. Mindazonaltal, ha elkezdjuk minden alkalmazasunkat ilyen m6don megkozeliteni, akkor hozzaszokunk, hogy 6j szemszogbdl tekintsunk rajuk - a rnernok szernszogebol. Ez lehetove teszi a szarnunkra, hogy objekturnainkat mas alkalmazasokban is felhasznalhassuk, valarnint azt, hogy a k6dot a fejlesztesi idot barnulatosan felgyorsit6 m6dokon tijrahasznosithassuk.

Ez a fejezet talan nem a iegelbGv610bb, es talan felrnerul bennunk a kerdes, hogy miert kell rnegertenunk a JavaScripnel torteno objekturnkozponni programozas (OOP) alapelveit ahhoz, hogy Ajax alkalmazasokat keszftstink. A JavaScript-objektumok Ajax alkalrnazasokban torteno hasznalata nagymertekben leegyszerusiti az adatok kezeleset es az olyan grafikus felhasznaloi feluleti (GU!-) elemek letrehozasat, amelyek atvihetOk az egyik alkalrnazasbol a k6vetkez6be. Ezaltal tobb id6nk marad a webbeJy tervezesere, epitesere es fejlesztesere, vagyakar tij Ajax-6sszetev6k fej I esztesere , ahelyett, hogy ugyanazt a k6dot Irnank Cljra minden alkalmazasban, vagy ugymond "ujra feltalalnank a kereket", Ezert lerfontossagu ezeknek az objektumtipusoknak az ismerete - ez szukseges ahhoz, bogy Ierrehozhassuk sajat egyedi objekrurnainkat, osszetevdinket es akar programkonyvtarainkat.

A tobbi prograrnozasi es parancsnyelvtol eltercen a Iavascriptben tobbfelekeppen is letrehozhatunk objekturnokat. A konyvben ugyan els6sorban prototipusokat fogunk hasznalni valasztort objekturnkozponru rnegkozeliteskent, de Ebben a fejezetben az objektumkonstruktorokr61 is sz6 lesz. Az objekrumkonsrruktorok j6l hasznalharo modszert kinalnak objektumok letrehozasara, es tobbe-kevesbe zokkendrnentesen atultethetok peldaalkalmazasunkba Hasznalhatjuk ezt a megkozelitest a konyv peldaiaban vagy jovobeni Ajax alkalmazasainkban - a valasztas a rnienk.

Objektumkozpontti megkozelftesek

Ahogy korabban mar ernlfteuem, szarnos kulonbozd medon rnegkczelttheto a JavaScripttel tortena objektumkozponru prograrnozas. A kovetkezok barrnelyike alkalmas objekrumok vagy :iilobjektumok letrehozasara:

• Objekturnkonstruktorok

• Prototipusok

• A new rruivelet

• Literalis jeloles

• Tarsttasos tombok

• Jscript.NET

Ezen m6dszerek mindegyike alkalrnas objektumok es alobjekturnok letrehozasara a JavaScriprben, de van, amelyik rugalmasabb a tobbinel. Ez nem azt [elenti, hogy a tobbi modszer oem hasznos - ketsegkfvul vannak olyan helyzetek, ahol egy adott modszer sokkal jobb, mint az osszes tobbi rnegkozelites. Nezzuk meg roviden az egyes megkozeliteseket, es hogy milyen helyzetekben lehetnek hasznosak.

Megjegyzes

Mivel ez afejezet melysegeben vizsgalja az obieksumeonstrahtoroeat es a prototipusoeat, errol a kef m6dszenv1 nem lesz sz6 ebben a reszben.

A new mOvelet hasznalata

A new rmlvelet hasznalata valoszimlleg az egyik legegvszerubb megkozelites objektumok lerrehozasara a JavaScriptben,. rnivel ennek rerrneszetesen ez a nativ modja, Ogy hozhatunk Ietre egy objektumot a javascript natfv new maveletevel, hogy egyszeraen csak vaIasztunk egy never az objektumunk szarnara, es azt egyenertekuve tesszuk a new Obj ect kifejezessel ,

var employee = new Object(); employee.id = 001; employee.firstName = "Kris"; employee.lastName = "Hadlock";

employee.getFullName = function() {

return this.firstName • " • + this.lastName;

Ebben a peldaban egy egyedi objektumot hatarozunk meg, ameJynek neve employee (alkalrnazort). Az objekturn az id (azonoslto), firstName (keresztnev) es lastName (vezeteknev) tulajdonsagokkal rendelkezik, es van egy getFullName nevu fuggvenye, ameJya firstName es lastName tulajdonsagok osszefnzott valtozatat ad]a vissza,

Ez a megoldas sok helyzetben elfogadhato es mukod6kepes, f61eg ha nern tervezzuk tobb peldany letrehozasat az objektumb61. Hatranya, hogy nem ad lehetcseget robb peldany letrehozasara ugyanabbol az objekrumbol, peldaul nem tudnank egynel tobb employee peldanyt letrehozni ezzel a rnodszerrel.

litelilis jelo"s

A literalis jeloles egy bonyolultabb modszer objektumok rneghatarozasara a JavaScriptben, es a JavaScript 1.2 es a kesobbi valtozatok tarnogatjak. Ez a megkczelltes rovidebb modszert ad az objekrumok letrehozasara, ami egyszenlen felepfthetove, de kicsit nehezen olvashatova teszi azokat az egyedi utasitasforma miatt. A kovetkezo peldaban letrehozzuk ugyanazt az objektumot (literalis jelolessel), mint a new muvelet esereben.

employee -= (

id : 00l;

firstName "Kris";

las tName : "Had loc k " ; getFu I1Name : function () (

return this. fi rstName • " " • this. lastName;

alert(employee.getFulIName); II Eredmenye: Kris Hadlock

Ahogy lathato, ezzel a megkozelitessel a Ietrehozas egyszenl, de eleg nehezen kezelhet6- ve valna, ha sok fuggvenyt es tulajdonsagot akarnank felvenni, A felreertesek elkenilese vegett: ez eletkepes megoldas, es nern feltetlenul tanacsolnek el tole senkit. Egyszenlen arrol van szo, hogy en szernely szerint szivesebben hasznalok ismerosebb urasftasformar ..

Tlirsrt6sos tombok

A tarsitasos tombok meghatarozasa ugyanugy tortenik, mint barrnely mas tomb megadasa, de indexkent szarnok helyett karakterlancok szerepelnek, Ez a megoldas leherove teszi

a szarnunkra, hogya tomb egy elernet indexszarna helyett a neve alapjan hivjuk meg,

ami nyilvanvaloan megkonnylti az egyes elemek elereset, Ez hasznos leher, ha egyfajta haslrorerkep-utanzatot probalunk kesziteni, amely nem nativ adartlpus a JavaScriptben.

lrne ennek a lehetosegnek az utasftasformaja:

var employee = new Array(); employees["firstName"] = "Kris"; employees [ "lastName" 1= "Hadlock";

Ahogy lathato, ez a lehetoseg egyszernbbe teheti az egyes elernek elereset, de kepzeljuk csak el, rni lenne, ha tobb alkalmazottat kellene letrehoznunk. Az alaobi peldaban Iatharo, hogy ez mennyire bonyolultta valhat:

var employee = new Array();

employees [OOlj ("firstName") = "Kris"; employees [001) l " lastName" I = "Hadlock";

employees [002) l " f irstNarne") = "John"; employees [002) ("lastName" I " "Doe";

Ez a rnegoldas teljes kaossza valhat, ha sok adattal dolgozunk, es meg kell [egyeznunk a tomb adott elemeinek eleresi utjat. Ezzel egyutt ez a rnodszer nagyon hasznos lehet egy egyedi hasitoterkep-objekturn letrehozasanal, de ezt mindenkinek maganak kell eldontenie.

JScript.NET

A JScripLNET azaltal, hogy k6dunkat egy koztes nyelvre (Intermediate Language, IL) forditja, lehetove teszi szarnunkra on:HJ6 .NET alkalrnazasok letrehozasat, ugyanugy, mintha egy olyan nyelvet hasznalnank, mint a C# vagy a VB.NET. Az egyik nagyszertl dolog ezzel a rnodszerrel kapcsolatban az, hogy lehetosegunk van olyan szigoru adattlpusok es hozzaferes-modosttok hasznalatara, mint a privat es nyilvanos tulajdonsagok, ami rudorn, hogy nagyon idegenul hangzik a JavaScripttei kapcsolatban. A szigoni adattipusok hasznalata javitja a k6d olvashatosagat, es egyszenfbbe teszi a hibakeresest.

A kovetkezo peldaban egy JScript.NET-objektum letrehozasanak utasitasformaja lathato:

<script language="JScript" runat="server">

public class employee (_id, _firstName, _lastName)

private id : String = _id;

private firstName : String = _firstName; private lastName : String = _lastName; private getFullName : Function = function(e) {

return this. firstName + " " .. this .1astName;

</script>

Az objekrumkozpontu prograrnozasi hatterrel rendelkez6 fejleszt6k konnyebben megerthetik ezt a megkozelltest, Mindazonaltal az adartipusok alkalrnazasanak utasitasforrna]a kicsit furcsa, es a fejlesztes szempontjabol korlatozo Iehet az a teny, hogya .NET keretrendszert kell hasznalni es telepiteni, de ez valojaban csak a helyzetunktol fugg.

Most, bogy kicsit megismerkedtiink a JavaScriptben az objektumok letrehozasara szolgalo mas rnodszerekkel, rnegnezzuk azt a ket megkozehtesr, ameJyek szerintem a legnagyobb rugalmassagot blztosirjak ceijaink megvalositasahoz. A kovetkezdket rnegkozelftes lehetove teszi tobb objektum Ietrehozasat azaltal, hogy ujrahasznoslthatosagot kolcsonoz

a JavaScriptnek. Nezzuk meg 6ket!

Objektumkonstruktorok

Az objekrumkcnsrruktorok nagyszertl modot biztosltanak objekrurnok oly m6don valo felepitesere, hogy azok ujrahasznosithatoak Jegyenek anelkul, hogy ujm meg kellene hatarozni egy teljesen uj objekrurnot, amikor az csak kisrnertekben kulonbozik egy masiktol. Ez az objekturnletrehozasi rnodszer lehetove teszi a szamunkra, hogy ujrahasznositsunk egy objekrurnot azaltal, hogy elter6 tulajdonsagertekeket alkalrnazunk ra, es tobb peldanyt hozzunk letre ugyanabb61 az objekrummodellbOl.

P61d6nyok

Peldanyok letrehozasa, illetve egy objektum peldanyosftasa egyszen1en csak abbot ill, hogy vesszuk egy objekrum rneghatarozasat, es tobb objektumot hozunk letre annak mintajara .. Ezek a kii[ona1l6 peldanyok elterd tulajdonsag- es fuggveny-parameterertekkel rendelkezhernek, ameJyek megkulonboztetik oket egymastol. Az objekturnmeghatarozas alapvetoen olyan vazlat, amelynek alapjin a fejleszto tobb peldanyt hozhat Ietre az objekrurnbol. Az objekrum peldanyosiuisakor valojaban tartalmazza az objektum altai meghatarozott osszes tulajdonsagot es fuggvenyt, Ezert, ha van egy employee objekrurnunk egy name (nev) rulajdonsaggal, akkor letrehozhatunk tobb peldanyt, es elter6 neve! adharunk az egyes alkalmazottaknak, Ez a resz bernutatja, hogyan hasznalhaquk az objektumkonsrruktorokat arra, hogy tobb peldanyt hozzunk letre egy objekturnbol, hogy a lehet6 legteljesebb ujrahasznosithatosagot erjunk el webalkalmazasalnkban.

Az objekrumkonstruktorok szabalyos java.Script-ftlggvenyek, arnelyekbe tulajdonsagokat es tagfuggvenyeket agyazunk bele. Peldanyositasa a JavaScript nativ new rntlveletevel tortenik .. Ez a m6dszer nagyon hasonlft a literalrs jelolesre, de az utasitasforma jobban megfelel egy altalanos programozasi modellnek, E[oszor letrehozunk egy egyszertl fuggvenyt, amelyben megadjuk az objektum never. A kovetkezo peldaban egy employee objekrumkonstruktort hozunk letre:

function employee (_id, _firstName, _lastName) (

)

Ahogy lathato, ez egy szabalyos javaScripr-fuggverry, amely harorn pararnetert fogad:

_id, _firstName es _lastName. Ez a fuggveny lesz az objektum hozzaferesl pontja,

az objekturnkozponru prograrnozasban ezt mas szoval konstruktornak, vagyis letrehozofuggvenynek nevezzuk: Ennek a fuggvenynek a never fogjuk az objektum nevekent hasz- 11al11i. Arnennyiben mar epitettunk osztalyokat mas prograrnozasi nyelvekben, gondoljunk ugy erre a megkozelitesre, mint egy olyan osztalyletrehozasi modszerre, amelyben nem hatarozzuk meg az objektumot osztalykent, vagy hogy egy fuggvennyel hozunk letre egy osztalyt az osztaly meghatarozasa helyett. Itt is megvan a konstruktor, a rulajdonsagok es a fuggvenyek, egyszenfen csak nines egy az objektum reszleteit magaba foglalo osztalymeghatarozas. Miutan helyere kerult a konstruktorunk, elkezdhetjuk az objektum peldanyositasat. Itt mar kezdjuk latni az ujrahasznoslthatosagot.

var khOOl new employee(OOl, "Kr i s ? , "Hadlock"); var jd002" new employee (002, "John". "Doe");

Ezek a peldak megmutatjak, hogy milyen egyszenlen letrehozhatunk tobb peldanyt eh,), objekrurnbol ezzel a modszerrel Az a legizgalmasabb ebben, hogy tovabbra is hasznalhatjuk ezt az objektumor barrnely felveend6 alkalmazotthoz, es ha fel kell vennunk egy fuggvenyt vagy rulajdonsagot, annak sernmifele hatasa nem lesz a tobbi employee objektumra. Azok egyszenlen figyelmen kivul hagyjik ezeket az elerneket, hacsak nern frissitjuk oketo

Annak erdekeben, hogy ezeket az objekrurnokat meg rugalmasabba tegyuk, rnegengedjuk, hogy az objekrurn konstruktora pararnetereket fogadjon. Ezeket a parametereket arra fogjuk hasznalni, hogy kulonbozd tulajdonsagokat hatarozzunk meg az objekrurnokon belul, annak erdekeben, hogy egymastol kulonbozove tegyuk azokat, Lehet peldaul, hogy egy

u] alkalmazonat akarunk letrehozni employee objekturnunkkal, es mindegyiknek (Ij kereszt- es vezeteknevet akarunk megadni. Az elozo peldaban a kereszt- es vezeteknevet pararneterkent adtuk at - ezeket rulajdonsagokkent fogjuk hasznalni az osztalyunkban. ezzuk meg, hogyan olvassuk ki es allitjuk be objektumtulajdonsagkent ezeket az ertekekett

Tulajdonsagok

Egy parameter kiolvasasa es atalakltasa helyi objekturntulajdonsagga vegtelenul egyszenien rnegoldhato, Eldszor is szuksegunk van parameterkent egy ertekre - ez mar rendelkezesunkre is all. Ez utan letre kell hoznunk helyi tulajdonsagokat az objektumon belul, arneIyeket ezeknek a pararnerereknek az ertekere fogunk beallitani.

function employee (_id, _firstName, _lastName) {

this.id " _id;

this.firstName = _firstName; his.lastName " _1 stName;

Ez a fuggveny egy _id, egy _firstName es egy _lastName pararnetert kap, amelyeket az objektum helyi tulajdonsagainak beallftasara hasznalunk. Ezek a pararneterek lehecove reszik a szarnunkra, hogy megkulonboztessuk egymastol az alkalrnazottakat, valamint hivatkozast adnak, hogy rnegadott adatokat olvassunk ki az egyes alkalmazottakr6L A helyi objekturntulajdonsagok kesobb ujra felhasznalhatok Hivatkozhatunk peldaul ezekre az employee objekrumokra egy masik objekturnmal, majd kiolvasharjuk a kereszr- es vezetekneveket. Ezek az employee objektumok a Ierrehozou alkalmazouak szarnato! fuggetlenul meg6rzik ezeket az inforrnaciokar.

A tulajdonsagokat egyenkent is beallirhatjuk, es hrvarkozhatunk rajuk, vagy hasznalhatunk fuggverryeket az objektumon belul ezeknek az adatoknak a kezelesere, Ha ftiggvenyeket hasznalunk objekrumkonsrruktorainkban, az segitsegunkre lehet abban, hogy a gyakran hasznalt szolgaltatasokat egyetlen hivatkozassal tegyDk elerhetove. Most nezzuk meg, hogyan vehetunk fel egy fuggvenyt egy objektumkonsrruktorhoz, es hogy ez mikent noveli az alkalmazas meretezhetosegetl

Tagfiiggvenyek

Az objekrurnok az altaJuk tarolt adatok es a bennuk szerepl6, megadott rrulveletek elvegzesere meghivhat6 tagfuggvenyek (metodusok) miatt annyira hatekonyak. Ezek a fuggvenyek hasznalhatok u] objekrumrulajdonsag-ertekek beallitasara vagy objektumrulajdonsagok ertekenek kiolvasasara. Osszetett algoritmusokar is felepithetunk be1610k, rneghlvhatunk mas tagfuggvenyeket, letrehozhatunk mas objekturnokat, es megvalosfthatunk barrnilyen mas oJyan szolgaltatast, arnelyre nekunk vagy ugyfeletnknek szuksegunk van. lme egy pelda azemployee objekrumra egy getfullName nevCi fi.l:ggvennyeL

function employee (_id. _firstName. _lastName) (

this,id " _id;

this.firstName " _firstName; thi s . 1 a s tName " _las tName;

this,getFullName " function() {

return this,firstName + •• + this,]astName;

Ez a tagfuggveny ket tulajdonsagot ad vissza osszefuzve, amelyek egyutt az alkalmazotr teljes never teszik kl, Ez csak a kezdete annak, amit megvalosithatunk egy ilyen objekrurnmal, Letrehozhatunk fuggvenyeker peldaul egy alkalmazott beosztasanak kiolvasasara vagy beallftasara, rntvel ez valarni olyasmi, ami rnegvaltozhat, amennyiben az alkalrnazouat elolepretik. Ezek egyszenien felvebet6 ftiggvenyek, megis nagy segitseget adnak annak, aki kepes megvaltoztatni egy alkalmazott beosztasat lme egy pelda:

function employee (_id, _firstName, _lastName, _jobTitle}

this_id " _id; this.firstName " _firstName; this .1astName _lastName; this.jobTitle " _jobTitle;

this.getFullName " function() {

return this.firstName • " " • this.lastName;

this_setJobTitle " function (_jobTitle) (

this.jobTitle " _jobTitle;

this getJobTitle " function() (

return this.jobTitle;

Ezekhez a fuggvenyekhez fel kell vennunk egy johTitle (beosztas) nevu tij rulajdonsagot, Ez a tulajdonsag beallithato a konstruktorfuggvennyel, vagyu] setJobTi t Le fuggvenyunkkel, Miutan beallttotruk az erteket, azt ki is olvashatjuk a getJobTitle fuggvennyel, Ezek a fuggvenyek megfelelnek a JavaScript kiolvaso- es beallitofuggvenyeinek, mivel lehetove teszik mas objekturnoknak, hogy kiolvassak vagy beallttsak

egy objekturn egyes tulajdonsagait. Egy tulajdonsagot csak olvashatova is tehetunk azaltal, hogy csak kiolvasast teszunk lehetove, beallftast nem.

Egy bonyolultabb pelda az alkalmazott betegszabadsaga. Ehhez letre kell hoznunk egy betegnapokbol al16 tornbot minden egyes employee objektumhoz. Mondjuk szuksegunk van egy m6dszerre, hogy HTML lista formajaban olvashassuk ki a betegnapok listajat. Irne egy pelda ennek megvalositasara:

var sickDays "new Array("1-12", "1-13", "1-14");

var kh " new Employee (001. 0 Kr is", "Hadlock", 'GUI Developer". sickDays);

function employee (_id. _firstName, _lastName. _jobTitle, _sickDays)

(

this.sickDays " _sickDays; this.id " _id; this.firstName " _firstName; this.1astName " _lastName; this_jobTitle " _jobTitle;

this.getFullName " function() {

ret urn thi s . f i rstName + U U + thi s . lastNa.me;

this. setJobTi tle = function (_j.obTi t Le) {

this.jobTitle = _JobTitle;

this. getJobTi tIe = function ( ) (

return this. jobTi t Le :

this.getSickDayList (

function()

var sickDayList "cuI>";

for (var i=O; i ct hi.s . sickDays .length; i+ +) {

sickDayList += "cli>"+ this.sickDays[iJ +"</li>";

sickDayList += "c/ul>"; return .sickDayList;

Az ehhez hasonl6 egyedi fuggvenyek letrehozasa jelenti a hatekonysag legfobb forrasat objekrumpeldanyok letrehozasakor, Ennek az az aka, hogy minden egyes objekturnpeldarry tartalmazza es barmikor rneghfvhatja ezt a szolgaltatast.

Prototfpusok

A prototipus objektumot a )avaScript I.l-ben vezettek be, olyan belso objekrurnkent, amely megkonnyiti a mar meglevo objektumok egyedi tulajdonsagokkal es fuggvenyekkel val6 b6viteset. Amikor elkezdunk objektumokat es prototfpusokat letrehozni, akkor melyedunk el igazan a )avaScriptben, es lehetove valik szarnunkra neharry valoban harekony szolgaltauis letrehozasa, A prototipus objekrurn mukodese eleg egyszertfen bemutathato: ha egy olyan fuggvenyt vagy tulajdonsagot kernek tole, amelyet nem tartalmaz, akkor rnegnezi

az ot Ietrehozo osztaly prorotipusat, Ha nern tahllja a meghivon tulajdonsagot vagy tagfuggvenyt, akkor folytatja a szuloobjekrumok vizsgalatanak lancolarat, Utols6 rnentsvarkent meg fogja talalni az Dbj ect . prototype objektumot (arnely az osszes objekturnot letrehozo objekturn), de ha helyesen hataroztuk meg a hatokoret, akkor az a legvaloszlnrfbb, hogy meg fogja hivni egy egyedi objektum tagfuggvenyet, Az osszes prototipus objekrurnban megtalalhato harem reteg a kovetkezo:

• Obj ect . prototype

• Class. prototype

• Peldany

A kovetkezo harorn reteg 2Z osszes emp'l.cyee-peldanvban megtalalhato reteget jelolt.

• Object .prototype

• employee.prototype

• kh

Ezek a retegek az objekrurnoroklodest jelolik, ami egyszeruen azt jelenti, hogy a kh peldany orokol minden tulajdonsagot es fuggvenyt az employee es az Obj ect objektumokt61, es az employee objektum orokol minden tulajdonsagot es fuggvenyt az Object objektumt61. Ezt jobban at fogjuk latni, ahogy tobbet tanulnunk a prototipus objekturn hasznalatanak rnodjarol, es rnegkuzdunk nehany osszetett objektummal a III. reszben, ahol ujrahasznosirhate objektumokat hozunk letre az Ajax-kepes osszetevok adatszerkezetemek kezelesere,

A JavaScript hatekonyabb, mint nehanyan gondoljak, es ezt latni is fogjuk ebben a k6nyvben. Hasznalataval letrehozhatok teljes dinamikus alkalmazasok, osszetevok, es meg a kiszolgalo es az adarbazts kozotti parbeszed is megvalosithato, ahogy [atni fogjuk, amikor rnegvalositjuk a kiszolgalooldalt Ajaxszal az V. reszben. A prototlpusok hasznalata az egyik olyan modszer, arnelyet az ujrahasznoslthato objekturnok letrehozasara valasztottam

a konyv peldaiban. A masik modszer a new rmlvelet egy valtozata, amely valojaban egy rnintat hoz letre, amelyr61 a 14 fejezetben Iesz szo. Ott valojaban majd csak egy peldanyra lesz szuksegunk egy objektumbol. Az objekturnok letrehozasanak prototipusos rnodszerevel egyszeruen vehetunk fel tulajdonsagokat es tagfuggvenyeker olyan objektumokhoz, amelyeket eloszor hozunk letre, valamint tovabbi szolgattatasokkal bovithetunk meglevo objektumokat, Egy masik oka ezen objektum-Ietrehozasi modszer hatekonysaganak az, hogy letrehozhatunk tobb peldanyt, es ezaltal mererezhetobbe es konnyebben ujrahasznosjthatova teherjuk az objektumokat. NezzGk meg, hogyan tortenik ezen objektumok peldanyositasa, es hogyan lehetnek olyan hatekonyakl

P~ldanvok

Ahhoz, hogy peldanyokat hozhassunk letre egy prototipus alapu objektumb61, eloszor lerre kell hoznunk egy konstruktorfuggvenyt, A konstruktorfuggveny az objekrum hozzaferesi penna, ezert ez az els6 elern, arnely letrejon az objekrurnban, A konsrrukrorfuggvenyek korlatlan szarnu pararnetert fogadhatnak adott jellernzok vagy tulajdonsagertekek megadasara Ezek az ertekek kulonbozterik meg az objektumokat egymastol, es egy rnasik okot szolgaltatnak arra, bogy az objektumok miert kepviselnek olyan hatekony er6t a prograrnozasban. Lassunk egy peldat az el6z6 reszekben letrehozott employee new objektum konstruktorfuggvenyerel Az objektum itt is harem pararnetert var, amelyek az alkalrnazotr egyedi azonositojat, valamint kereszt- es vezeteknevet adjak meg .. A kereszt- es vezeteknevek onmagukban nem elegend6ek azalkalmazottak egyrnastol valo megkulonboztetesere, f61eg, ha ket ernbernek ugyanaz a neve. Ezert hasznaljuk az id pararnetert:

function employee(_id, _firstName, _lastName) (

II tulajdons~gok be~llit~sa

Ahogy lathato, a prototipus objektumok konstruktorfuggvenyenek Ietrehozasa egyszeru, megis ez az objektum egyik legfontosabb resze.

Tulajdons6gok Istrehoz6sa

Nagyon egyszertlen vehetunk fel tulajdonsagokat objektumainkhoz. Ebben az esetben eloszor parametereket ken rneghataroznunk a konstruktorban, ahogy ezt a tobbi objektum eseteben is tettuk. Ez lehetove teszi szamunkra, bogy ertekeket adjunk at a tulajdonsagoknak, es beallitsuk azokat, amikor letrejon egy peldany az objektumbol. Miutan

az objekrurn konstruktorfuggvenye lerrehozta az objektumot, es kioivasta a parametereket, letrehozzuk a. tulajdonsagokat, es beallftjuk az ertekeiket, A kovetkezd peldaban beallitjuk az osszes letrehozott employee objekturn id, firstName es lastName tulajdonsagat:

function employee (_id. _firstName, _lastName) {

this.id " _id;

this.firstName = _firstName; this.lastName " _lastName;

Ahogy korabban mar emlitertern, ezeker a rulajdonsagokat nagyon egyszenf letrehozni es beallftani az objektumon belul, Az objektum tulajdonsagai a this kuksszoval cimezhet6k meg. Erdernes ezr a format hasznalni, mivel egy helyi fuggvenytulajdonsag k6nnyebben rnegkulonbozrethetd egy objekturnrulajdonsagtol, ha az egyik hasznal]a a this kulcsszor, a rnasik pedig nem.

Edclig az objekturn semmiben nem kulonbozik az objekturnkonstruktortol, de ez most megvaltozik. Ha az employee objekrumbol van egy peldanyunk, es fel akarunk venni egy elektronikuslevel-cimet tartalrnazo tulajdonsagot, akkor ezt a koverkezo k6dclal tehetjuk meg:

var kh " new employee (001. "Kris", "Hadlock"); kh.emailAddress" "my@email.com";

Ezt a k6dot nem hasznalhatnak az objektum mas peldanyai, peldaul ha letre akarnank hozni egy masik alkalmazottat, akkor ahhoz nem tartozna emailAddress tulajdonsag. Ahhoz, hogy az osszes employee peldany altai lathato es hasznalhato employee objekrumhoz adjuk ezr az 6j tulajdonsagot, a prototipusr kell hasznalnunk, Ime egy pelda arm, hogya prototipussal hogyan b6vfthetjlik employee objektumunkat egy ernail-cirnrnel:

var kh = new employee (001, "Kr i s ". "Hadlock·);

employee.prototype.emailAddress " kh.emailAddress = "my@email.com";

Ez nem a Jegjobb megoldas area, hogy (lj tulajdonsagot hozzunk letre a prototipushoz, de egy pelda arra, hogy rnikent vehetnenk feJ ezt a rulajdonsagot €os tehetnenk elerhetove

az osszes tobbi peldany szamara, A tulajdonsagok altalaban egy tagfuggvenybe agyazodnak,

peldaul a kiolvas6- vagy a beallftofuggvenybe, nern pedig a konstruktorba, Az egyetlen ok, amiert igy akarnank felvenni egy rulajdonsagot az, ha vaIamilyen oknal fogva bovitenunk kellene az objekrumor. Ez a megoldas azert nern a legjobb, rnert nagyban megnehezltheti

a k6d karbantartasat, ha a fejleszt6k veletlenszenien, kulonbozd helyeken b6vitik az objektumot, Ha kozpontosirva, egyetlenJavaScript fajlban tartjuk a tagfuggvenyeket es rulajdonsagokat, akkor a kezeles egyszeni marad, es a fajlra tobb helyr61 hlvatkozhatunk, rudva, hogy mindenhonnan ugyanazt a k6dot erjuk el.

Parametarek felUlb(rilasa as felul(rasa

A prototipus objektumban felul is biralharunk es felul is Irhatunk tulajdonsagokat. Beallithatunk peldaul egy alapertelmezett erteket email-cimkent:

var kh" new employee{OOl, "Kris", "Hadlock"); employee.prototype.emailAddress" 'shared@email.com"; kh.emaiIAddresB" "my@email.com";

var jd" new employee (002 , "John", "Doe");

A rulajdonsagertek felulbfralasa egyszenlen csak az ahhoz a peldanyhoz tartozo erteket valtoztatja meg, amellyel beallitjuk. Tehat most a kh alkalmazottnak uj email-dmevan, de a j d alkalmazotthoz a protoripussal beallitott cirri tartozik,

Az objekturnok rulajdonsagainak felulirasa egeszen mas. Ha meg akarnank valtoztatni

a kh alkalmazott email-cimet azutan, hogy mar beallitottuk, akkor felulirnsnk az eredeti erteket, lrne egy pelda:

var kh " new employee{OOl. "Kris", "Hadlock"); employee.prototype.emailAddress" "";

kh , emailAddress "my@email.com";

kh . emaiIAddress....new@email.com " ;

A tulajdonsagok yadelme

A tulajdonsagok vedelrne azt jelenti, hogy meg6vjuk egy objektum helyi tulajdonsagait att61, hogy az objektum egy rnasik peldanya megvaltoztassa azokat. Mas sz6val, ha egy peldany megvaltoztatja egyik rulajdonsaganak erteket, az ertek nem valtozik abban az objektumban, amelyikt61 orokol. Peldaul rrundket szulonktdl szoke hajat orokoltunk, de ha gyermekkorunk soran a hajunk besotetedik, ez nem jelenti azt, hogy a szuleink hajszfne is rnegvaltozik. Ime egy pelda egy ertekre, amely megvaltozna egy peldanyban, de nem valtozna az objektumban:

function employee{ ) (I employee.prototype.totalVacationDays 10; var kh " new employee ( ); kh.totalVacationDays

kh.totalVacationDays

kh.totalVacationDays

Ez a peldany azert sajat tulajdonsaganak erteket csokkenti, nern pedig az objekrum helyi rulajdonsaganak erteket, rnert akkor az objektum osszes tobbi peldanya is ezeket

a megvaltoztatott tulajdonsagokat ttrkrozne. A peldabanaz egy alkalrnazott szarnara meg rendelkezesre a1l6 osszes szabadnap szarnat hasznaljuk. Kepzeljuk el, ha ennek a tulajdonsagnak a rnegvaltoztatasa rnegvaltoztatna az osszes tobbi alkalmazott tulajdonsagair vagy szabadnapjait' A vezetosegnek sok duhos alkalmazottat kellene szembeneznie .. Ezert annylra fontos a tulajdonsagok vedelme, es ez az oka annak, hogy igy rrufkodnek az objekrumtulajdonsagok, Az objektumtulajdonsagok letfontossagu alkororeszei

az objekrumoknak, de szerepuk csak eddig terjed. Ezert tesznek hozza a tagfuggvenyek annyira sokat az objektumszerkezetekhez. Lassuk is, hogyan adhatunk tagfuggvenyeket proton pus objekruma inkhoz!

T agfiiggv6nyek

Egy tagfuggveny letrehozasa egy prototipus objektumon belul egy kicsit elter egy szokvanyos objekrum-tagfuggveny letrehozasatol, Ahhoz, bogy letrehozzunk egy tagfuggvenyt, nev szerinr meg kell hivnunk az objektumot, es fel kell venni.ink a prototipus objektumot, illerve azt kovetden a fuggvenynevet, lme egy pelda a fejezerben tobbszor hasznalt getFullName ftiggvenyre egy prototipus alapu tagfuggvennyel.

employee.prototype.getFullName " function() {

return this.firstName + •• + this.lastName;

Ez a tagfuggveny az employee tagfuggvenyeve valtk, amelyet meghfvhar minden ezen meghatarozas alapjan letrehozott peldany. Minden objekrumpeldany rendelkezik sajat ertekekkel a visszaadando tulajdonsagokra, ezert a ragfuggveny meghfvasakor egyedi ertekeit adja vissza Ha peldaul letrehoznek egy employee objekrumot, es atadnarn neki

a John keresztnevet es a Doe vezeteknevet, akkor a getFullName fuggveny a John Doe karakterlancot adna vissza.

Objektumok b6vft6se prototfpusos tagfiiggv6nyekkel

A prototipus objektumok hasznalara lehetove teszi a szarnunkra egy rneglevd objektum b6vfteset is, Jegyen az akar belso, akar egyedilavascript-objekrum. Peldakent vegyuk

a String objekrumot, Mondjuk fel szeretnenk venni az osszes karakterlanchoz egy tagfuggvenyt, amely lehetove teszt, hogy a karakrerlancot egy karakterekbol aIl6 tornbbe alakitsuk, Ennek megvalositasahoz egy prototipust hasznalhatnank

function stringToArray() (

var arr • new Array!);

for (i.O; i<this.length; i++)

arr.push(this[i)l;

return arr;

String.prototype.convertToArray

s ringToArray;

var s = "Test String";

document. wr i te (s. convertToArray ( ) ) "

Barmely karakterlanc-valtozo, arnely az ezt a kodot tartalrnazo alkalmazasban talalhato, most mar kepes lesz bels61eg rneghivni a convertArray fuggvenyt, es egy tombben visszakapni a karakterlancban talalhato karaktereket. Amikor nativ JavaScript-objektumokhoz lrunk k6dot, akkor tudjuk, hogy nagy teljesitmenyt vittiink vegbe. Most eljott

az id6, hogy kiegeszito szolgaltatasokat hozzunk letre az Ajax altalanos adatkezelesere. Ez meg csak a kezdete annak, amit elerhetunk, es el is fogunk erni a prototlpus objekturnokkal. Ahogy a fejezet elejen ernlitetrern, ezt az objektumletrehozasi m6dszert fogiuk olyan egyedi Ajax-kepes osszetevdk letrehozasara hasznalni, amelyeket kesobb barmely projektben ujra felhasznalhatunk a III. reszben, Ezek a prototipus alapu objektumok rendkivul rugalmasak, es barrnely helyzethez alakithatok - eppen ezert valasztottam

a prototipusokat els6dleges rnodszerkent az objekrurnok letrehozasara a konyvben szerepl6 peldakban. Ezeknek az objektumletrehozasi m6dszereknek a kihasznalasaval lehetosegunk nyilik nagyon dinamikus es interaktiv webalkalmazasok letrehozasara

az Ajaxszal,

A motor elkeszftese

A 2. fejezetben megirtunk nehany fuggvenyt, arnelyek letrehoznak egy XHR-t, valaminr kezelik a valasz fogadasat es megjeleniteset, Ez a megoldas sok esetben kinlnoen rrulkodik, f6leg az egyszere Ajax alapu weboldalaknal, de nem ez a legjobb rnegoldas a nagymereril webalkalmazasok eseteben, Most ef,'Y Ajax motort fogunk kesziteni annak erdekeben, hogy tobb kerelrnet kezelhessunk, es valaszokat kuldhessunk megadott kerelmezo objektumokoak. Ez a motor ket objektumb6! fog allni: az Ajax esaz AjaxUpdater nev6ekb61.

Az Aj.axUpdater fog]a kezelni az osszes kerelmet, es fogja atadni azokat az Ajax objektumnak. Az Ajax objekturn fogadja az AjaxUpdater objekrumtol erkezo kerelmeket, es peldanyosit egy XHR objekrurnot. Miutan megtortent az XHR objektum peldanyositasa, es

a kerelrnezd objekrum kapott egy valaszt, a kerelmezo meg ket rnasik tagfuggvenyt hivhat meg az Ajax objektumon belul. Az els6 tagfuggveny ellenorzi a kerelem keszenieti allapotat, a masodik pedig visszaao]a kitoltott forma ban a kerelrnezo objektumot. Ebben a fejezetben reszletesebben is megvizsgaljuk ezt a ket tagfuggvenyt. Eloszor is hozzuk letre az

Ajax burkol6t, amelyet kesobb majd ujra felhasznalhatunk nagymereni Ajax alkalrnazasok kezelesere,

Egyedi Ajax burkol6 16trehomsa

Az Ajax burkol6nak, amit most fogunk letrehozni, egyszeruen csak Aj ax a neve, es egy olyan objekrum, arnely az Egyke (Singleton) mintat k6veti,amelyr61 reszletesen a 14. fejezetben lesz sz6. Ez az objektum fogja kezelni a kiszolgalohoz erkezo osszes kerelrnet

az XHR-en, mint egy egyszenl objektumon keresztul, amely mindig rnegbfzhato lesz, es soha nem valtozik meg az allapota - ezert hasznaljuk az Egyke rnintat, jgy ha barrnelyik objekrurnnak el kell kuldenie egy kerelrnet, azt ugyanazon az objektumon kereszrul fogja megtenni, es a kerelmek strukturaltak es rendezettek maradnak Ahhoz, hogy letrehozhassuk ezt az objekturnot, eloszor meg kell alkotnunk, ahogy az a 6.1 kodszovegben lathato:

6,1. k6dszoveg Az Ajax objektum rneqalkotasa (Ajax.js)

Ajax" {};

Az objektum rnegalkotasa utan letrehozhatjuk az osszes tagfuggvenyt, amelyet meg kell hivnunk a kerelmek elkuldesehez, a keszenleti allapot ellenorzesehez es egy olyan valaszobjektum Iogadasahoz, arnely elemzi, es megjeleniti vagy kezeli az adatokat az ugyfeloldalon. EI6sz6r azt nezzuk meg, hogyan hozhatunk letre egy tagfuggvenyt az XHR kerelrnek elkuldesenek kezelesere

Kerelmezes

Aj ax objekrumunk egyik legfontosabb szolgaltatasa az XHR kerelrnek elkeszirese, Annak erdekeben, hogy hatekonyabba es konnyebben kezelhetove tegyuk ezt a folyamatot, letre fogunk hazni egy makeRequest neva tagfuggvenyt, Ez a fuggveny harom parameter; fagad: az els6 a kerelmet tartalmazo fuggveny, amelyben egy POST vagy egy GET fuggveny fog szerepelni. A masodik parameter a kerelemhez tartozo URL, amely tartalrnaznl fagja

a kerelern karakterlancat, amelyben a kerelem elkuldesekor atadjuk az adatokat a kiszolgalonak. Az utolso parameter a visszahiv6 fuggveny, arnelyet akkor akarunk majd meghivnia valasz kezelesere, amikor a keszenleti m6d befejezodott. A 6.2. kodszovegben

a teljes fuggveny lathato, arnely kezeli ezt a szolgaltatast,

6,2. k6dszoveg Az XHR-ek letrehozasi folyamatlmak hatekonvabba tetele (Ajax.js)

Ajo.x.mo.keRequest {

function (method, uri, callbackMethod)

thi s . request (window. XMLHt tpRequest)? new XMLHt tpRequest (): new

.. Ac t i veXabj ec t ( "MSXM,L2 . XMLHTTP" ) ;

t his ., r eque st. onready s tat echance " co. 11 ba c kMethod; this.request.open(method, ur1. true); this.request.send(ur1) ;

Ennek a fuggvenynek nagyon ismerdsnek kell lennie, mivel ugyanazokat a mrivelereket tartalmazza, mint arnelyeket az XHR objekrurn letrehozasahoz es az adatoknak a kiszolga- 16ra kuldesehez hasznaltunk a 2, fejezetben, A kulonbseg az, hogy ez a fuggveny mindezeket a rmlvelereket egy konnyen kezelheto objektumba burkolja, arnelyet barhonnan elerhetunk egy nagymereni alkalmazasban, EI6szor is a bongeszo tipusa alapjan megfejtjuk, bogy melyik XHR objektumot kell peldanyositani, Az XHR objektum peldanyosttasa utan az onready.statechange esernenyt a fuggveny harmadik pararnetereben rnegadort viszszahivo fOggvenyre aUrtjuk. Ez azr jelenri, bogy az ehhez a fUggvenyhez megadott visszahiv6 fuggveny fog eiindulni, arnikor megerkezik az XHR, es elemezheto az alkalrnazas ugyfeloldalan az adatok megjelenitesere vagy kezelesere, A ket utols6 fuggveny az XHR objektum open es send fuggvenye, Az open fuggveny kesziti el6 a kerelmet, es rnegadja

a fuggvenyt, ameJybena kerelern szerepel, az URL-t, ahova el kell kuldeni a kerelrnet, es ha van ilyen, akkor egy kerelern-karakrerlancot, valamlnt egy logikai valtozot, arnely azt

jelzi, hogy a kerelern aszinkron vagy szinkron. Alapertelmezes szerint a logikai valtozot true (igaz) ertekre allftjuk, mivel nern akarunk egyidejG kerelmeket kuldeni, mert azok lefagyasztjak az alkalrnazasunkat, amig meg nern erkezik a valasz a kerelernre, Ha sok kerelmet kuldunk egy nagymerertf alkalrnazasbol, akkor ez hasznalhatatlanna teszi az alkalrnazast, A:l. urolso fuggveny a send fuggveny, amelyet ana hasznalunk, hogy tenylegesen elkuldjuk a H'Tl'Pvkerelmet a kiszolgalonak, es megvariuk a valasz erkezeset Ez a fuggveny ugyanazt az URL-t fogadja, mint az open fuggveny, valarnint egy olyan tetszoleges kulcs-ertek part, ami egy kerelern-karakterlancban szerepelhet,

Miutan ez a fGggveny peldanyositja az XHR objektumot, €!s elkuldi a kerelmet az altalunk megadott informaciok alapjan, a valaszt az a visszahivo fuggveny fogadja, amelyet beallitottunk, A visszahfvo fuggvenynek ellendriznie kell az XHR objektum keszenleti tillapotat, es vagy elernezrue kell az objektumot a keszenleti allapot befejezodese utan, vagy kezelnie kell a kiszolgalotolesetleg visszakapott HTIP allapotkod-hibakat, Az XHR objektum keszenleti allapotana k ellenorzesere letrehozunk egy chec kReadyS tat e new fuggvenyr, amely elvegzi ezt a szamunkra, es ame!y az Ajax objektum resz€!v€! fog valni.

A k6szenl6tilillapot

Ahogy ezt Iathatruk a 2. fejezetben, az objektum keszenleti allapotabol tudjuk meg, amikor rnegerkezik a valasz a kiszolgalotol, es keszen all am, hogy a JavaScript a Document Object Model (DOM) hasznalataval elemezze, A readyStateChange esernenykezelo akkor indul el, arnikor rnegvalrozik a kerelemobjektum allapota, es lehetove teszi szamunkra, hogy megadjunk egy meghivand6 vtsszahivo fuggvenyt, ahogy ezt a makeRequest eseteben tetnlk .. Ezen visszahivo fuggveny vegrehajtasa utan nekunk kell visszahtvo fuggvenyunkkel kezelni a valaszt. Ehhez meg fogjuk hivni a checkReadyState fuggvenyt, hogy megkapjuk a readyState erteket, es ezaltal a kerelern HTIP-allapotat. Ez a fuggveny egy pararnetert var, ami egy olyan HTML-elem azonositoja, arnely egy betoltesiuzenetet fog megjeleniteni a folyamat saran. Ezt az uzenetet tets.z61eges uzenetre valtoztathatjuk a kerelem egyes allapotainak eseteben, A 6.3. kodszovegben a teljes fuggveny lathato a betoltesi allapotok uzeneteivel, es az XHR objektum visszaadott HTI'P-allapotaval a keszenleri allapoc befejezodese utan:

6.3. k6dsz6veg Az. XHR keszenleti allapatanak ellen6rzese (Ajax.js)

Aj ax. checkReadyState " funct ion Lid) {

switch(this.request.readyState) {

case 1:

documen t . get ElementBy I d (_id) . i nnerHTML break;

case 2:

document. getElementByld (_id) . innerHTML break:

'Loading ... ":

'Loading

case 3:

documen t . ge tEl emen t By Id l_id) . innerHTML break;

case 4:

AjaxUpdater.isUpdating = false; document.getElementById(_id) .innerHTML _ return this.request.status;

'Loading ... ';

Ez a fuggveny nagyon hasonlo a 2. fejezetben elkeszietthez, de most beburkolja az Ajax objektum, bogy kodalapunk strukturalt es rendezett legyen. A readyState minden aHapotahoz beallitunk egy egyedi betoltest uzenetet annak a HTML elemnek az innerHTML tulajdonsagaban, arnelynek azonositojat pararneterkent atadtuk. Ezt az uzenetet tetszes szerint barrnire valtoztathatjuk. Minden allapothoz tartozhat sajat beroltesi uzenet, amelyet paramererkent adunk at a fi.iggvenynek, igy a kerelmezo objekturn nagyobb szabadsagot kap a megjelenitend6 uzenet tekinteteben. Mondjuk van peldaul egy kerelrnunk egy levelez6program bejovo uzeneteinek frissltesere. Megjelenfthetunk korrkretan a kerelernre vonatkozo allapotokat, peldau': Retri eyeing new rna i 1 CUj uzenetek lekerese), jegyezzuk meg, hogy letrehozasa utan ez az objektumot m6dosithatjuk ugy, hogy kezeljen barmHyen altalunk igenyelt egyedi szolgaltatast _ ez a szepsege annak, ha objektumkozpont(l k6dot keszitunk alkalmazasainkhoz,

Miutan a readyState elerte a 4-es allapotot, az XHR objekrum elkeszult es hasznalhato. Ezen a ponron ket dolog tortenhet: a HTIP-allapot lehet sikeres, vagy visszaadhat egy inforrnacios, atiranyitasi, ugyfelre vagy kiszolgalora vonatkoz6 hibak6dot. A visszaadott k6el alapjan fogjuk eldonteni, bogy rnikent kezeljGk az ugyfeJoldalt. Errol reszletesebben

a 9. fejezetben lesz sz6, arnikor Ietrehozunk rnajd egy az Ajax objekrumot b6vft6 egyedi objekrumot, amely kezeli az osszes lehetseges HTIP-aJlapotk6dot. Bizonyara feltt1nt, hogy az AjaxUpdater objekturn isupdating tulajdonsaganak a false erteket adjuk. Kivancsiak Iehenmk fa, hogy mi ez az objekrurn, es miert allftjuk be ezr a rulajdonsagot, Ezt

az objekrurnot a fejezet kovetkezc reszeben fogjuk letrehozni, es az osszes Ajax-kerelern kezelesere fog szolgalnl. Mintegy elvalasztaskent hasznaljuk az ugyfeloldali objektumok es a motor kozon, fgy sokkal rendezettebb es biztonsagosabb rnarad a k6dunk. Miel6tt azonban raternenk erre az objekturnra, rnegnezzuk, hogyan is kaphatjuk meg a valaszobjektumot a readyState befejezodese utan.

Avalasz

A get Response neva utols6 fuggveny rendkivul egyszeru, rnivel csak azt fejti meg, hogy milyen tipusu valaszrulajdonsagot kell visszaadni a kerelmezo objektumnak. Nezzuk meg a 6.4. kodszoveget, es latn: fogjuk, hogyan kezeljuk ezt a szolgaltarast,

6.4. k6dszoveg A megfelel6 valaszobjekturn elerese (Ajax.js)

Ajax.getResponse ~ function() {

if (this. request. getResponseHeader (' Content -Type ' ) . indexOf ( 'xml .) ! ~ -1) {

return this.request.responseXML.documentElement:

else {

return this.request.responseText;

Annak erdekeben, hogy megkapjuk a valasztaz Ajax objekrumb61, egyszertlen csak meghivju k ezt a fuggvenyt visszahivo fuggvenyu nkbol area dy S tate befejezodese uta n, es rnegkapjuk a megfelel6 valaszrulajdonsagot. A fuggveny a megfelel6 valasztulajdonsagot a kiszolgalotol a valasszal kapott valaszfejlec alapjan adja vissza Ha a Content-Type valaszfejlecben szerepe az xml karakterlanc, akkor tudjuk, hogya valasz XML formatumu, ezert a visszahfvo fuggvenynek a kiszolgalotol erkezett valaszt egy DOM-rnegfelel6 clokumenrurnobjekturnkent kell visszaadnl. Maskolonben ez a fuggveny a responseText tulajdonsagot adja vissza, amely a kiszolgalotol kapott valasz karakterlanc valtozata

Most, hogy rendelkezunk egy egyedi objekturnrnal, arnely vezerll es kezeli minden Ajaxkerelrnunket, ujabb elvonatkoztatasi reteggel b6vfthetjOk a kodunkar, hogy a kerelrnek kezelhetobbe es biztonsagosabba valjanak.

Ajax-frissft6 '6trehozasa

Annak erdekeben, hogy Aj ax objekrumunk a harrerben maradjon es egy elvonatkoztatasi reteggel bovitsuk a motorunkat, letre fogunk hozni egy AjaxUpdater (Ajax-frlssiro) nevCi objekrumot, Ezaz objektum is az Egyke rnintat koveti, hogy az alkalmazas minden reszebol elerheto legyen az egyszenfbb XHR-kezeles es -vezerles erdekeben. Az objektum nagyon egyszenl, es csak ket fuggvenybdl all, amelyek kozul lehet, hogy mindig csak egyet fogunk hasznalnl. A masik valaszthato lehetoseg vagy kiegeszlto szolgaltarasok kezelesere szolgalo tartalek marad Eloszor is alkossuk meg az objekrumot,

.Az objektum megalkot6sa

Ezt az objekturnot is ugy alkotjuk meg, ahogy az Ajax objekrumot. Annyi a ktllonbseg, hogy ennel az objektumnal kezdcertekkel latjuk el azt a tulajdonsagot, arnelyet az e16z6 reszben roviden leirt Ajax objektum eseteben hasznalrunk. Ez a logikai tipusu tulajdonsag az isUpdating, es alapertelmezes szerint erteke false (lasd a 6.5. kodszovegei). Ennek az az aka, bogy jelenleg nern frissftunk egyetlen Ajax-kerelmet sern, mivel ennek a tula]donsagnak az lesz a szerepe, bogy jelezze, ha egy kerelem folyamatban van.

6.5. k6dsz6veg Az AjaxUpdater rneqalkotasa as a tulaidonsaqok ellatasa kezd6ertekkel (AjaxUpdater.js)

AjaxUpdater = I};

AjaxUpdater.initialize = function() (

AjaxUpdater.isUpdating = false;

AjaxUpdater.initialize() ;

Az objektum rnegalkotasa utan azonnal ellatjuk kezdoertekkel annak rulajdonsagait, hogy az objektum tobbi tagfuggvenye hasznalhassa azokat.

A k'relmez6 objektum frissft'se

Egy Ajax alkalrnazasban a legszelesebb korben hasznalt tagfuggveny valoszinuleg az, arnelyik az XHR-eket kezeli. Ez a fuggveny kezeli az osszes ilyen kerelrnet es kozvetlenul egyuttrmfkodik az Aj ax objektumrnal. A fuggveny harem pararnetert var. egy m6dor, ahogy elkeszltjuk a kerelmet (peldaul POST vagy GET); egy altalam .szolgaltatasparameternek" nevezett pararnetert, ami maga az URL nem kotelezo kulcs-ertek parokkal, amelyek adatok elkuldesere szolgalnak a kerelmen keresztul a kiszolgalohoz, valamint egy nem kotelezo visszahivo fuggvenyt. A visszahlvo fuggveny azert nem kotelezo itt, rnivel lesz egy onResponse nevil alapertelrnezett, vagyis mindent elkap6 fuggvenyunk, amely minden valaszt kezel abban az esetben, ha nem adunk at visszahivo fuggvenyt, A visszahivo fuggveny megfeitese utan elkuldjuk a kerelrnet az Ajax-objektumnak, es az isUpdating tulajdonsagot true ertekre allitjuk (lasd a 6.6. kodszoveget):

6.6. k6dsz6veg XHR-ek kezelese (AjaxUpdater.js)

AjaxUpdater.Update = function(method , service, callback) {

if (callback == undefined :: callback == "") { callback .. AjaxUpdater.onResponse; }

Ajax.makeRequest(method, service, callback); AjaxUpdater.isUpdating = true;

Ez meglehet6sen egyszerd rnodszer az alkalmazasunkon keresztul elkuldott osszes XHR kezelesere. Az elvont reteg hasznalatanak hatekonysaga abban rejlik, hogy tovabbi egyedi k6dot irhatunk a kerelern mas reszleteinek kezelesere meg a kerelern elkuldese el6tt, anelkul, hogy ez a jovoben hatassal lenne magara az Ajax motorra. Ez nern valtoztatja meg az Ajax rnotort, tehat nem kell agg6dnunk a kesobbi logikai valtozasok miatt.

Avalasz

Az AjaxUpdater objektum utols6 tagfuggvenye az el6zo reszben mar emlftett, getResponse nevU, mindent elkapo fuggveny, Ez a fuggveny egyszenlen rnegkap minden olyan, az XHR-ekre erkezeu valaszt, amelyhez nem tartozik bealliton vlsszahlvo ttiggveny (Iasd

a 6.7. kodszoveget).

6.7. k6dsz6veg Valaszok kezelsse lAjaxUpdater.jsl

AjaxUpdater_onResponse = function() {

if (Aj ax. checkReadyState ( , loading' ) 200)

{

AjaxUpdater.isUpdating = false;

A fuggveny eloszor ellen6rzi a keszenleti allapotor, ahogy errol mar volt sz6 az Ajax objekturnnal, es elki.i!di a betoltesi uzenetet egy HTML-elemnek, amelynek id erteke 'loading'. A readyState befejezodese es sikere utan a fuggveny az isupdating tulajdonsagot elovigyazatossagbol false ertekre allitja, ha esetleg az Aj ax objekturn ezt nern tette volna meg.

Most, hagy mar van egy ujrahasznosithato matorunk Ajax-kerelmeink kezelesere, tovabblephetunk olyan lzgalrnas dolgok epltesere, mint az Ajax-6sszetev6k, adarbazis-kepes kerelmek, es ami a legjobb, egy teljes Ajax-kepes alkalmazas. De elcszor csak lepjunk tovabb a kovetkezo fejezerre, ahol rnegtudjuk, hogyan vehetjuk hasznalatba ezr a moron.

A motor hasznelata

Most, hogy mar elkeszjterruk az Ajax motort, nezzuk meg. hogyan is hasznalhatjuk Ebben a fejezetben arrol lesz szo, hogyan kuldhetunk el egy XHR-t az Aj axUpdater hasznalataval, es hogyan erhetjuk el az Aj ax objektum tulajdonsagait es kuionfele tagfuggvenyeit,

A fejezet elolvasasa utan tudni fogjuk, hogyan hasznalhatjuk a motort barmilyen Ajax alkalrnazasban, fuggetlenul annak meretetol. Ez a motor nagyfoku rugalmassagot blztosft, mivel elktiloniti, karbantartja, es k6nnyen kezelhetove teszl az alkalrnazas osszes XHR-jet. Az alapokkal kezdunk: elcszor betoltjuk a fajlokat egy mintaprogramba.

Az els6 lepesek

Miel6tt egyaltalan elkezdhetnenk hasznalni az el6z.6 fejezerben csszeallttott Ajax motort, be keL! toltenunk a mororhoz kapcsol6d6 osszes javascnpt !'ajlt. jelenleg osszesen ket objektumot hozrunk letre, amelyek szuksegeseka motor futtatasahoz, de mire a konyv ezen reszenek a vegere erunk, osszesen negy ehhez szukseges objektumunk lesz, mivel egy Ut i 1 i ty es egy HTTP objektummal fogjuk b6viteni a motort a 9. fejezetben. Ahhoz,. hogy konnyebben megjegyezhetove tegyuk a dolgokar, a koverkezo k6dban szerepel mind a negy objektum, amelyet a motornak be kell majd toltenie a megfelel6 rrufkodeshez. Itt lathato, hogy mikent kell kineznie a negy bet6lt6 utasitasnak egy alkalmazas fejleceben

<script type=·text/javascript· src="javascript/Utilities.js·></script> <script type=·text/javascript"

~ src="javascript/model/AjaxUpdater.js·></script>

<script type="text/javascript" src="javascript/model/HTTP.js"></script> <script type="text/javascript" src="javascript/model/Ajax.js"></script>

Ahogy lathato, a JavaScript objektumok betoltese egyszeru, de ez az els6 lepes, ami a motor hasznalatahoz szukseges, es ezert emlitesre meltc. Miutan betoltottuk ezeket az objektumokat, keszfthetttnk kerelrneket, elerhetunk tulajdonsagokat, es barrrukor lekerhequk egy adotr kerelem allapotat, Haladjunk tovabb, es tanuljuk meg, hogyan hozhatjuk letre els6 kerelmeinket az Ajax motoron keresztull

Kerelmek elkeszrtese

Kerelmek keszttesenel hozzaferesi pontkent mindig az AjaxUpdater objekrumot fogjuk hasznalni. Ez az objektum egy elvalasztasi reteget ad a k6dhoz, hogy XHR-jeink k6nnyebben kezelhet6k €os kovetkezetesek maradjanak az egesz alkalmazasban Ebben a reszben ennek az objektumnak a hasznalataval letrehozzuk els6 kerelmunket, es megertiuk, hogy miert van szukseg erre az elvont retegre, Az Aj axUpda ter objekrumon kereszrul torteno kerelernkuldeshez egy Update nevU fuggvenyt fogunk hasznalni, Az Update fuggveny harem pararnetert var: egy fuggvenyt, egy szolgaltatast es egy nem kotelezo visszahivo fuggvenyt. Ha nem adunk meg visszahlvo fuggvenyt, akkor az Aj axUpdater objektum az aiapertelmezett visszahivasr fogja alkalmazni, amely egy isUpdating nevtl logikai valroz6t false ertekre allit vissza Ez a logikai valtozo mindig true erteket kap egy kerelern elkuldesekor, es visszaallitodik false ertekre az Aj ax objektumon belul, amikor megerkezik a valasz Ez a tulajdonsag j61 hasznalhato annak ellenorzesere, hogy az objektum eppen kuld-e kerelmet, es vegsd soron hasznalhato arra, hogy elerneket vegyunk fel

egy kerelernsorba. Az elaza reszben szereplo betolto k6don kivul a 3. fejezetben szerepl6 email. xml nevil XML fajl kerelrnezesere is irunk k6dot. Itt is az Update fuggvenyen keresztul kuldjuk el a kerelrnet az Aj axUpdater objektumban a GET fuggveny hasznalataval, a kovetkezo reszben letrehozando visszahivo fuggveny neve pedig onResponse lesz:

<script type="text/javascript"> function initialize()

(

AjaxUpdater.Update("GET", "services/sample.xml" , onResponse);

</script> </head>

<body onload="javascript:initialize() ;"> <div id="loading"></div>

<div id="body"></div>

</body> </html>

Annak erdekeben, hogy meggy6z6djilnk rola, hogy minden objektum beroltodott, fel kell vennunk Update kerelrminket egy olyan fuggvenybe, amely a dokumentumtorzs betoltesekor indul el. A torzs betoltese utan elinditja az Update fuggvenyt, amely, ahogy latharjuk, atadja a korabban emlftett parametereket. A kerelern egy masik fontos resze, bogy visszajelzest adjunk a felhasznalonak a kerelern allapotarol. A folyamat megjelenitesehez rendelkezunk egy di v elemmel, amelynek azonosltoja 'loading'. Amikor valaszt kapunk az Aj ax objekrumtol, megjelenitOnk egy betoltesi uzenetet, ahogy ezt a konyv els6 reszeben is tettuk. Miutan megkapjuk a valaszt a rnotortol, szuksegunk lesz egy helyre, ahol hozzaadhatjuk azt az oldalhoz, Ez a hely a di v elem lesz, amelynek a body azonosit6t adtuk. Bizonyara felnlnt, hogy ennek a fejezetnek a fogalmai megegyeznek a konyv els6 reszeben latottakkal. Annyi a kulonbseg, hogy itt, a konyv masodik feleben, mar van

egy tiszta modszerunk ezeknek a feladatoknak a vegrehajtasara, ami nagyban megk6nynyiti a nagyszabasu fejlesztest, es meretezhetobbe teszi alkalmazasainkat. Lepjunk tovabb anal, hogy letrehozzuk a korabban ernlitett onResponse objekrurnot. Ez az objektum fogja tartalmazni elsa fuggvenyhtvasunkat az Ajax objektum fele,

Motorfiiggvenyek as -tulajdonsagok

Amikor letrehozunk egy vlsszahivo fuggvenyt a kerelernhez, ellendriznunk kell a valasz keszenleti allapotat, hogy tudjuk, hogy az befejezodott, es keszen all az elemzesre .. Ahhoz, hogy motorunkkal ellenorizzuk a keszenleti allapotot, eloszor meghivjuk checkReadyState neva elso Ajax-fuggvenyunket. A kovetkezo kodreszlet onResponse fuggvenyunkbol szarrnazik, amely vegrehajtja ezta hfvasr:

function onResponse() (

if (Aj ax. checkReadyState ( , loading' ) (

1/ Itt elemezzuk a valaszt

A kerelem keszenletl allapotdnak befejezodese utan elemezherjuk az adatokat, abogy azt

a 3. fejezetben is tettuk, Az ada tok elernzesehez az Aj ax objektum egy rnasik, ge t Re sponse nevti fGggvenyt tartalrnaz, Ez a fuggveny a megfelelo adatformarurnor aelja a kiszolgal6t6l kapott fejlecvalasz alapjan. Mas sz6val, nem kell erniatt agg6dnunk, ez megtortenik magatol, ami az egyik oka annak, bogy ez az objektum rnegkonnyiti az elerunket, Ezert, ha van valasz, es annak tartalomnpusa XML, ez a fuggveny a responseXML erteket fogja visszaadni az elsa documentElement-tel, hogy az adatok azonnal keszen alljanak az elernzesre. Amennyiben az adatok nem XML formaturnuak, a fuggveny a responseText erteket ad]a vissza,amely belatasunk szerint hasznalhato, A kovetkezd egy gyars pelda arra, hogy milyen egyszeruen hasznalhatjuk ezt a fuggvenyt az onResponse visszahfvasban.

function onResponse() {

if (Aj ax. checkReadyState ( , loading') = = "OK") {

var categories = Ajax.getResponse() . get ElernentsByTagName ( 'category' ) :

for (var i=O: i<categories. length; i+ +)

documen t . get El ernen t By Id ( "body") . innerHTML + =

.. Ajax.getResponse() .getElernentsByTagName('category') [il ... firstChild.data +"</br>";

Ez a mintak6d kiolvassa az osszes karegorla-csomoponrot az XML~b61, es vegiglepked azokon, hogy feltoltse a body elern innerHTML tulajdonsagat, ami egy kategorialistat eredrnenyez az oldalon, Mivel a JavaScript nem tartalmaz adattipusokat es taglathatosagot, terrneszetesen nem kovetelrneny ezt a fuggvenyt hasznalni egy valasz fogadasahoz, rnrvel ez csak a fejlesztes egyszenlsftesere szolgal Ha egyszenlen csak karakterlanckent akarjuk megtekinreni a valaszt, akkor meghjvhatjuk kozvetlenul az Ajax objektum kerelern tulajdonsagat, es annak hasznalataval elerherjuk a responseText, lllerve respon-

seXML tulajdonsagot. .

Ebben a Iejezetben egy peldat lattunk arra, hogy a motor hogyan egyszerusiti Ie kerelmemket azaltal, hogy ktkuszobol rengeteg tobbletrnunkat, es lehetove teszi a szarnunkfa, hogy az alkalrnazas mas reszleteire figyeljunk. A kovetkezo ket fejezet azt irja Ie, hogy milyen egyszeru a hibakereses az elkeszult motorral, es miIyen rugalmas a motor abban a tekintetben, hogy vegtelen sok m6don teszi lehetove szarnunkra a boviteset es meretezeser.

Hibakereses

A hibakereses a JavaScript programokban evekig nern tartozott a legegyszerubb dolgok koze, mert hranyoztak hozza az eszkozok es a natfv modszerek. Termeszetesen mindig letezett a 8.1. abran lathato egyszertl, de megbizharo figyelmeztetd ablakos hibakereses, valamint az onerror esemenyt hasznalo bonyolultabb megoldasok is.

p~ ~.iOfd.· ..•. I." •• ,

[ ·000u·1

8.1. abra

A jot beudl: figyelmeztet{i ablakos htbakereses

Ez a fejezet roviden bernutatja a figyelmeztet6 ablakos hibakereses bonyolultabb rnodszereit, amelyek az XHR objekrum onerror esemenyenek es responseText tulajdonsaganak hasznalataval valosfthatok meg. Ezzel egyurr a fejezet nehany olyan eszkoz targyalasat helyezi a kozeppontba, arnelyeknek segftsegevel annyira k6nnyen vegezhetunk hibakeresest Ajax alkalrnazasainkban, hogy nem is fogjuk erteni, hogyan fejleszthettunk egyaltalan valaha is nelkuluk, Ezek az eszkozok az Internet Explorer (IE) Developer Toolbar, a Safari Enhancer es szernelyes kedvencern, a Firefsug, A fejezetben szerepelnek kepernydkepek

a vegleges alkalmazasbol, arnelyben kulonfele, a fejezet soran targyalt megoldasokkal vegzunk majd hibakeresest. Kezdjtik a JavaScript sajar onerror esernenyenek targyalasava!l

A JavaScript onerrer esemenye

A JavaScript j6 nehany beepuett esernennyel rendelkezik a kulonfele helyzetek kezelesere, Ezek egyike az onerror eserneny, amely eleg sokat segithet nekunk a webalkalmazasok hibainak keresese soran Az onerror eserneny hasznalata lehetove teszi szarnunkra

az osszes futasidoben fellepd javascript-hiba elfogasat, Ez az eserneny harom parametert ad vissza, amelyek barrnely altalunk rneghatarozott egyedi visszahivo fuggvenyben kezelhet6k. Ez a harem parameter a kapott hibauzenet, a problemas fajl URL-je es a hibat okoz6 fajl soranak szarna, Ez az eserneny tohbnyire hasznos, de neha annyira homalyos lehet, hogy csak az ertheti meg, aki intim isrneretsegi viszonyban van a hibat okozo k6ddal.

Az onerror eserneny beallitasanak erdekeben letre kell hoznunk egy visszahivo fuggvenyt, amelyre az esemeny rnutatni fog. Ez a visszahivo fuggveny a korabban ernlitett harem pararnetert fogadja.

unction errorHandler (message, urI. line)

II Egyedi hibakezeles megva16sitasa II true vagy false ertek visszaadasa

onerror = errorHandler;

Az errorHandler fuggvenynek true vagy false erteket kell visszaadnia artol fi.igg6en, hogy meg akarjuk-e jeleniteni a bongeszo szabvanyos hibauzenetet, Ha true erteket adunk vissza, a bongeszo nem jeleniti meg szabvanyos hibauzenetet, es forditva. Terrneszetesen a false hasznalata nemikepp felesleges, hacsak nern ket kulonbozo m6don akarjuk kezelni a hibauzenetet, Ahhoz, hogy sajat egyedi hibakezeld uzenetunk [elenjen meg valarni olyasmit tehetunk, mint ami a kovetkezo peldaban lathato:

<h ml> <head>

<script type=·text/javascript">

function errorHandler(message, urI, line) (

var errorMessage = "Error: '+ message +'\n'; errorMessage += 'URL: "+ ur I +"\n"; errorMessage += 'Line Number: '+ line +"\n'; alert(errorMessage);

return true;

onerror = errorHandler;

func ion invokeError() {

allllert ("Hello World!"); 1

</script>

</h ad>

<body>

<input type="button" value="View Error" onclick."invokeError();" I> </body>

</html>

Ebben a peldaban egy gomb szolgal a hiba kivaltasara, rnlvel az invoke Error tagfuggvenyben lev6 alert fuggvenyt nern irtuk meg rendesen, A hiba fellepese utan az onerror eserneny elinditja a visszahfvo fuggvenyt, es atadja neki a hibaval kapesoJatos harem parametert, Az altalunk Ietrehozott errorHandler nevu visszahivo fuggveny osszefuzi a hiba karakterlanc valtozatar, es rnegjelenft egy flgyelrneztetest a felhasznalonak. A 16. fejezetben letrehozzuk maid ugyanennek a fuggvenynek egy bonyolultabb valtozatat, amely egy e-mailt kGld nekGnk (fejlesztoknek) egy hiperhivatkozassal a hi bat tartalmaz6 fajlra Egyel6- re lathatjuk, hogy a hibakezelesnek eza m6dszere hasznos lehet a hibakeresesnel, mivel valamivel robb inforrnaclot jelenit meg szarnunkra, mint a bongeszok altai kinalt beepiten hibakezel6k. Terrneszetesen ez meg fog valtozni, amikor elkezdjGk a bdvitmenyek telepitesenek targyalasat, de ez a rnodszer akkor is eletkepes megoldas az alkalmazasok hibsinak kovetesere,

response Text

A hibakeresesre hasznalhato bovitmenyek targyalasa elatt megnezzuk a flgyelmeztetd ablakos hibakereses meg egy forrnajit. Ha egy XHR-b61 kapott valasz "gyors es piszkos" megjelenltese a eel, akkor hasznalhatjuk a re,sponseText rulajdonsagot. Ez a tulajdonsag az XHR objekrum resze, es a kiszolgalotol erkezett barrnilyen tipusu valasz karakterlancvaltozatat adja vissza. Ez lehet XIV1L, sima szoveg, ]SON stb. A figyelmeztet6 ablakos hibakeresessel hasznalva ez segfthet megerteni a kezelendo dokumentum szerkezetet. A szerkezet megisrnerese utan egyszenfen tervezhet6 egy rnegoldas a valaszban talalhato elemek eleresere, Amikor XML formaturnrnal dolgozunk, lathatjuk a csom6pontok szerkezeter, es hogy azokat hogyan agvazzak be szuleik es 6seik stb.

Ha ez rrnfkodik, a respon.seXM.L tulajdonsag hasznalataval rnegcelozhaquk azokat a megfelel6 adatokat, arnelyekre a megjelenjtesnek vagy az adatkinyeres jovahagyasanak celjab61 van szuksegunk.

IE Developer Toolbar

Az IE Developer Toolbar (Internet Explorer fejleszt6i eszkoztar) eleg j61 hasznalhato webalkalrnazasok hibakeresesere az Internet Explorerben, kulonosen azert, rnert a beepiteu JavaSeript hibakonzol hihetetlenul hornalyos, es egyaltalan nern nevezhet6 .segrt6kesznek Ebben a fejezetben felfedezzuk, hogy ez az eszkoz hogyan teszi lehetove szamunkra

a gyorstar kikapcsolasat, a navigaciot a DOM-ban, valarnint osztaly- es azonoslto informsci6k megjeleniteset a bongeszoben. Miei6tt rnegtanulnank, hogyan hasznalhatjuk ezeket a szolgaltatasokat, eloszor telepitenunk kell a bcvitmenyt.

A b6vftmeny telapftesa

Az IE Developer Toolbar a http://www.microsoft.com/downloads cimr61 t61thet6 Ie, Miuran letoltortuk es telepitettuk az eszkoztarat, eleg egyszenien elkezdhetjuk hasznalni. Valasszuk a View (Nezer) menu. Toolbars (Eszkozrarak) pontjanak Developer Toolbar (Fejlesztoi eszkoztar) pontjat, Ez megieleniu az eszkoztarat az IE tetejen. Az eszkoztar beallitasa utan kattinthatunk a View DOM (DOM rnegtekintese) parancsra, vagy a View menu Explorer Bar (Bongeszosav) Jenyfl6 menujebol kivalaszthatjuk az IE DOM Explorer elernet, Ezeka lehetosegek elerhetove teszik szarnunkra a DOM Explorert, arnelyet szarnos hibakeresesi celra felhasznalharunk, amelyek mindegylkerol szo lesz most.

A gyorstar kikapcsolasa

Az egyik leghasznosabb hibakeresesi szolgaltatas a gyorstar kikapcsolasanak lehetosege, amit biztosan ertekelunk majd, ha mar eltoltommk valarnennyi idot alkalmazisok tesztelesevel az Internet Explorerben. Az Internet Explorer gyorstara mindig megnehezitette a tesztelest,es annak kiurlresi eljarasa rol sok kauintassal jar, sokaig tart, es nem valarni megbizhato. Ennek a lehetosegnek a beallltasahoz valasszuk a Disable (Kikapcsolas) parancsot az eszkoztaron, majd a Cache (Gyorstar) elernet a leny1l6 menu ben klnalt valasztekbol. Ennek

a Iehetosegnek a beallltasa eseten soha tobbet nem kell kiuritenunk a gyorstarat, de jegyezzuk meg, hogy minden alkalomrnal vissza kell :iillftanunk ezt a beallitast, arnikor ujraindltjuk az Internet Explorert, mivel az nem menti ezt a beallitast.

Naviglici6 a DOM-ban

Az eszkoztar egy masik hasznos szolgaltatasa a DOM-ban val6 navigaciot teszi lehetove, A DOM Explorer lehetove teszi szarnunkra egy webalkalrnazas osszes cimkejenek rnegtekinteset, Ehhez eleg egyszertfen csak kivalasztanunk az eszkoztaron a View DOM (DOM rnegtekintese) gam bot. A DOM Explorer bal oldalan egy fanezetet fogunk Iatni, amely

a bongeszoben eppen aktiv dokumentum szerkezetet abrazolja. Ezutan az egyes clmkek mellen lev6 plusz- es mfnuszjelek kivalaszrasaval navigalhatunk a DOM-ban. Ahogy kulonbozo elerneket valasztunk ki a szerkezetben, egy ellenszenves villogo kek keretet latunk

a kivalasztott cirnke korul. Ez az ellenszenves keret valojaban meglehet6sen hasznos, mivel segitsegevel k6nnyen megtalalhatunk elemeket az oldalon. A DOM Explorer nezet egy rnasik szolgaltatasa az, hogy minden alkalommal, amikor kijelolunk egy elernet, nev szerint megjeleniti a cirnkekhez tartoz6 jellemz6ket es stilusokat, valarnlnt azok aktualis erteket.

A 8.2. abran lathatjuk, hogyan is nez ki a DOM Explorer.

A legtobb alkalmazasban a teljes DOM rnegjelenjtesekor meglehet6sen bonyodalrnassa, s6t szinte lehetetlenne valhat az elernek megkeresese, Ezert hasznos a Find Element (Elern keresese) leheroseg, Ezt a parancsot ugy erhetjuk el, hogy a DOM Explorerben

a Find (Kereses) parancsot, majd a lenyi16 mentlben a Find Element elemet valasztjuk Megnyitasa utan barrnely elernre rakereshetunk az oldalon. A leherosegek a kovetkezok Element (Elem), Class (Osztaly), Id (Azonosit6) es Name (Nev). A 8.3. abra mukodes kozben mutatja a Find Element szolgaltatast.

Uw.rJ 0=

'ID~i_H.!..!:

"'l <U,> 10;'1111>

'" <A dass.::a'Itah!t) lO.od)N1IJo.t~...JW..O) - iU..;.o

... <LI)-

rf'<D~~~~,"-(]> .:. <'I,l.>

... <1...1'>

B.2. abra

A DOM-ban oaio navigilci6 segilhetje!fedezni ajulilsidOben jelfepo prob!emakal

if! <Ad.H~!;M'1t.!lD!;r> iii <ON~>mt_I,>'

.,;. <l)WtJ;...tr~> '.<AdM~~~> + <Adai~>

+ <U.)-

-+ <Dfi~PN)I

B.3. abra

Nem jeltetlem'ilnohez megadou elemeeei meglaltfilni (I DOM-ban

A fanezet a DOM Explorerben megjeleno harem tabla egyike, a masik kett6 egy csomopontjellemzo tabla es egy stilusinformacios tabla. A csornopontjellemzd tabla jellernzoinformaciokat jelenit meg az egyes csom6pontokr6!. Tovabbi hibakeresesi szolgaltataskent

lehetove teszi szarnunkra jeHemz6k felvetelet, illetve eltavolitasat is, A stilusok tablaja

a ranezetben talalhato egyes I-ITML-cimkekr61 tartalmaz stiluslnforrnaciokat. A fanezetben [orten6 navigacio soran minden altalunk kivalasztott cimke rnegjeleniti stilusinforrnacioit a stilustablaban. A 8.4. abran mukodes kozben lathatjuk mindket tablat.

_ ' 1000

AI, '" _tj.-J

I:PJ~·Ci.J'-I'1ri.,,1

.:--~ :c'-. ...

r~ Il~

.,.,.,..., ..ntto ...

ht5tyleT f'IOOi!

8.4. abra

Csom6ponyclfemz6k tis Sli/usok

Oszt8Iy~ as azonosft6infomu\ci6k megtekintese

Az eszkoztarnak ez a szolgaltatasa egyszern: lehetove teszi szarnunkra osztaly- es azonositoinformaciok rnegtekinteset. Ez nagyszenf rnodszer ana, hogy informaclokat gy11jtsunk ossze egy webalkalmazasrol. Ha gondot okoz nekunk annak kitalalasa, hogy adou elemek hal vannak az oldalba agyazva, akkor hasznalhatjuk ezt a szolgaltatast,

A Safari Enhancer

Ha rorreneresen Macintosh gepet hasznalunk, es hibakeresest akarunk vegezni JavaScript alkalrnazasunkban, akkor nagyszeru eszkoz a Safari Enhancer. A Safari Enhancer pontosan azr reszi, arnire a neve utal: nagyszertf kiegeszftese a bongeszonek, es segit oIyan JavaScript-hibak megtalalasaban is, arnelyeket egyetlen rnasik altalarn ismert eszkoz sem kepes felfedezni.