ARCHIV – tento článek je již staršího data. Doufám, že mnoho myšlenek v něm je stále platných, avšak některé informace již mohou být zastaralé.
AJAX – kde jsou hranice?
13.9.2005
Co se ve skutečnosti skrývá pod celým tím humbukem kolem technologie AJAX? Jaké má AJAX výhody, jaká jsou jeho úskalí? V jakých případech ho použít? A proč ho nepoužívat jako náhradu za web?
Na Úplně Poslední středě Dobrého webu před dvěma týdny se chvíli diskutovalo o technologii, která v současnosti hýbe webem – AJAX. Jedná se o zkratku pro Asynchronous JavaScript and XML. AJAX je vlastně spojením starých známých technologií XML, JavaScript, HTTP a (X)HTML.
Co je AJAX?
AJAX umožňuje, aby stránka kontaktovala server a obdržela od něj libovolná data v XML, bez toho, aby se musela celá znovu nahrávat – vše jen pomocí JavaScriptu. To znamená, že např. zmáčknete tlačítko, chvíli čekáte a na stránce se objeví něco nového z databáze na serveru (nebo se něco změní) – bez nahrávání nové stránky.
Často se pomocí AJAXu realizují tzv. našeptávače. Když píšete něco do textového políčka, tak váš text průběžně odesílají na server a dostávají od něj nápovědná slova, která byste mohli chtít napsat. Ty vám poté předkládají ve formě seznamu pod políčkem.
Příklady
- Jako jeden z prvních používal AJAX vyhledávač Google (kde obecně mají JavaScript hodně rádi) – najdete ho u Gmailu, Google Suggest (napovídá vám při psaní vyhledávacího dotazu – jedná se o našeptávač) a dalších jeho služeb.
- Krásným příkladem využití AJAXu je Amazon.com Diamond Search (aplikace pro hledání diamantů). Zadáváte kritéria, která musí váš diamant splňovat, a průběžně se vám zobrazuje počet vyhovujících položek. Vše je navíc vyřešeno pěkně zvládnutým uživatelským rozhraním.
- Podobnou aplikaci jako Google Suggest nabízí u nás Seznam se svým Našeptávačem.
Pro a proti
Výhody
- AJAX urychluje uživateli práci, v tom je jeho hlavní výhoda. Nemusí se pokaždé znovu nahrávat nová stránka. Toto chování je daleko blíže tomu, co zná uživatel z klasických desktopových aplikací – a známé pravidlo použitelnosti je držet se toho, co už uživatel zná.
- AJAX šetří datové přenosy. U klasické webové aplikace se s každým požadavkem musí uživateli posílat celý kód stránky, v němž je nového a důležitého po málu. Naopak s AJAXem se posílá jenom to důležité.
Nevýhody
-
AJAX znemožňuje použití tlačítka Zpět v prohlížeči (protože to se používá jen pro statické stránky). Toto se dá bez váhání označit za největší problém AJAXu. Uživatelé jsou na tlačítko Zpět zvyklí a očekávají od něj určitou funkci. AJAX jim ale v lepším případě vůbec neumožní ho použít, v tom horším použít půjde, ale jeho chování bude naprosto neočekávané – vrátí uživatele na předcházející stránku, nevrátí aplikaci do předcházejícího stavu (a pravděpodobně se jeho stisknutím ztratí uživateli práce, kterou na stránce pomocí AJAXu udělal).
Kdesi jsem viděl návrh tento problém řešit pomocí XHTML prvku <iframe>, ale přišlo mi to hodně jako drbání se pravou rukou na levém uchu a realizace v aplikaci by pravděpodobně byla dost složitá.
-
Při změnách na stránce pomocí AJAXu se nemění URL v adresním řádku prohlížeče. Proto není možné takto modifikovanou stránku poslat e-mailem nebo uložit do záložek.
Tento problém řeší AJAXové aplikace tak, že se za URL dosazují identifikátory začínající na # (odkaz dovnitř stránky). Při opětovném vyvolání takového URL ho JavaScript zjistí a uvede stránku do příslušného stavu (tím se dá vyřešit i problém s tlačítkem Zpět). Problém je, že na cílovém počítači musí být dostupný ten JavaScript.
-
Všechno s AJAXem nejde. Nesmíme zapomínat, že AJAX je stále pouze nadstavbou nad stávajícími webovými technologiemi, která se snaží překonat některá jejich omezení. A především protokol HTTP vůbec není vhodný pro aplikace spolupracující intenzivně se serverem – problémem je, že se při každém požadavku musí navázat spojení se serverem, které se po jeho vyřízení ukončí. To aplikaci zpomaluje.
U AJAXu také není možné, aby server sám kontaktoval uživatele, když je potřeba. To se hodí např. u chatu, kde server obešle počítače účastníků chatu v momentě, kdy se objeví nová zpráva. Sice již byl vytvořen chat s pomocí AJAXu, ale je založen na tom, že se stránka neustále dotazuje serveru (i když pomocí AJAXu, a tedy bez nahrání celé stránky), jestli přibyla nějaká nová zpráva, což není právě ideální.
K čemu tedy ten AJAX je?
Seznam nevýhod výše je sice delší než seznam výhod, ale to vůbec neznamená, že by byl AJAX špatný. Naopak, je to kvalitní technologie, akorát musíme vědět, kdy ji můžeme na webu použít:
- AJAX se dá nejlépe využít k poskytnutí funkcí, které uživateli urychlí nebo usnadní práci – to jsou různé našeptávače jako Google Suggest nebo zmiňovaný Amazon.com Diamond Search. Je ale potřeba dát si pozor, aby uživatel neměl tendenci používat tlačítko Zpět (to bude mít hlavně, když vyvoláme dojem nahrání nové stránky) nebo nevadilo, že se nemění URL v prohlížeči.
- AJAX by se neměl používat místo klasických odkazů – to vypadá tak, že např. při kliknutí v menu na jednu z položek se nepřejde na novou stránku, ale pouze se nahraje nový obsah do stávající stránky. Toto řešení přináší problémy s přístupností, SEO i správou obsahu – v podstatě jste v takovém případě nuceni udržovat dvě verze webu a ztrácíte zpětné odkazy, což nepřeváží jedinou výhodu AJAXu (o trochu rychlejší web). Proto v tomto případě lépe poslouží klasické odkazy.
AJAX se dá ve svých možnostech použití přirovnat k Flashi – ten také musíme používat obezřetně a jen ve vymezených případech, jinak nám přinese víc škody než užitku. (A také už je myslím obecně přijatý argument, že by se obsahový web neměl realizovat ve Flashi, protože to přináší mnohé nevýhody. S AJAXem je to podobné.)
Závěrem
Je jasné, že AJAX se podobně jako jiné technologie dostane postupně z fáze eufórie, kdy ho nadšenci používají téměř všude, kde je to možné, do fáze, kdy bude nasazován pouze v případech, ve kterých přinese nejvíce užitku. Myslím si, že o něm nepíšu naposled.
Další informace
- AJAX - návod pro začátečníky (Jiří Zralý, Digitální citrón, 6.11.2005)
- AJAX matters – web o AJAXu
- AJFORM – odesílání formulářů pomocí AJAXu
- Ajax: A New Approach to Web Applications – úvodní článek o AJAXu od jeho „vynálezců“ Adaptive Path (Jesse James Garrett, 18.2.2005)
- AJAX: Usable Interactivity with Remote Scripting (Cameron Adams, SitePoint, 13.7.2005)
20 komentářů od čtenářů
Pěkný článek, ve všem souhlasím, jen bych dodal, že při kliknutí se nereloaduje stránka, tudíž reklama jiná než PPC nevydělává.
Pokud je možné javascriptem modifikovat URL tak, že se dosazují identifikátory začínající na #, nebylo by možné dosazovat i identifikátory s & ?
Tedy při opětovném vyvolání by stránku uvedl do správného stavu už server a na přítomnosti JavaScriptu by už nezáleželo.
3. Lukáš Mačí | 14.9.2005, 10.48
Moc pěkný článek! Ještě bych do háčků Ajaxu přidal to, co psal halogan. Tzn. při kliknutí se stránka nereloaduje, nepřibývají pageviews a obchodníci z toho nejsou nadšení. A musíš uznat, že rozházet si něco s obchodníkama, to je špatenka :-)
Těším se na další článek!
4. Petr Cada | 14.9.2005, 15.01
Osobne jsem na tot reseni intreaktivnosti dosti skeoticky. Myslim ze JS neni zrovna stastnou volbou. Pokud by se mel JS pouzivat na takovehle uzitecnejsi veci nez na nejake menu, tak by se mela prepracovat specifikace a hlavne nejak sjednotit podpora v prohlizecich.
Zatim me internet pripada jako mlady stat ktery nevi co s demokracii a kazdy si dela co chce, zadna pravidla zadne omezeni, a tvurci prohlizecu a jeste to podporovali. Ted stoho mame pekny mysmas a uz je pozde a stoji nas to hodne energie dava tdo stavu ve kterem mel byt web uz pred 10 lety.
Uz radeji budu koncit protoze jsem se nejak rozjel.
5. Martin Snížek | 15.9.2005, 14.06
Díky všem za komentáře! Dodal bych tohle:
ad [1], [3] Pokud web zobrazuje vlastní reklamu, tak ta se dá samozřejmě pomocí AJAXu nahrát také. Problém je pouze u vkládaných kódů reklamních serverů, i když možná i tady by se dalo najít řešení.
ad [2] Tohle bohužel nejde. Identifikátory # nezpůsobí nahrání stránky, protože ukazují do aktuální stránky. Ale jakmile změníte adresu jinak, prohlížeč nahraje novou stránku.
6. Jiří Zralý | 20.9.2005, 23.31
Pokud to chápu správně, právě na této technologii připravuji nvou verzi chatu. Žádné rámce, pouze jedna stránka a obsah se mění pomocí JS, který si jej tahá svými dotazy na tu samou stránku s parametrem. Zatím to vypadá velmi dobře a za tento nápad vděčím jednomu slovenskému kolegovi.
AJAX se jistě nehodí všude, ukradli bychom tím webu i jeho kouzlo, ale jsou aplikace, kde jistě najde své místo.
7. TimeLord | 23.9.2005, 11.06
Ddobrý článok, príjemné čítanie, pekne zosumarizované.
[2] dgx: myslím, že parametre cez ? a & je možné tiež v pohode dosadzovať. Či už ako vravíš hneď na strane servra alebo svojho času som parametre cez ? a & posielal aj do statických HTML stránok, kde si to už JavaScript prebral z location.search, rozparsoval a urobil s tým to, čo potreboval.
8. Martin Snížek | 26.9.2005, 16.34
[7] Možné to je, ale pokaždé se nahraje nová stránka, což nechceme...
Myslim, ze ste celkom necpohopili, o com DGX pisal - odkazy na AJAX aplikaciu predsa mozu byt orbene na strane servera, ktory naserviruje na lokalnu stranu taky obsah, ako mu URL prikazuje. Presne takym principom funguje predsa Google Maps, kde sa URL v podstate vygeneruje z aktualnej pozicie mapy. Potom staci URL zadat do prehliadaca a zobrazi sa ta ista pozicia, ktoru si pozeral kamarat. Samozrejme sa to musi obchadzat odkazmi "Create link to this point" a podobne, ale je mensia nevyhoda, ako keby odkazy na dany stav v AJAXE neexistovali vobec.
10. Jarda | 19.10.2005, 12.10
Myslim, ze nectnosti jsou nekdy velke vyhody. Mysleno tak, ze je to technologie ne pro web prezentace, ale pro web aplikace. Napr. my provozujeme GIS servery (mapy) pres produkty od ESRI a to dodnes pri kazde zmene reloaduje celou stranku, coz je hodne neprijemne, problemy se zpet atd. Takze vlastni reseni na AJAXEM je cesta spravnym smerem...
11. Petr Lehký | 20.10.2005, 15.27
[10] Jarda: Naprosto souhlasim. AJAX pro webove prezentace nema takovy vyznam, jako pro webove aplikace jako jsou ruzne organizery, vypisy z DB, firemni intranety apod. V teto oblasti potom nevyhody odpadaji a jedinou nevyhodou zustava nekompatibilita prohlizecu. Jinak pokud neznate, tak doporucuji navstivit dle meho uzasny projekt - www.zimbra.com.
12. Tomáš Marek | 7.11.2005, 23.15
K AJAXovému chatu: Myslím, že se dá asynchronní send() poslat jen pro http hlavičku a vyčíst datum aktualizace stránky. Sice je to stále dotazování klienta na server, avšak zátěž serveru by se tak měla minimalizovat.
Ono ten javascript tam musí být vždy, a pokud se nenačte javascript, tak lze použit url... takze zde není problém s AJAXem ale s leností programátorů.
[2]
No ono anchor je # a & je součást dotazu.\
BTW na http://php.vrana.cz je pekny clanek http://php.vrana.cz/ajax.php a v podstatě shrnutí využití AJAXu pro normální "naše" stránky.
Jinak souhlasím s nazory, že je rozdíl mezi webovou stránkou a aplikací.
Ohledně standardů: JavaScript má své standardy a vychází z ECMA scriptu a poslední definice je JavaScript 1.5 resp. JScript 5(.5) a všechny specifikace jsou na netu. IMHO doporučuji knižečku do kapsy za 80kachlí (O'Reily), je tam hodně věcí a je to vždy po ruce. Mimo jiné nechybí zde ani rozdíly mezi IE a Mozillou resp. Netscape a definicí DOM od W3C
Takže číst a ne plácat do větru.
14. Aloe | 17.11.2006, 23.04
Článek byl pěkný. Jen bych přidal další nevýhodu.
Je sice již známá, ale málo lidí si jí uvědomuje. Když se stránka znovu nenačte, tak se ke klientovi nedostane updatovaný zdrojový soubor, který ale využívají různé čtečky a odčítače obrazovek. Proto nové informace nemohou využít lidé, kteří tyto pomůcky používají, ať už nevidomí, nebo slabozrací.
Více o tvorbě přístupných webů např. na www.blindfriendly.cz
16. gp | 18.12.2006, 16.26
Tusim ze existuje zpusob jak muze server kontaktovat klienta. Je to pomoci neustale otevreneho pomocneho spojeni. Dokonce to nevyzaduje nic vic nez HTML 4 + JS. Ale je to opet dost nepohodlne.
17. Jiří Lysek | 14.1.2007, 23.42
Něco takového jsem potřeboval před rokem aby někdo napsal. Teď už ajax docela běžně používám Ajax je velmi výborná věc. Používám ho nejvíc pro kontrolu formulářů a pro načtení nějaké události na pozadí tak aby o tom uživatel nevěděl ale těžil z toho.
18. RAmses | 23.1.2007, 15.47
Martin Snížek: Muzes vysvetlit proc bych mel dostat zavolanim url s nejakymi parametry novou stranku? Scriptu ktery zpracuje url je jedno jestli parametry zjisti z # nebo z &.
Prave delam mapovou aplikaci pro Olomouc a tam to tak je resene. Zavolam url s parametra treba ?id=xxx&object=firm a script si podle toho zavola prislusne js funkce pro nacteni podkladove mapy souradnic firmy pod id xxx. Proste..
Je v tom rozhodne budoucnost, vsechny aplikace se drive nebo pozdeji presunou na internet. Jsem zvedav na nastupce AJAXu.
20. Laďa Toral | 5.9.2007, 18.58
[19] Vlastně je to jenom o použití té správné knihovny. Ajax používá Microsoft na MSDN už snad 10let, čili asi podobnou dobu už byl taky Ajax implementován v prohlížeči kupodivu bez většího zájmu. Ale teprve chvilku tady máme prototype a jquery, který z Ajaxu dělá multifunkční hračku.
Přidat komentář
Diskuse již není aktuální, další komentáře tedy není možné přidávat. Pokud mi i přesto chcete sdělit svůj názor na článek, kontaktujte mě.
© Martin Snížek 2005-2023. ISSN 1802-2103.