ajax00.qxd
1/24/2007
11:19 AM
Page xvii
Tartalomjegyzék
ajax00.qxd
1/24/2007
11:19 AM
Page xviii
ajax00.qxd
1/24/2007
11:19 AM
Page xix
A szerzõrõl . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . vii Köszönetnyilvánítás . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ix Bevezetés . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xi A könyv példakódjai . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xiii Áttekintés . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xv Tartalomjegyzék . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xvii
I. rész • Az elsõ lépések 1. fejezet • Az Ajax bemutatása Az XML DOM . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4 Az elõnyök mérlegelése . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
2. fejezet • A kérelem Az XMLHttpRequest részletesen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7 Szabványos XHR . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8 Adatbázis-megfelelõ XHR . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9 Adatok küldése az adatbázis-megfelelõ XHR-eknek . . . . . . . . . . . . . . . . . 10 Az objektum létrehozása . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11 Aszinkron adatátvitel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12 A készenléti állapot . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14 HTTP-állapotkódok és -fejlécek . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
ajax00.qxd
xx
1/24/2007
11:19 AM
Page xx
Webalkalmazások fejlesztése AJAX segítségével
3. fejezet • A válasz XML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19 Elemek . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20 Jellemzõk . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21 CDATA . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22 Az XML elemzése . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23 JSON . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27 A JSON nyelvtana . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28 A JSON használata . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29 A JSON elemzése . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30
4. fejezet • A válasz leképezése XHTML-lel és CSS-sel XHTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33 CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36
II. rész • A JavaScript-motor létrehozása és használata 5. fejezet • Objektumközpontú JavaScript Objektumközpontú megközelítések . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42 A new mûvelet használata . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42 Literális jelölés . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43 Társításos tömbök . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43 JScript.NET . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44 Objektumkonstruktorok . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45 Példányok . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45 Tulajdonságok . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46 Tagfüggvények . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47 Prototípusok . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49 Példányok . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50 Tulajdonságok létrehozása . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51 Paraméterek felülbírálása és felülírása . . . . . . . . . . . . . . . . . . . . . . . . . . . 52 A tulajdonságok védelme . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52 Tagfüggvények . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53 Objektumok bõvítése prototípusos tagfüggvényekkel . . . . . . . . . . . . . . . 53
ajax00.qxd
1/24/2007
11:19 AM
Page xxi
Webalkalmazások fejlesztése AJAX segítségével
6. fejezet • A motor elkészítése Egyedi Ajax burkoló létrehozása . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55 Kérelmezés . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56 A készenléti állapot . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57 A válasz . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 58 Ajax-frissítõ létrehozása . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59 Az objektum megalkotása . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59 A kérelmezõ objektum frissítése . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60 A válasz . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61
7. fejezet • A motor használata Az elsõ lépések . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 63 Kérelmek elkészítése . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 64 Motorfüggvények és -tulajdonságok . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65
8. fejezet • Hibakeresés A JavaScript onerror eseménye . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 68 responseText . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69 IE Developer Toolbar . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69 A bõvítmény telepítése . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 70 A gyorstár kikapcsolása . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 70 Navigáció a DOM-ban . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 70 Osztály- és azonosítóinformációk megtekintése . . . . . . . . . . . . . . . . . . . . 72 A Safari Enhancer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72 A Safari Enhancer telepítése . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73 A JavaScript konzol . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73 A FireBug . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 74 A FireBug telepítése . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 74 A parancssor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75 Üzenetek naplózása a konzolban . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 77 Naplózási szintek . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 77 Elemek vizsgálata . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 78 Az Ajax kikémlelése . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 80
xxi
ajax00.qxd
xxii
1/24/2007
11:19 AM
Page xxii
Webalkalmazások fejlesztése AJAX segítségével
9. fejezet • A motor bõvítése A Utilities objektum létrehozása . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 83 Állapotkódok kezelése HTTP-objektummal . . . . . . . . . . . . . . . . . . . . . . . . . . . 90 A HTTP-állapotkódok kategóriái . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 92 A HTTP objektum használata . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 98
III. rész • Újrahasznosítható elemek létrehozása 10. fejezet • Összecsukható elemek – harmonikák Lássunk hozzá! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 103 Az XML-szerkezet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 104 Az XML-kérelem . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 105 A harmonika objektum létrehozása . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 106 A panelek mûködése és az adatok megjelenítése . . . . . . . . . . . . . . . . . . . . . . 109 A CSS létrehozása . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 112
11. fejezet • Fanézet Az adatok szerkezete . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 116 A válasz kezelése . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 118 A GUI létrehozása . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 119 Stílus hozzáadása az összetevõhez . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 124
12. fejezet • Ügyféloldali ellenõrzés Lássunk hozzá! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 127 Ellenõrzõ objektumok létrehozása . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 129 A felhasználói bemenet ellenõrzése . . . . . . . . . . . . . . . . . . . . . . . . . . . . 131 Vizuális visszacsatolás a felhasználónak . . . . . . . . . . . . . . . . . . . . . . . . . 133 A kiszolgálóoldal . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 134 A létrehozófüggvény . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 136 A felhasználói adatok ellenõrzése . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 137 Felhasználók bejegyzése és beléptetése . . . . . . . . . . . . . . . . . . . . . . . . . 138
13. fejezet • Adatrácsok Lássunk hozzá! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 141 Adatrács objektum létrehozása . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 143 Az adatok megjelenítése . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 146
ajax00.qxd
1/24/2007
11:19 AM
Page xxiii
Webalkalmazások fejlesztése AJAX segítségével
DataRow objektumok létrehozása . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 147 Adatoszlop objektumok létrehozása . . . . . . . . . . . . . . . . . . . . . . . . . . . . 150 Az összetevõ formázása . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 151
IV. rész • Ajax-minták 14. fejezet • Az Egyke minta Az Egyke minta áttekintése . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 155 Objektum létrehozása az Egyke mintával . . . . . . . . . . . . . . . . . . . . . . . . . . . . 156 Az Egyke objektumok használata . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 159
15. fejezet • A Modell-Nézet-Vezérlõ minta A minta áttekintése . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 161 A minta elkészítése . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 163 A minta használata . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 164
16. fejezet • A Megfigyelõ minta A minta áttekintése . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 167 Megfigyelõk feliratkozása . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 167 A megfigyelõk értesítése . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 167 Megfigyelõk leiratkozása . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 168 Hibakezelõ objektum létrehozása . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 168 Megfigyelõk feliratkozása . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 169 Megfigyelõk értesítése . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 170 Megfigyelõk leiratkozása . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 171 A hibakezelõ objektum használata . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 174
17. fejezet • Az Adattükrözés minta Áttekintés . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 177 A Többfelhasználós minta . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 179 A minta megvalósítása . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 180
xxiii
ajax00.qxd
xxiv
1/24/2007
11:19 AM
Page xxiv
Webalkalmazások fejlesztése AJAX segítségével
18. fejezet • Együttmûködési minták Elõzmények kezelése sütikkel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 183 A Historian objektum . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 184 Az XML fájl létrehozása és megjelenítése . . . . . . . . . . . . . . . . . . . . . . . . 186 A Navigation objektum . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 188 „Húzd és ejtsd” . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 189 A DragDrop objektum . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 190
19. fejezet • Használhatósági minták A visszajelzések, hibák és figyelmeztetések kezelése . . . . . . . . . . . . . . . . . . . 198 Tervezés a kódban . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 201
V. rész • Együttmûködés a kiszolgálóoldallal 20. fejezet • Az Ajax és az adatbázisok együttmûködése Kapcsolat a PHP-vel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 208 A rés áthidalása . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 208 A kérelmek végrehajtása . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 210 A kapcsolat létrehozása . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 215
21. fejezet • Együttmûködés adatbázisokkal: a kiszolgálóoldal Kapcsolódás az ASP.NET-hez . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 225 Kapcsolódás a ColdFusionhöz . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 229
22. fejezet • Az Ajax együttmûködése adatbázisokkal – magas szinten Kötegelt frissítések . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 233 Tömbök küldése . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 234 XML küldése . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 235 JSON küldése . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 236 Kiszolgálóoldali XML és JSON . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 236 XML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 236 JSON . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 237
ajax00.qxd
1/24/2007
11:19 AM
Page xxv
Webalkalmazások fejlesztése AJAX segítségével
VI. rész • Végsõ simítások 23. fejezet • Az alkalmazás biztonságossá tétele Biztonsági rések . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 241 Ajax-kérelmek jelszavas védelme . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 243 Egyedi jelszavak létrehozása . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 243 Jelszavak hitelesítése a kiszolgálóoldalon . . . . . . . . . . . . . . . . . . . . . . . . . . . . 245
24. fejezet • Gyakorlati tanácsok A motor használata . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 249 Tervezési minták . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 250 Összetevõk használata . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 250 Statikus és dinamikus válaszok . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 250 A hibák és visszajelzések kezelése . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 251 Az alkalmazás elõzményei . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 251 Biztonság . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 252 Tárgymutató . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 253
xxv
