Moderní přístupy k tvorbě webových aplikací

Mendelova zemědělská a lesnická univerzita v Brně Provozně ekonomická fakulta

Moderní přístupy k tvorbě webových aplikací Bakalářská práce

Vedoucí práce: Ing. Roman Malo, Ph.D.

Brno 2008

Luboš Bednář

Rád bych touto cestou poděkoval panu Ing. Romanu Malovi, Ph.D., za odborné vedení, cenné rady a připomínky, které mi poskytl při zpracování této bakalářské práce. Dále patří

poděkování

i

mé

rodině

za

veškerou

podporu

během

studia.

Prohlašuji, že jsem tuto bakalářskou práci na téma „Moderní přístupy k tvorbě webových aplikací“ vypracoval samostatně s použitím literatury, kterou uvádím v seznamu. V Brně dne 22. května 2008

....................................................

4

Abstract Bednář, L. Modern approaches to website applications creation. Bachelor thesis. Brno, 2008. This thesis explores the concept of modern website applications creation, espessialy area of Rich Internet Applications (RIA). The aim is to analyze, divide, and compare the modern approaches to creation of web applications. The work includes creation of own framework, which makes possible to realize website application based on Ajax technology. Finally, own web portal is created with utilization of this framework.

Keywords Rich Internet Applications, Adobe Flex, Silverlight, JavaFX, Ajax, JavaScript, XMLHttpRequest, framework.

Abstrakt Bednář, L. Moderní přístupy k tvorbě webových aplikací. Bakalářská práce. Brno, 2008. Tato práce se zabývá problematikou tvorby moderních webových aplikací, zejména oblastí Rich Internet Applications (RIA). Jejím cílem je analyzovat moderní přístupy k tvorbě moderních webových aplikací, rozdělit je podle technologií a následně tyto technologie porovnat. Součástí práce je i praktická část, ve které je cílem vytvořit rámec prostřednictvím kterého je možné realizovat webový portál postavený na technologii Ajax. Na závěr je tento webový portál s využitím tohoto rámce také vytvořen.

Klíčová slova Rich Internet Applications, Adobe Flex, Silverlight, JavaFX, Ajax, JavaScript, XMLHttpRequest, framework.

5

OBSAH

Obsah 1

2

3

Úvod a cíl práce....................................................................................................... 6 1.1

Úvod do problematiky ...................................................................................... 6

1.2

Cíl práce............................................................................................................ 6

Analýza současné tvorby RIA aplikací ................................................................. 7 2.1

Rich Internet Applications ................................................................................ 7

2.2

Rozdělení RIA technologií ............................................................................... 8

2.2.1

AJAX ........................................................................................................ 8

2.2.2

Pluginové technologie RIA..................................................................... 10

2.2.3

Srovnání AJAX vs. pluginové technologie............................................. 16

Metodická východiska .......................................................................................... 18 3.1

Objekt XMLHttpRequest................................................................................. 18

3.1.1

Atributy a metody objektu XMLHttpRequest ........................................ 19

3.1.2

Zpracování požadavku............................................................................ 21

3.1.3

Odeslání požadavku................................................................................ 21

3.2

Komunikace s kódem běžícím na straně serveru............................................ 22

3.3

W3C DOM...................................................................................................... 23

3.3.1

4

Dynamické vytváření nových elementů ................................................. 24

3.4

Zpracování časových limitů............................................................................ 25

3.5

Ajax a bezpečnost ........................................................................................... 25

Vlastní práce.......................................................................................................... 27 4.1

Příprava projektu............................................................................................. 27

4.2

Tvorba AJAX frameworku ............................................................................. 27

4.2.1 4.3

Framework na straně klienta................................................................... 27 Tvorba webového portálu ............................................................................... 32

5

Diskuse ................................................................................................................... 36

6

Závěr ...................................................................................................................... 37

7

Literatura .............................................................................................................. 38

Přílohy............................................................................................................................ 39 A.

Ukázka skriptu frameworku................................................................................ 40

B.

Skript projektu VOŠ ............................................................................................ 43

1

6

ÚVOD A CÍL PRÁCE

1

Úvod a cíl práce

1.1

Úvod do problematiky

Stále více informací se po celém světě zprostředkovává internetem. Televize, rozhlas, noviny a časopisy se tak musejí vyrovnávat s konkurencí velmi silného komunikačního a informačního zdroje, kterým je Internet. Internet má totiž několik velkých výhod oproti ostatním mediím, mezi ty hlavní patří možnost interaktivního zapojení příjemce sdělení, geografické pokrytí a snadné zacílení marketingu s nižšími náklady. Právě z důvodu přilákání co největšího množství potenciálních zákazníků či uživatelů se moderní webové aplikace stále rychleji vyvíjí. Společnosti se tak snaží prostřednictvím

webových

technologií

získat

náskok

před

konkurencí.

Z marketingového hlediska totiž představuje internet velmi výkonný komunikační nástroj, jehož využití je jednou ze základních podmínek pro úspěch podniku na trhu. Nereflektování tohoto aspektu může mít za následek oslabení vlastní situace na trhu. Dalším důležitým aspektem při rozvoji moderním internetových technologií je rostoucí dostupnost vysokorychlostního připojení, které umožňuje

internetovým

aplikacím přibližovat se aplikacím desktopovým, což je oblast kde nastupují tzv. bohaté internetové aplikace (Rich Internet Applications).

1.2

Cíl práce

Cílem této práce je analýza současné situace v oblasti tvorby moderních webových aplikací a realizace rámce pro vývoj webového portálu prostřednictvím technologie Ajax. Oblast tvorby webových aplikací bude zaměřena zejména na moderní přístupy při realizaci Rich Internet Applications (RIA) a porovnání současných technologií. Praktická část se bude věnovat krom vytvoření rámce také vlastní realizace webového portálu.

2

ANALÝZA SOUČASNÉ TVORBY RIA APLIKACÍ

2

Analýza současné tvorby RIA aplikací

2.1

Rich Internet Applications

7

RIA neboli „bohaté internetové aplikace“ pochází z anglického Rich Internet Applications. Jako RIA se označují moderní internetové aplikace vyvíjené s ohledem na komfortnější ovládání, vyšší uživatelský prožitek a celkovou lepší interakci mezi aplikací a uživatelem. RIA asi není možno nějak přesně definovat. V principu se ale jedná o takovou internetovou aplikaci, která se striktně nedrží tradičního request/response paradigmatu. Klasické webové stránky, které dnes na Internetu stále ještě převládají, jsou na straně klienta tvořeny (X)HTML kódem, který je přímo interpretován webovým prohlížečem. Tento princip ale začal být velmi limitujícím faktorem, a proto bylo nutno hledat nové cesty jak toto omezení odstranit, přičemž Rich Internet Applications poskytují nový prostor pro vývoj potřebných řešení. RIA je nesmírně obecný pojem, proto je lépe uvést konkrétní příklady: GMail je RIA, Outlook Web Access je RIA a tak by šlo pokračovat pro tisíce AJAXových aplikací, které jsou dnes na webu k nalezení. To ovšem neznamená, že RIA rovná se AJAX, existuje řada dalších aplikací (Photoshop Express, Sliderocket), které by v HTML, CSS a JavaScriptu prakticky nešly naprogramovat, ale RIA jsou také. Mají společné to, že z uživatelského pohledu sice fungují v rámci prohlížeče, avšak k svému běhu potřebují nějaký plugin (Flash Player, Javu a podobně). Zde ale možnosti RIA ještě zdaleka nekončí, například za RIA se označují i takové desktopové aplikace, kterými jsou Adobe Media Player, eBay Desktop apod. Nakonec nesmíme zapomenout ani mobilní zařízení, které se svými parametry pomalu ale jistě dostávají do situace, kdy bude technicky možné a uživatelsky přijatelné na nich aplikace provozovat. Tato oblast je zatím především z výkonnostních důvodů teprve na počátku, ale pojem RIA budeme slýchat i tady (Bernard, 2007). Na obrázku 1 můžeme vidět, jaké oblasti RIA pokrývají.

2.2

8

Rozdělení RIA technologií

Obr. 1: Hlavní oblasti RIA aplikací, zdroj: http://interval.cz/clanky/rich-internet-applications-v-roce-2008/

2.2

Rozdělení RIA technologií

Jak již bylo naznačeno v předchozí kapitole, Rich Internet Applications lze rozdělit do dvou větví, jednou z nich jsou webové aplikace využívající běžných internetových technologií, které jsou podporovány na úrovni samotných prohlížečů (AJAX). Druhou větví jsou pak aplikace fungující v prostředí prohlížeče, avšak k svému běhu potřebují nějaký plugin (Flex, Silverlight, JavaFX a další). Toto rozdělení je interpretováno na obrázku 2.

Obr. 2: Základní rozdělení RIA technologií, zdroj: http://interval.cz/clanky/rich-internet-applications-v-roce-2008/

2.2.1 AJAX V únoru roku 2005 Jesse James Garrett publikoval na internetu první článek o AJAXu (A New Approach to Web Applications), ve kterém se snaží popsat, jakým způsobem mohou

webové

aplikace

překlenout

mezeru

mezi

tradičními

jednoduchými

desktopovými aplikacemi a webovými prezentacemi. Garrett definoval Ajax

2.2

Rozdělení RIA technologií

9

takto: „AJAX je zkratkou za Asynchronous JavaScript + XML a reprezentuje fundamentální posun k tomu, co je na webu vlastně možné – cokoli.“ 1 Slovo „asynchronous“ značí, že prohlížeč nečeká na odpověď od serveru, nýbrž je schopen odpověď zpracovat až v okamžiku, kdy k ní skutečně dojde. Jinými slovy se přenosy dat odehrávají na pozadí, aniž by musel prohlížeč pozastavit prováděné operace a na něco čekat. To je hlavní částí Ajaxu – můžete zpracovat data od serveru až v okamžiku, kdy server data odešle. Nemusíte zablokovat běh aplikace, dokud data nedorazí. V opačném případě se jedná o synchronní komunikaci, která v kombinaci s pomalým připojením k Internetu může představovat problém.

Obr. 3: Srovnání klasického (synchronního) modelu s technologií Ajaxu (asynchronní) (Garrett, 2005)

Slovo „JavaScript“ v termínu Ajax je také velice důležité, protože právě JavaScript je tím, co řídí úkony odehrávající se v prohlížeči. Ajax spoléhá na JavaScript při spojení se serverem i při zpracování dat přijatých od serveru. Všechny aplikace využívající Ajax, používají JavaScript pro připojení k serveru, na pozadí, a odesílání a příjem dat. Poté, co se potřebná data od serveru přijmou, může být JavaScript použit pro zpracování těchto dat a jejich zobrazení či jiné využití (Holzner, 2007).

1 Viz http://adaptivepath.com/ideas/essays/archives/000385.php

2.2

Rozdělení RIA technologií

10

V neposlední řadě je tu XML, což je technologie, která umožňuje jednoduše, přehledně a efektivně pracovat s čistými daty. Nachází uplatnění nejen na internetu, ale prakticky všude, kde je potřeba pracovat se strukturovanými daty. Spojení XML a Ajax sebou přináší možnost odesílat, přijímat a objektově vytvářet strukturovaná data ve formě textu. Právě objektový přístup k XML a HTML neboli DOM (Document Object Model W3C specifikace) představuje standardizované programátorské rozhraní pro přístup k struktuře, stylu a událostem dokumentu. DOM využívá koncepce OOP (objektově orientované programování), není však vázán na konkrétní programovací jazyk. Tím umožňuje dalším softwarovým aplikacím pohodlně manipulovat s HTML a XML dokumenty a vytvářet tak dynamické webové stránky. DOM umožňuje na přesně určené místo přidat jakýkoli obsah. A dovede to prostřednictvím JavaScriptu, tedy i Ajaxu (W3C DOM IG, 2005).

2.2.2 Pluginové technologie RIA Ačkoliv pro Ajax hovoří hlavně široká integrovaná podpora přímo v internetových prohlížečích, tak existuje mnoho problémů, se kterými se vývojáři musejí vypořádávat. Mezi nejpodstatnější patří tyto: 

Prohlížečů je mnoho a odladit aplikaci tak, aby běžela a vypadala všude stejně, je obtížné a nákladné,



výkonnost JavaScriptu není příliš dobrá,



technologické možnosti HTML/CSS jsou omezené – to vychází z historického zaměření téměř výhradně na zobrazování textu,



standardy se vyvíjejí pomalu, protože je potřeba široký konsenzus,



podpora AJAX vývoje v nástrojích je slabá (v porovnání s jinými technologiemi),



JavaScript jako jazyk má mnoho odlišností od „tradičních“ jazyků typu Java nebo C#, což vytváří bariéry pro vývojáře se zkušeností se serverovým nebo desktopovým programováním.

2.2

Rozdělení RIA technologií

11

Postupem času tak vzniklo mnoho technologií, které se na obrázku 2 seskupují v pravé části. Ač se od sebe vzájemně často výrazně liší, jedno je spojuje - pro jejich běh je potřeba plugin do prohlížeče nebo jiné běhové prostředí (Bernard, 2008).

Adobe Flex Technologie Adobe Flex je v současné době nejrozšířenější pluginovou technologií RIA především proto, že aplikace vytvořené pomocí Flexu běží v Adobe Flash Playeru s bezkonkurenčním tržním podílem. Základ technologické platformy Adobe pro bohaté internetové aplikace tvoří Adobe AIR, Adobe Flex a právě Adobe Flash Player. Tyto technologie zahrnují nástroje, systémy (frameworky), servery, služby a runtimové moduly, které navzájem velmi dobře spolupracují a umožňují tvorbu přitažlivého obsahu s nejširším možným dosahem (Polzer, 2008). Mezi klíčové charakteristiky Adobe Flex patří: 

definice uživatelských rozhraní pomocí MXML se podobá HTML,



stylování aplikace lze zařídit pomocí podmnožiny CSS,



ActionScript 3 dobře kombinuje rysy JavaScriptu a Javy, takže byly zmenšeny bariéry pro vývojáře přicházející z několika různých směrů,



Flex je vyspělá technologie mající za sebou mnoho let vývoje. Začít budovat aplikaci ve Flexu je tedy sázka na jistotu, což se o řadě konkurenčních technologií říct nedá,



Flex framework a základní vývojářské nástroje jsou k dispozici zdarma a od nedávena dokonce jako open source. Všechny zdrojové kódy jsou tedy prosté textové soubory (na rozdíl od klasického Flash vývoje, kde byl veškerý kód uložen v binárních .fla souborech), takže pro vývoj z principu není nutný žádný placený nástroj, ačkoli Adobe nabízí komerční nástroj Flex Builder, který vývoj dost podstatně usnadňuje,



Flex je aktivně vyvíjen, má kolem sebe poměrně širokou komunitu lidí, existuje pro něj řada komponent a open source projektů, jednoduše se jedná o živý a rozsáhlý ekosystém (Bernard, 2008). Dále firma Adobe vyvinula nové prostředí Adobe AIR, díky němuž lze aplikace

vytvořené ve Flexu spustit nejen v prohlížeči, ale také instalovat na desktop. Flex lze

2.2

Rozdělení RIA technologií

12

tedy vnímat i jako technologii pro tvorbu cross – platformních desktopových aplikací, čímž se tato technologie stává ještě zajímavější. Aplikace napsaná jednou běží ve třech operačních systémech – Windows, Mac, Linux. AIR prostředí spouští skutečné desktopové aplikace a poskytuje API pro zapisování souborů na disk, drag & drop operace, přístup k systémovým zdrojům, práci s lokální databází (SQLLite), detekci připojení k síti a mnoho dalšího (SYMBIO Digital, 2008) Aby nezůstalo jen u vyzdvihování kladných stránek technologie Adobe Flex, je nutné poznamenat, že Flex aplikace v porovnání s Ajaxovou na počátku déle stahuje (např. 2,5 MB oproti 750 kB) a také serializace/deserializace proměnných do serverového jazyka může být problémem.

Microsoft Silverlight Ačkoliv technologie Silverlight spatřila světlo světa teprve loni po představení na konferenci Microsoft MIX 2007, už nyní se řadí mezi plnohodnotné konkurenty na poli tvorby bohatých internetových aplikací. Silverlight je mladý, ambiciózní projekt Microsoftu, jehož první verze je stará pouze několik měsíců, ale již nyní je ve fázi beta verze 2.0, která má z pohledu vývoje webových aplikací ještě vetší perspektivu. Základní princip Silverlightu je v podstatě stejný jako u Flexu – uživatelské rozhraní je definováno ve značkovacím jazyku (XAML), o výkonnou část se stará objektově orientovaný programovací jazyk a k běhu je vyžadován plugin v prohlížeči. Aby měl Microsoft šanci uspět v konkurenci Flash Playeru s více než čtyřmi miliardami instalací a tržním podílem větším než 90 %, musel nabídnout nějakou klíčovou výhodu, a tou je .NET. Protože je výkonné jádro Silverlightu totožné s běhovým prostředím plného .NETu (přesně řečeno je v obou běhových prostředích použit stejný CLR – Common Language Runtime), nabízí Silverlight automaticky několik výhod oproti Flexu, které jsou zároveň hlavními charakteristikami této technologie: 

Je na výběr z několika jazyků. Vedle C# a Visual Basicu lze používat též jazyky dynamické, jako jsou Ruby, Python nebo i PHP,



podpora OOP konceptů je v .NET jazycích na vyšší úrovni než je tomu u ActionScriptu Flex technologie, což se projevuje především u větších projektů,

2.2

Rozdělení RIA technologií 

13

serverový i klientský vývoj může probíhat se znalostí jednotného programovacího modelu a jazyka, což je výhodné z pohledu nároků na znalosti vývojářů a potažmo tedy i nákladů. O podobnou integraci se postupně snaží všechny platformy, .NET je však v tomto ohledu v současnosti nejdále,



MS .NET je vyspělá vývojová platforma a o věcech, jako je LINQ (Language Integrated Query) nebo kompoziční model WPF, si zatím Flex může nechat jenom zdát,



vývojářů .NET je na světě řádově více než Flex vývojářů, což je skutečnost zajímavá především pro manažery, kteří musí pro projekt zajistit lidské zdroje.

Oproti plnému .NETu jsou hlavní rozdíly následující: 

Silverlight je cross-platformní. Přímo Microsoft bude podporovat platformy Windows a Mac OS a nejrozšířenější prohlížeče jako Internet Explorer, Firefox nebo Safari, verzi pro Linux potom zajišťuje společnost Novel – jejich běhové prostředí se jmenuje Moonlight,



velikost instalace se pohybuje řádově v jednotkách megabajtů (v současnosti necelých 5 MB), na rozdíl od plného .NET Frameworku, který má desítky megabajtů. Instalace je snadná a rychlá, v principu podobná instalaci Flash Player,



pro programátory je dostupná pouze podmnožina .NET Frameworku, což logicky vyplývá z menší velikosti instalačního balíku. Tato podmnožina je kompatibilní s plným .NET Frameworkem, takže kód napsaný pro Silverlight lze vzít a v nezměněné podobě použít s plným .NETem (Bernard, 2008). I když jak již bylo uvedeno je Silverlight verze 2.0 teprve ve fázi beta, již nyní

existuje několik zajímavých projektů. Například televize NBC připravuje právě ve spojení s Microsoftem projekt NBC Olympics, který bude prostřednictvím Silverlightu zajišťovat online přenos z olympiády v Pekingu. Projekt bude poskytovat přes tisíce hodin vysoce kvalitních video záznamů a přenosů a každé video bude propojené na data a výsledky (Thomson Reuters 2008). Využívat bude hlavní přednost

2.2

Rozdělení RIA technologií

14

Silverlightu, tedy streaming videa. Tato technologie totiž umí streaming v HD kvalitě, což je oblast, ve které má Silverlight v současnosti největší náskok před konkurencí.

JavaFX Není Java jako JavaScript. Zatímco samotný JavaScript slaví četné úspěchy například svojí integrací do technologie AJAX, samotná platforma Java už tolik využívaná není. Řada vývojářů patrně ještě s nelibostí vzpomíná na první verze Javy, které byly pomalé a neefektivní, ale situace se přeci jen trochu zlepšila. Člověk na Java applety zkrátka moc často nenarazí, což se pochopitelně nelíbí tvůrcům, tedy společnosti Sun Microsystems. Odpovědí Sunu na silnou konkurenci v oblasti interaktivních aplikací je tak nový skriptovací jazyk s názvem JavaFX (respektive JavaFX Script; JavaFX označuje celou rodinu produktů). Cílem je pochopitelně zaútočit na oblast RIA mezi desktopy, mobilní zařízení i TV a oslabit tak pozici ostatních soupeřů, jakými jsou již zmiňované Adobe Flex či Silverlight. Koncept je takový, že u systémů s nainstalovanou platformou Java stačí doinstalovat už jen doplňkovou knihovnu, a vše by mělo fungovat (Rylich, 2007).

Obr. 4: Produkty JavaFX v širším kontextu, zdroj: http://java.sun.com/javafx/

V současnosti je těžké říct, jaká budoucnost JavaFX čeká, jelikož celá technologie je zatím ve stádiu vývoje, ale zdá se, že by Sun mohl zaútočit na poli mobilních telefonů a PDA zařízení, jelikož prvním zveřejněným produktem by měl být nový operační systém pro mobilní zařízení, nazvaný JavaFX Mobile.

2.2

Rozdělení RIA technologií

15

Jedná se nepochybně o odvážný projekt, a ačkoliv v oblasti desktopových interaktivních internetových aplikací patrně své konkurenty neporazí, zacílení na oblast mobilních zařízení se určitě vyplatí – je to důležitý segment trhu a s příchodem novějších a výkonnějších smartphones a PDA bude jeho význam i nadále stoupat.

Ostatní pluginové technologie Jelikož oblast RIA není zcela přesně vymezená, lze do ní zařadit mnoho dalších technologií. Mezi zástupce tak mohou patřit například technologie jako Google Gears, XUL, Mozilla Prism, Curl, OpenLaszlo a další. Některé jsou v principu podobné Flexu a Silverlightu, takže pravděpodobně velkou šanci na úspěch nemají, zatímco jiné se snaží řešit poněkud odlišné scénáře - například Google Gears přidává do typicky webových aplikací podporu práce offline. O těchto technologiích je dobré vědět, ale v současnosti nepatří mezi hlavní RIA témata (Bernard, 2008).

Srovnání pluginových technologií Dalo by se také říci Flex, Silverlight a ti ostatní. Ačkoliv nelze s jistotou předvídat budoucnost v oblasti pluginových technologií pro bohatší internetové aplikace, dá se předpokládat, že v budoucnu budou hrát na trhu prim právě zmiňované technologie, kterými jsou Silverlight a Adobe Flex. Ovšem dá se očekávat, že i ostatní řešení si naleznou svůj segment trhu, například JavaFX by mohla výrazně uspět na poli mobilních technologií se svým projektem JavaFX mobile, jelikož Java je již několik let ve standardní výbavě většiny mobilních zařízení. Dále pak také Curl nebo OpenLaszlo jsou svým zaměřením na podnikové intranetové řešení webových aplikací doposud vcelku úspěšní, nyní jde jen o to, jak moc se situace změní po očekávaném ostrém nástupu technologie Silverlight od Microsoftu. Pokud jde o přímou konfrontaci technologií Flex a Silverlight, pak musíme říci, že Flash, resp. Flex, je na trhu již několik let a pro vývoj RIA se značně osvědčil. Silverlight bude těžce dobývat pozice v této oblasti. Výhodou může být možnost psaní aplikační logiky ve více jazycích (C#, VB.NET, Python, Ruby, PHP). Oproti Adobe Flash má také lepší podporu pro spolupráci s prohlížečem. A hlavně díky možnosti

2.2

Rozdělení RIA technologií

16

přehrávat videa až v HD kvalitě přes celou obrazovku je v tomto ohledu Silverlight jasně vepředu. Na druhou stranu výhodou Flashe je zase mnoho hotových aplikací a příkladů na všechny oblasti použití. Nejbližší budoucnost tak bude určitě i nadále patřit Adobe, ačkoliv po vydání finální verze 2.0 bude Silverlight pomalu získávat nezanedbatelnou část trhu, a to především díky komfortnějším možnostem vývoje a ladění aplikace (Rylich, 2008).

2.2.3 Srovnání AJAX vs. pluginové technologie Ačkoliv Ajax ve srovnání s alternativními (pluginovými) technologiemi již nějakou dobu přešlapuje na místě, nelze ho v žádném případě zatracovat. Je stále ve velkém množství používaný a sama skutečnost, že společnost Google jej stále naplno preferuje (GMail) je velmi pádný důkaz o tom, že Ajax stále má co nabídnout. Je tedy na místě pokusit se porovnat výhody pluginových technologií oproti Ajaxu a naopak. Výhody pluginových technologií: 

Protože plugin pochází od jednoho autoritativního dodavatele, odpadá ladění pro různé prohlížeče,



výkon je většinou lepší než u JavaScriptového interpretu prohlížeče, a to řádově,



odpadají technologická omezení HTML/CSS,



vývojová technologie byla většinou vytvořena na míru vývojářům, nikoliv grafikům nebo autorům textů,



podpora v nástrojích je lepší (Flex nebo Silverlight mají funkční WYSIWYG, což se pro někoho, kdo přichází od HTML/CSS, může jevit skoro jako zázrak – ale i jinak ve vývojářských nástrojích často nechybí kontrola syntaxe, debugging a další podobné vymoženosti, na které jsou vývojáři zvyklí z vývoje pro desktop). Nevýhody pluginových RIA technologií vůči AJAXu:



Je potřeba plugin – to je nevýhoda číslo jedna. Ať už vybereme libovolnou RIA platformu, nikdy nebude tak rozšířená jako webové prohlížeče. Relativně

2.2

Rozdělení RIA technologií

17

nejlépe je na tom Flash Player, který je dostupný na více než 95 % počítačů (záleží na verzi), ostatní platformy mají tržní podíl ještě nižší. 

Z uživatelského pohledu je nepříjemné, že ačkoli se například Flex aplikace tváří, že běží v prohlížeči, v mnoha věcech se jako běžná webová stránka nechová. Například nefungují klávesové zkratky prohlížeče, problematické (ale řešitelné) je tlačítko „zpět“, políčka pro zadání textu si nepamatují předchozí vstupy, password manager si nepamatuje hesla, Flex aplikace klidně může posílat nezašifrovaná HTTP data, ačkoli prohlížeč ve stavovém řádku hlásí, že stránka byla načtena přes HTTPS, a podobně. Většinu věcí řešit lze, ale je to náročné a nepříliš zábavné. Jak již tedy bylo výše uvedeno, nevýhody pluginových technologií jsou jen dvě,

ale zato tak zásadní, že třeba Google se zarytě drží AJAX vývoje a nevypadá to, že by na tom chtěl něco měnit. Oba přístupy, ač tedy spadají pod společný termín RIA, jsou v poměrně ostrém kontrastu. Otázkou zůstává kdy tedy použít Ajax a kdy některou z uvedených pluginových technologií pro tvorbu bohaté internetové aplikace. Podle mého názoru by měla být použita pluginová technologie pokud jde o intranetové nebo komplikované aplikace, jako jsou rozsáhlé webové systémy bank nebo pojišťoven, kde je nutná složitá validace dat zadaných do formulářů. Také pokud je potřeba docílit vyššího výkonu, je vhodné využít některou z pluginových technologií. Například programy na editaci fotek typu Picnik nebo Photoshop Express by teoreticky šly naprogramovat v JavaScriptu, ale kromě toho, že by to bylo technicky velmi náročné, by to rovněž bylo velmi pomalé. Výkonnější pluginové technologie jsou v těchto případech vhodnější volbou. Na druhou stranu jsou situace, kdy je vhodnější použít "klasický" AJAX vývoj. Chceme-li například vytvářet převážně prezentační stránky s pouze drobnou aplikační logikou, pak by použití Flexu nebo podobné technologie bylo snad až trestuhodné. Dále také jednoduché formuláře a aplikace, kde je žádoucí co nejširší dosah (například státní správa), je vhodné použít Ajax. A v neposlední řadě je to tehdy, kdy je pro nás naprostou prioritou běh v prohlížeči bez dalších doplňků, jako je tomu v podání Googlu (Bernard,

2008).

3

3

METODICKÁ VÝCHODISKA

18

Metodická východiska

Před počátkem samotné realizace projektu webové aplikace je nejdříve nutné zvolit, která technologie je pro nás nejvhodnější, případně nejefektivnější. Pro rozhodování nám může pomoci předchozí kapitola, tedy chceme-li vytvořit menší projekt se zaměřením na co nejširší veřejnost, o jejíž aplikační vybavenosti nemáme nejmenší představu, použijeme Ajax. Základním pilířem celé technologie je objekt XMLHttpRequest, který tvoří jádro celého Ajaxu. Objekt XMLHttpRequest podporují všechny moderní prohlížeče a umožňuje komunikaci se serverem na pozadí (Holzner, 2007).

3.1

Objekt XMLHttpRequest

Jak můžeme vidět z následujícího zdrojového kódu, vytvoření objektu není nijak složité. Pouze je při vytváření objektu XMLHttpRequest nutné brát na vědomí, že způsob vytvoření objektu je závislý na prohlížeči. Prohlížeče jako Apple Safari, Mozilla, Firefox, Netscape Navigator nebo Internet Explorer 7 totiž využívají pro vytvoření objektu nativní způsob JavaScriptu, jímž je objekt XMLHttpRequest(), zatímco Internet Explorer 6 a starší verze tohoto prohlížeče využívají vlastní objekt ActiveXObject(). Ale v obou případech platí, že jakmile se webová stránka jednou načte, je tento objekt v kódu od začátku dostupný. Následující skript prezentuje vytvoření objektu:

3.1

Objekt XMLHttpRequest

19

3.1.1 Atributy a metody objektu XMLHttpRequest Jakmile je vytvořen objekt XMLHttpRequest, lze okamžitě využívat základní atributy a metody tohoto objektu, které jsou mezi všemi prohlížeči shodné. Rozdíly existují pouze v případě specifických metod či atributů, jak je možno vidět v následujících tabulkách. Tab. 1: Atributy objektu XMLHttpRequest

Atribut

Popis

onreadystatechange

Odkazuje na funkci, která se zavolá při každé změně hodnoty atributu readyState. Atribut slouží pro čtení i zápis.

readyState

Obsahuje stav požadavku. Atribut slouží pouze pro čtení.

channel

Obsahuje kanál použití pro odeslání požadavku. Atribut slouží pouze pro čtení (pouze u prohlížečů typu Firefox, Opera apod.).

responseBody

Obsahuje tělo odpovědi v podobě, jak ji odeslal server. Atribut slouží pouze pro čtení. Pouze u prohlížeče IE.

responseStream

Obsahuje tělo odpovědi ve formě streamu. Atribut slouží pouze pro čtení. Pouze u prohlížeče IE.

responseText

Obsahuje tělo odpovědi ve formě řetězce. Atribut slouží pouze pro čtení.

responseXML

Obsahuje tělo odpovědi ve formě dokumentu XML. Atribut slouží pouze pro čtení

status

Obsahuje stavový kód (protokolu HTTP) odpovědi na požadavek. Atribut slouží pouze pro čtení.

statusText

Obsahuje textový popis odpovídající stavovému kódu. Atribut slouží pouze pro čtení

3.1

20

Objekt XMLHttpRequest Tab. 2: Metody objektu XMLHttpRequest

Metoda

Popis

abort ()

Přeruší požadavek.

getAllResponseHeaders

Vrátí všechny hlavičky protokolu HTTP.

(„hlavička“) getResponseHeader ()

Vrátí hodnotu hlavičky protokolu HTTP.

open („metoda“,„url“)

Inicializuje požadavek prostřednictvím metod GET, POST, PUT nebo HEAD.

send (obsah)

Odešle serveru požadavek protokolem HTTP.

setRequestHeader

Nastaví název a hodnotu hlavičky HTTP. Pouze u prohlížeče

(„hlavička”, hodnota)

IE.

openRequest ()

Nativní způsob inicializace požadavku (pouze u prohlížečů typu Firefox, Opera apod.).

overrideMimeType ()

Přepíše typ MIME, který server vrátí (pouze u prohlížečů typu Firefox, Opera apod.).

Jak jsme si tedy mohli povšimnout většina atributů i metod je pro všechny typy prohlížečů stejná. Nyní pokud vytvoříme objekt XMLHttpRequest, můžeme pomocí atributů readyState a status získat upozornění o každé změně požadavku. Atribut readyState specifikuje aktuální stav požadavku. Možné hodnoty tohoto atributu jsou následující: 

0 – neinicializováno



3 – interaktivní



1 – načítání



4 – dokončeno



2 – načteno Atribut status obsahuje stavový kód odpovědi na požadavek. Jedná se o běžný

stavový kód protokolu HTTP, který webový server odesílá i při běžném procházení webových stránek. Zde jsou některé obvyklé hodnoty tohoto atributu: 

200 OK



401 Unauthorized



201 Created



403 Forbidden



204 No Content



404 Not Found



206 Partial Content



400 Bad Request

3.1

21

Objekt XMLHttpRequest

3.1.2 Zpracování požadavku Data přicházející od serveru se zpracovávají asynchronně, tzn. aplikace se po odeslání požadavku nezablokuje a nečeká na odpověď serveru. Znamená to tedy, že je nutné vytvořit tzv. anonymní funkci, která se vytváří pomocí klíčového slova function následovaného

složenými

závorkami

uzavírajícími

tělo

funkce.

Objekt

XMLHttpRequest zavolá anonymní funkci při každé změně stavu požadavku. Uvnitř této funkce je možné posoudit zda-li atribut status objektu XMLHttpRequest obsahuje hodnotu 200 a atribut readyState obsahuje hodnotu 4, což znamená, že požadavek na server byl úspěšně dokončen. Jestliže je tato podmínka splněna, je již možno přistupovat k odpovědi serveru a datům v ní obsaženým prostřednictvím jednoho z dvou atributů objektu XMLHttpRequest, tedy responseText nebo responseXML. Který z uvedených atributů použít záleží vždy na typu dat očekávaných jako odpověď serveru (Holzner, 2007). Ačkoliv byl v tuto chvíli již požadavek zpracován, je nezbytně nutné také požadavek odeslat.

3.1.3 Odeslání požadavku Pro odeslání požadavku slouží metoda send objektu XMLHttpRequest. Použití této metody se liší v závislosti na použité metodě při zpracování odpovědi serveru (metoda open). Pokud byla pro komunikaci se serverem použita metoda GET, pak jako argument metody send odesíláme pouze hodnotu null (viz následující metoda Ajaxu).

3.2

22

Komunikace s kódem běžícím na straně serveru

Jestliže ale byla použita metoda POST, pak je nutné do argumentu metody send vložit vlastní data jako by se vkládala do URL tak, jak je uvedeno v následující metodě ziskejData:

Chování aplikace využívající techniky Ajaxu lze tedy shrnout do následujících kroků: 

Vytvoření objektu XMLHttpRequest,



inicializování požadavku pomocí metody open objektu XMLHttpRequest,



přiřazení

anonymní

funkce

atributu

onreadystatechange

objektu

XMLHttpRequest, která zpracuje změny stavu požadavku, 

3.2

odeslání požadavku metodou send.

Komunikace s kódem běžícím na straně serveru

Skutečná síla Ajaxu tkví v jeho kombinaci s kódem běžícím na straně serveru, protože to je to, o čem celý Ajax také je – komunikace se serverem (Holzner, 2007). A aby se na serveru odehrávaly nějaké akce, je třeba kódu běžícího na straně serveru. Přičemž je naprosto jedno jaký skriptovací jazyk je pro tento účel použit (PHP, Perl, a další). V předchozích dvou variantách metody ziskejData bylo možno vidět jednoduchou funkci získávající data z nějakého zdroje na serveru, o jaká data jde, případně v jakém skriptovacím jazyce jsou interpretována se stará server, objektu

3.3

23

W3C DOM

XMLHttpRequest je pouze přiřazen výsledek jako hodnota atributu responseText (popřípadě responseXML). Jakmile jsou data přidělena objektu, je již snadné zpracovat je do samotného obsahu webové aplikace, a to prostřednictvím atributu innerHTML libovolného elementu HTML (například div). Získání tohoto elementu lze provést pomocí standardu W3C DOM. Na následujícím skriptu je znázorněn tento postup prostřednictvím jednoduché metody.

3.3

W3C DOM

DOM neboli Document Object Model je na platformě a jazyku nezávislé rozhraní, které dovolí programům a skriptům dynamicky přistupovat a aktualizovat obsah, strukturu a styl dokumentů. Dokument může být dále zpracován a výsledek tohoto zpracování může být zahrnut zpět do prezentované stránky. DOM je tedy aplikační rozhraní pro HTML a XML dokumenty, které nabízí strukturální reprezentaci dokumentu a definuje, jak je k struktuře dokumentu přistupováno skriptem. JavaScript je v tomto případě jazyk, používaný pro přístup a manipulaci s DOM (Asleson, 2006). Při práci s uzly v JavaScriptu je možno použít tyto podporované atributy: 

attributes

–

atributy tohoto uzlu,



childNodes

–

pole dceřiných uzlů,



documentElement

–

kořenový element,



firstChild

–

první dceřiný uzel,



lastChild

–

poslední dceřiný uzel,



localName

–

lokální název uzlu,



name

–

název uzlu včetně jmenného prostoru,



nextSibling

–

následující příbuzný uzel,



nodeName

–

název uzlu,



nodeType

–

typ uzlu,

3.3

24

W3C DOM 

nodeValue

–

hodnota uzlu,



previousSibling

–

předchozí příbuzný uzel.

Kromě těchto atributů nabízejí uzly následující metody: 

replaceNode(a, b) –

nahradí uzel b uzlem a,



insertBefore(a, b)

–

vloží uzel a před uzel b,



appendChild(a)

–

připojí dceřiný uzel a k uzlu, jehož metoda appendChild volala.

Práce s uzly a jejich atributy prostřednictvím DOM je zcela běžná a velmi využívaná technika jak pro práci s dynamickým HTML obsahem, tak i XML dokumenty a představuje základní

programátorskou znalost při tvorbě moderních

webových aplikací. Pro interpretaci DOM poslouží následující strom uzlů reprezentující kód jednoduché webové stránky: | -------------------------------------| | | | | | | |