Pojem Ajax jsem na webu zahlédnul v minulosti již mnohokrát, ale nikdy mě nadpis nezaujal tak, abych se začetl do hloubky o čem Ajax vlastně je. Možná to souvisí s tím, že stejně se jmenuje i sousedovic pes, jehož zrovna nemám v lásce 🙂 Před nedávnem jsem seděl s kolegou u piva a diskutovali jsme o všem možném, mimo jiné mě upozornil na Ajax a související technologie. Rozhodl jsem se, že si o Ajaxu něco přečtu. Zde je shrnutí toho, co vlastně Ajax je, k čemu se dá využít a jak na to.
Fakta:
Ajax je zkratka: Asynchronous JavaScript and XML
Ajax je tu pro vytváření (dokonalejších) interaktivních webových aplikací
Ajax umožňuje posílat serveru požadavky aniž by bylo nutné znova načíst stránku
Ajax není technologie sama o sobě, AJAX je koncept
Ajax je kombinací: HTML (XHTML), CSS, DOM, JavaScript, XML a XmlHttpRequest
Ajax musí podporovat browser
Ajax browsery podporují (IE 4.0+, Firefox 1.0+, Netscape 7.1+, Opera 7.6+, Safari 1.2+, Konqueror)
Ajax využívá pro komunikaci se serverem XML dokumenty
Ajax nevyžaduje instalaci žádného dalšího pluginu, podobně jako třeba Flash, stačí jeden z uvedených browserů
Rozdíl mezi tradiční webovou aplikací a webovou aplikací podle Ajaxu je na následujícím diagramu:
Levá strana diagramu popisuje klasickou webovou aplikaci tak jak ji všichni známe: browser posílá HTTP requesty na server, server vrací HTML+CSS, které je zobrazeno v browseru.
Pravá strana diagramu ukazuje model s použitím Ajaxu. Na první pohled přibyla do části web browseru další vrstva – Ajax engine. Požadavky z uživatelského rozhraní jsou převedeny na volání metod JavaScriptu v Ajax enginu, který komunikuje se serverem. Server odpovídá ve formátu XML dokumentu, který Ajax engine transformuje na browserem zobrazitelné HTML a CSS.
Zásadní rozdíl je v tom, že v klasické webové aplikaci je nutné pro přechod mezi dvěma stavy aplikace načíst celou stránku. To je jak všichni známe zdlouhavé a otravné. Ajax umožňuje změnu pouze části stránky. Wikipedia na toto téma uvádí jako příklad webovou aplikaci umožňující přídávat k obrazkům popisky (viz. např Flicker).
Tradiční pojetí: obrázek a formulář pro přidání popisku. Odeslání formuláře (submit) způsobí přechod aplikace do nového stavu, který představuje nová stránka zobrazující ten samý obrázek s přidaným popiskem.
V pojetí Ajaxu: obrázek a formulář pro přidání popisku. Odeslání formuláře nezpůsobí nový HTTP call, ale pouze volání JavaScript metody na Ajax enginu. Ten aniž by zatím jakkoliv měnil zobrazenou stránku, odešle data na server a počká na odpověď v XML. Pomocí webových technologií DHTHML a CSS zobrazí popisek u obrázku na aktuálně zobrazené stránce, aniž by se znova načítala. Odezva aplikace je mnohem kratší, uživatel nemusí čekat na znovunačtení stránky, což v případě obrázku nemusí být zanedbatelná doba (ano, asi je v cachi browseru, ale i tak…:-).
Protože šedá je teorie a zelený je strom praxe, nyní se mrkneme na příklad, kde si Ajax můžete vyzkoušet v praxi: Typickým příkladem použití konceptu Ajax je Google Suggest. O této vychytávce, která je jako beta stále pod Google labs, jsem psal asi před půl rokem (viz Google napovídá). Bohužel jsem v té době nepátral, jak je to udělané. Vody web designu a developmentu nejsou tak stojaté jak se zdá a já jsem tak trošku zaspal dobu 🙂
Jak to teda funguje: Google stránka vypadá stejně jak ji důvěrně znáte. Začnete na klávesnici vyťukávat heslo které hledáte a browser vám napovídá. Ale nenapovídá vám pomocí historie dotazů uložené ve vašem browseru (to co jste hledali někdy v minulosti). Napovídá Google a to tak, že po jednotlivých písmenkách na pozadí zavolá službu na Google serveru, která mu vrátí sadu nejčastěji hledaných hesel podle písmen, které jste zadali. Podstatné je, že to funguje – a funguje to rychle. A vysledný dojem pro uživatele: stránka se ani nehne, tzn. nenačítá se znovu celá, pouze se obnovují dropdowny s nabízenými hesly.
Příklad jak použití Ajaxu vývojáři Googlu neuvádím nahodou. Google se Ajaxu chopil zodpovědně a je výkladní skříní Ajax aplikací. Posuďte sami:
Gmail – nevím jak vám, ale lepšího web mail clienta jsem neviděl
Google Maps – neuvěřitelně svižné mapy – protože při posunu po mapě se natahují jen fragmenty map a neloadujete celé stránky, okolní fragmenty jsou tipuju nacachované
Google Groups
…a určitě to není všechno…
Pokračování příště: Zrovna zkouším AjaxTags, což je knihovna JSP tagů, která umožňuje použít jednoduché Ajaxové triky v JavaServerPages.
milan boruvka / log 