Obsah Úvodem
9
1. Úvod do Ajaxu
11
Jak Ajax funguje?
13
Popis Ukázky
Jaké jsou možnosti tvorby interaktivních webových aplikací? Co je třeba znát? Jak fungují technologie Ajaxu Jak funguje volání kódu přes IFRAME (jak se to řešilo před Ajaxem)
Jak mohou fungovat dynamické aplikace na protokolu HTTP Kompatibilita Ajaxové aplikace s nejpoužívanějšími prohlížeči Internet Explorer 7 Mozilla Firefox 2 Opera
Výhody a nevýhody Ajaxu Výhody Multiplatformovost versus kompatibilita Problémy při „kroku zpět“ Omezení vyplývající z asynchronního zpracování požadavků Ajax versus nové koncepty moderních prohlížečů Potenciální zvýšení komunikační zátěže mezi klientem a serverem Hospodaření s výkonem procesoru klientských stanic Co nenajdou vyhledávače, to neexistuje
13 13
15 16 16 18
19 22 22 22 23
23 23 24 24 24 25 25 25 25
2. Jednoduchá řešení založená na Ajaxu
27
„A“ v názvu AJAX znamená „asynchronní“ „J“ v názvu AJAX znamená „JavaScript“
27 31
První skript v JavaScriptu – výpis textu Proměnné a výpis jejich obsahu Základní programové konstrukce: cyklus a podmínka Identifikace prohlížeče JavaScriptový kód v kontextu stránky HTML versus kód v samostatném souboru
K1522.indd 3
32 33 35 38 39
6.5.2008 9:32:43
4
Obsah Nikdo není neomylný – potenciální chyby v JavaScriptu Formuláře na webových stránkách Obsluha událostí pomocí JavaScriptového kódu
40 41 42
Ajaxové aplikace s využitím objektu XMLHttpRequest pro přenos informací ze serveru na pozadí aplikace HTML
45
Vytvoření objektu XMLHttpRequest pro různé typy prohlížečů Využití metod objektu XMLHttpRequest Zpracování odpovědi na XMLHttpRequest Ošetření výjimek při práci s XMLHttpRequest Změna obsahu dokumentu HTML pomocí innerHTML Přidání nového uzlu
Ajax a kaskádové styly Snímání polohy kurzoru Zobrazení polohy kurzoru Dynamické vložení textu HTML z externího dokumentu Dynamické vložení tabulky z externího dokumentu
Ajax a XML
54 55 56 57 60
62
Zpracování informace z dokumentu XML generovaného přes XMLHttpRequest
63
Zpracování obsahu vygenerovaného serverem
64
Vložení textu vygenerovaného serverem
Zpracování případných chybových kódů serveru HTTP
3. Vývoj a ladění ajaxových aplikací Výpis informací z hlavičky Ladění ajaxových aplikací Využití Využití Využití Využití Využití Využití Využití
nástroje nástroje nástroje nástroje nástroje nástroje nástroje
JSLint Microsoft Script Debugger Internet Explorer Developer Toolbar FireBug FireBug Lite pro ostatní prohlížeče JavaScriptDebugger Opera Developer Tools
Ladění výkonu ajaxové aplikace Měření doby trvání běhu bloku kódu
K1522.indd 4
45 46 47 50 51 53
64
66
69 69 70 70 71 73 74 76 77 77
78 78
6.5.2008 9:32:43
Obsah
4. Ajax ve spojení s PHP
81
Stručný úvod do PHP
82
Základní programové konstrukce Práce s textovými řetězci Aplikace „Nazdar světe“
Interaktivní webový formulář se skripty PHP Jednoduchý kalkulátor pro operaci dělení Interaktivní ajaxový kalkulátor bez potvrzování Metody odevzdávání parametrů: GET versus POST Povolení a nastavení výpisu chyb Ošetření chyb zpracování na serveru – pro ladění Ošetření chyb zpracované na serveru – pro uživatele Ošetření chyb zpracování na serveru – pro administrátora Zpracování textu načteného ze souboru Ajaxové aplikace přenášející požadované informace ze souboru
Interaktivní validace zadávaných údajů Kontrola zadaných údajů podle seznamu Interaktivní pomoc při zadávání údajů Zobrazování údajů z domén třetích stran
Dokumenty XML Generování dokumentu XML pomocí funkcí pro textové řetězce Generování dokumentu XML kódem PHP – pomocí DOM Přenos dokumentu XML ke klientovi přes XMLHttpRequest Přenos dokumentů XML z domén třetích stran Interaktivní zobrazení údajů z XML katalogu
Databázové ajaxové aplikace využívající PHP Jak vytvořit databázi a naplnit ji údaji Výběr údajů z databázových tabulek pomocí klauzule SELECT Zobrazení údajů z databázové tabulky Generování dokumentu XML z databázové tabulky Parametrický výběr údajů a jejich zobrazení Zobrazení údajů z databázové tabulky na základě výběru uživatele bez opětovného načtení stránky HTML
5. Ajax ve spojení s ASP.NET Příprava prostředí pro vývoj aplikací ASP.NET Využití nástroje Visual Web Developer Instalace doplňku Ajax Extensions pro ASP.NET do Visual Studia 2005 Instalace ASP.NET AJAX Future CTP Výběr programovacího jazyka pro ajaxovou aplikaci ASP.NET
K1522.indd 5
5
82 84 86
90 90 92 94 95 97 98 98 99 101
106 106 108 111
114 114 115 117 119 121
125 125 126 127 130 131 132
135 135 136 137 138 139
6.5.2008 9:32:43
6
Obsah Jak na komponenty využívající asynchronní callback
Ajaxová aplikace na platformě ASP.NET 2.0
142
Vytvoření procedury pro inicializaci aplikace Spuštění aplikace ASP.NET Kód HTML aplikace ASP.NET na straně klienta Vytvoření procedury pro obsluhu události Pohled do zákulisí aplikace ASP.NET
145 146 148 150 150
Základní prvky doplňku ASP.NET Ajax Extensions
151
Úprava aplikace Hello Ajax pro přenos údajů bez nového načtení stránky HTML Stránka s několika samostatně aktualizovanými oblastmi Stránka s vnořenými aktualizovanými oblastmi Přenos údajů ze souboru XML na pozadí Zobrazování průběhu aktualizace prvku UpdatePanel
151 154 155 157 160
Automatické časování aplikace pomocí prvku Ajax Timer AJAX Control Toolkit
161 163
Formulář s interaktivní nápovědou s využitím prvku AutoCompleteExtender Formulář s asynchronním doplňováním údajů Validace údajů na straně klienta s využitím prvků FilteredTextBoxExtender a TextBoxWatermarkExtender
Vytvoření vlastního ASP.NET AJAX extenderu Vývojové prostředí pro vytvoření extenderu Vytvoření projektu ASP.NET AJAX extenderu Vytvoření kódu extenderu spouštějícího se na straně klienta Vytvoření kódu pro definování vlastností extenderu Kompilace a sestavení extenderu Použití a otestování extenderu ve webové aplikaci
6. Ajax a webové služby Co je webová služba a jaké má výhody Vývoj vlastní webové služby Projekt webové služby ve vývojovém prostředí Visual Web Developer
Publikování webové služby Podpora volání metod webové služby z ajaxové aplikace ASP.NET Stránka ASP.NET využívající webovou službu
Klient PHP webové služby Ajaxový klient PHP webové služby Webová služba využívající databázi Přizpůsobení metody webové služby pro spolupráci s prvkem AutoCompleteExtender
K1522.indd 6
140
164 165 167
170 170 171 173 176 177 177
181 181 182 182
185 186 187
191 193 195 199
6.5.2008 9:32:43
Obsah
7. Prototypy praktických řešení pomocí Ajaxu
201
Využití internetových služeb Googlu
201
Ajaxová aplikace využívající vyhledávač Google Ajaxová aplikace využívající Google Maps Google Suggest Volání služby Google Suggest
201 204 206 207
Aplikace využívající webovou službu Windows Live Search
213
Windows Live Search Vývojářská licence pro službu Windows Live Search Vytvoření lokální webové služby využívající Windows Live Search Metoda lokální webové služby pro vyhledávání Metoda lokální webové služby pro vrácení počtu nalezených dokumentů Otestování webové služby Aplikace ASP.NET Ajax využívající službu Windows Live Search Stránkování výsledků vyhledávaných pomocí služby Windows Live Search Vlastní interaktivní vyhledávání Zkrácení URL pomocí služby Minilink
Zobrazování údajů z kanálů RSS Formát dokumentu RSS Zobrazení údajů z kanálu RSS
Ajaxový Chat Návrh aplikačního rozhraní Návrh databáze Skript PHP na serveru – připojení se k databázi Skript PHP na serveru – ošetření chyb při práci s databází Skript PHP na serveru – dotaz SQL Skript PHP na serveru – ukládání zpráv do databáze Skript PHP na serveru – výběr zpráv z databáze Skript PHP na serveru – příkazy pro správu údajů Kompletní kód PHP skriptu
8. Aplikační rámce Napíšeme si vlastní framework Google Web Toolkit (GWT) Prototype JavaScript Framework AJAX Toolkit Framework Dojo Ajax toolkit Echo 2
Rejstřík
K1522.indd 7
7
213 215 215 218 221 221 223 228 230 234
237 237 239
242 242 243 245 245 246 247 248 250 250
257 257 261 261 261 261 262
263
6.5.2008 9:32:43
K1522.indd 8
6.5.2008 9:32:43
Úvodem Účelem této publikace z edice „Hotová řešení“ je poskytnout přehled o koncepci a fi losofii aplikací Ajax a na praktických příkladech demonstrovat souhru různých technologií aplikovaných s jediným cílem – vylepšit interaktivitu a funkcionalitu uživatelského rozhraní webových aplikací. V omezeném rozsahu může publikace posloužit i jako referenční příručka nejjednodušší syntaxe JavaScriptu, PHP a APS.NET, a to v rozsahu, který je potřebný pro publikovaná řešení. V široké škále řešení z různých oblastí, postavených na nejpoužívanějších technologiích, určitě najdete odpovědi na různé otázky, na které jste narazili, pokud jste se už studiem principů aplikací Ajax zabývali. Při vývoji webové aplikace, která využívá aplikace „Ajax“, doporučujeme následující postup: V první fázi je potřebné pracovat nejdříve na konceptuální úrovni a objasnit si a rozpracovat všechny požadavky, které budou na aplikaci kladeny. Potom na logické úrovni navrhnout strukturu údajů, případně i objektů a podobně. Následně navrhneme fi losofii asynchronní výměny údajů mezi serverem a klientským prohlížečem. Po přechodu na fyzickou úroveň vývoje aplikací, která je už implementačně závislá, je výhodné vyvíjet serverový kód izolovaně, bez spolupráce se zbytkem kódu aplikace, a tak otestovat jeho funkcionalitu. Většina moderních aplikací využívá databáze, takže samostatně vyvíjíme a testujeme i databázovou vrstvu. Neděláme si iluze, že se nám podaří uhádnout řešení právě pro váš konkrétní problém, i když se o to budeme snažit, ale máme větší šanci uhádnout typické scénáře pro které se Ajax nejčastěji aplikuje. Pro jednoduchost a názornost kódu nebudeme většinou v jednotlivých návodech pro řešení ošetřovat možné chyby a výjimky. Takový postup si samozřejmě v reálné aplikaci dovolit nemůžeme. Princip ošetření chyb a výjimek si ukážeme při popisu jednotlivých technologií a skriptových systémů.
K1522.indd 9
6.5.2008 9:32:43
