Ajax – lehký úvod

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.

    Reklamy
  • One thought on “Ajax – lehký úvod

    1. who 21/10/2005 / 13:22

      o budoucnosti ajaxu de debatovat, najednu stranu prinasi vcelku hezky efekty a priblizeni k desktopovymu chovani aplikacina druhou stranu je to jen jakasi zaplata na bezstavovy http a celkovou zastaralost tcp/iprek bych ze podobny kouzla najdou uplatneni; spravny efekt bez ztraty pouzitelnosti az bude nejaky internet2;)

      To se mi líbí

    Zanechat Odpověď

    Vyplňte detaily níže nebo klikněte na ikonu pro přihlášení:

    WordPress.com Logo

    Komentujete pomocí vašeho WordPress.com účtu. Odhlásit / Změnit )

    Twitter picture

    Komentujete pomocí vašeho Twitter účtu. Odhlásit / Změnit )

    Facebook photo

    Komentujete pomocí vašeho Facebook účtu. Odhlásit / Změnit )

    Google+ photo

    Komentujete pomocí vašeho Google+ účtu. Odhlásit / Změnit )

    Připojování k %s