Články

Spíte dobře? Připravili jsme pro Vás články, které Vám nedají spát.

Co dokáže AJAX?

9. 5. 2007 | Martin Cajthaml

AJAX už dnes asi většina lidí zajímajících se o web zná. Překvapuje mě však, že spousta z nich neví přesně, co všechno AJAX dokáže a co už ne. Nakonec mi připadá, že každé použití Javascriptu ve web 2.0 aplikacích je dnes označováno za AJAX. Pojďme si tedy ukázat pár AJAXových příkladů pomocí různých javascriptových knihoven a rozdělit, co AJAX je, a co není.

Sdílejte článek: del.icio.us RSS
Martin Cajthaml

Martin Cajthaml

IT Manager
Své výjimečné programátorské a logické schopnosti spojené s vysokou produktivitou a spolehlivostí opírá Martin o bohaté zkušenosti získané během studia na ČVUT v Praze. K jejich dalšímu rozvoji přispěla práce na analýzách a tvorbě mnoha aplikací pro významné klienty SYMBIA.
Poslední články autora:
Bez serveru to nejde

Podstatou AJAXu je načítání dat Javascriptem na pozadí pomocí protokolu HTTP. Bez webového serveru se tedy při AJAXu neobejdete. Pokud webová stránka žádná data takto nenačítá, nejedná se o AJAX. Příkladem můžou být různé javascriptové efekty (pomocí dynamických úprav zdrojového HTML). Tyto efekty však aplikace AJAXu často doprovázejí. Proto je důležité rozlišovat, zda na webu chcete pouze vizuální efekty, či skutečné využití AJAXu (např. i k tvorbě RIA). V další části uvedu několik příkladů efektů bez použití AJAXu.

Bez AJAXu

Bez použití AJAXu musí mít stránka nahrána všechna data už při načtení stránky. To je samozřejmě velmi omezující v tom, jaké funkce od takové stránky lze čekat. Samozřejmě může být použito těch nejlepších vizuálních efektů, ale pořád je to v podstatě jen HTML stránka. Při nutnosti komunikace se serverem musí být načtena stránka znovu a celý uživatelský zážitek je ten tam. Přesto jsou takové stránky občas chybně označovány za AJAXové. Zde jsou některé ze zmíněných efektů:

Plynulé změny pozice a velikostí
Zobrazování a schovávání
Navigační prvky
Sekce1

Obsah1
Sekce2

Obsah2
Sekce3

Obsah3
Sekce4

Obsah4
S AJAXem je zážitek

Jakmile stránka využívá AJAX, je uživatel příjemně překvapen plynulostí procesů na ní. Většina akcí se dá provést bez nutnosti načítat jinou stránku, takže se vše blíží běžné desktopové aplikaci. Takových aplikací AJAXu lze najít velké množství a jsou velmi různorodé. Od obyčejného načítání určité části stránky, po skutečné RIA aplikace, které nahrazují ty běžné. Většinu z nich lze samozřejmě považovat za součást Webu 2.0.


Příkladem využití čistého AJAXu bez dalších efektů může být například takový chat. Určitě zanechte vzkaz ;-)

Vaše zpráva:
Vaše jméno: Poslat

AJAXu můžeme také jednoduše využít u již uvedeného příkladu se záložkami. Jejich obsah lze ovšem načítat ze serveru, a je tedy aktuální. Navíc je možné využít AJAX i pro další užití v nich - např. validaci a odeslání formuláře.

Sekce1
1
Sekce2
2
Sekce3
3
Sekce4
4

Jelikož je u AJAXu podstatou asynchronní načítání dat, lze toho využít kupříkladu pro jejich dynamické zobrazovaní, např. v tabulce se stránkováním. Tato využívá jako zdroj dat databázi.

Nahrává se...
AJAX a RIA

Běžné desktopové aplikace využívají určité knihovny systému pro zobrazování sebe sama. AJAXové aplikace mohou využívat javascriptové knihovny místo systémových a vytvářet svůj vzhled pomocí nich. Existují dokonce knihovny podporující určitou část uživatelského rozhraní známou z běžných aplikací. Dokážou vytvářet a zavírat okna, v nich menu, tlačítka, formuláře a prakticky cokoliv vás napadne. Díky těmto knihovnám vznikají stále častěji webové verze známých aplikací. Dnes si tak díky tomu můžeme na webu napsat dokument, vytvářet tabulky, prezentace, pracovat s obrázky a další běžné věci.

Nejrozšířenější knihovny

Přiznám se, že já nejčastěji využívám Dojo toolkit  , ale těch lepších knihoven je větší množství a každá se hodí na trochu odlišné věci. Hlavně z důvodu množství implementovaných funkcí a efektů. Ostatně mnoho z nich je postaveno na kultovní knihovně Prototype  . Pojďme si tedy pár nejrozšířenějších (čistě javascriptových) stručně představit.

  • The Dojo toolkit 
    • Rozsáhlý toolkit velmi usnadňující vývoj nejen velkých aplikací v Javascriptu. Pomocí vysoké úrovně abstrakce umožňuje nejen používání (X)HTML, ale také generovat výsledek do SVG či jiných uživatelem definovaných formátů. Obsahuje mnoho známých prvků již implementovaných a připravených k okamžitému použití. Umožňuje navíc snadno další prvky doprogramovat uživatelem. Velkou výhodou je rychlost vývoje a snadná použitelnost.
  • Scriptaculous 
    • Šikovná knihovna pro různé vizuální efekty postavená na Prototype knihovně. Výhodou je jeho snadná implementace pro spolupráci v mnoha programovacích jazycích (včetně např. smalltalku!). Moc pěkné a efektní, zakládá si na kvalitním uživatelském rozhraní.
  • Yahoo UI 
    • Sada knihoven vyvíjených společností Yahoo je velmi profesionální. Přístupem se podobá Dojo toolkitu (jen je trošku ukecanější). Obsahuje standardně pěkně graficky zpracované elementy a navíc různé CSS vychytávky (použití stejného fontu nezávisle na prohlížeči, různé šablony, atd.).
  • MochiKit 
    • Označuje sám sebe za odlehčenou javascriptovou knihovnu, avšak nabízí širokou paletu funkcí. Obsahuje snad jen méně předpřipravených prvků a efektů oproti předchozím. Výhodou je menší velikost a větši rychlost načtení.
  • Rico 
    • Ve verzi 2.0 skutečně impozantní knihovna se spoustou zdrojů založena také na knihovně Prototype. Snad nejsnadnější používání Drag&Drop operací, jaké jsem viděl. Vývoj s ním jde rychle od ruky.
Budoucnost (nebo současnost?)

AJAX lze už dnes považovat za platformu. Platformu tak rozšířenou, že na poli RIA určitě konkuruje Flashi či Javě. Pro AJAX mluví hlavně výhoda nezávislosti platformy backendu. Ten může být vytvořen v jakémkoliv programovacím jazyce a zpřístupněný přes web server. Za poslední roky se navíc rapidně zvyšuje počet a kvalita AJAXových knihoven, a tak mi nezbývá než se těšit na světlé zítřky internetových aplikací.

Sdílejte článek: del.icio.us RSS
Vaše názory