Ajax - Úvod

Pri webových aplikáciách sa občas stretávame s tým, že by sme potrebovali na strane klienta načítať zo servera ďalšie údaje. Pri klasickom použití modelu požiadavka-odpoveď protokolu HTTP musí používateľ odoslať formulár alebo navštíviť hypertextový odkaz, aby server mohol v odpovedi tieto údaje poskytnúť. Po prijatí odpovede sa načíta celá stránka a až potom sa dá v práci pokračovať. Keď však máme k dispozícii JavaScript, môžeme sa takémuto prerušeniu práce s webovou stránkou pomerne jednoducho vyhnúť. Ako? Odpoveďou je Ajax.

Čo je to vlastne Ajax?

Ajax je technika, ktorá sa používa v interaktívnych webových aplikáciách. Pri jej použití sa posielajú údaje medzi klientom a serverom tak, aby sa nemusela nahrávať stále odznova celá stránka. Ajax teda nie je žiadna konkrétna technológia alebo nejaká JavaScriptová knižnica.

Skratka Ajax znamená Asynchronous JavaScript and XML, čiže asynchrónny JavaScript a XML. Hoci názov tejto techniky v sebe skrýva slovíčko XML, nemusí sa pri prenose údajov XML vôbec použiť. Okrem XML môžeme prenášať čistý text, fragmenty HTML stránok, prípadne vykonateľný kód JavaScriptu. Ak chceme byť dôslední, musíme spomenúť, že prenos údajov nemusí byť dokonca ani asynchrónny. Väčšinou však asynchrónny je, pretože je zbytočné nechať používateľa čakať na dokončenie sťahovania údajov zo servera.

Kedy použiť Ajax?

Okrem klasických webových stránok zameraných na obsah sa môžeme stretnúť aj s webovými aplikáciami, ktoré už z princípu nemôžu fungovať bez JavaScriptu. Medzi také aplikácie môže napríklad patriť online chat, textový procesor, prípadne editor obrázkov alebo vizuálny editor, v ktorom môžeme presúvať objekty ťahaním myši. V takýchto prípadoch o použití Ajaxu nemusíme dlho rozmýšľať - keď potrebujeme nejaké údaje zo servera, jednoducho si ich vďaka JavaScriptu stiahneme.

Na bežných webových stránkach, ktoré majú fungovať aj bez zapnutého JavaScriptu, budeme rozmýšľať dlhšie. Jedinou prekážkou pre použitie Ajaxu je totiž vypnutý JavaScript. V takomto prípade treba pri návrhu stránok myslieť na Ajax od začiatku, ale implementovať ho až na konci. Aj tu platia všeobecne známe pravidlá použitia JavaScriptu na webových stránkach, podľa ktorých musí web v prvom rade fungovať aj s vypnutým JavaScriptom.

Použitie Ajaxu je výhodné napríklad vtedy, ak si používateľ nejakým spôsobom na webovej stránke vyberá z veľkého množstva dát, ktoré majú stromovú štruktúru. Typicky je to postupné nahrávanie (lazy loading) pri výbere z rozsiahleho stromu alebo menu, kedy sa postupne načítavajú jednotlivé uzly stromu až vtedy, keď je to potrebné. Do tejto kategórie použitia Ajaxu sa dá zaradiť aj načítanie obsahu prvku

select

podľa výberu v inom prvku

select

alebo načítanie obsahu adresárov pri ich prechádzaní.

Klasickým použitím techniky Ajax je automatické dopĺňanie textu, ktorý používateľ zadáva do nejakého poľa formulára. S takýmto dopĺňaním sa môžeme stretnúť vo vyhľadávačoch (napr. Google Suggest alebo na Seznam.cz). Ako si naprogramovať automatické dopĺňanie textu je napísané napríklad v článku na Intervale.

Ďalšie využitie Ajaxu je spríjemnenie používateľského rozhrania pri rôznych hlasovaniach či anketách, kedy používateľ môže zahlasovať bez toho, aby sa musela nahrávať celá stránka. V takýchto prípadoch stačí odoslať z klienta nejakú požiadavku a odpoveď servera nás nemusí ani zaujímať.

Podobne sa dá Ajax použiť aj pri validácii prvkov formulára. Použitie techniky Ajax pre validáciu formulára nemá výhody len v zníženom objeme prenesených údajov. Oveľa väčšou výhodou je, že funkcie, ktoré testujú správnosť vstupov, stačí napísať len raz na strane servera.

Problémy Ajaxu

Webové aplikácie využívajúce Ajax sa chovajú inak, než je na webe zvykom, z čoho pramenia rôzne problémy. Postupné načítavanie a zmena obsahu stránky pomocou JavaScriptu má za nasledok to, že adresa stránky zostáva rovnaká. Návštevníci stránok tak nemôžu jednoducho skopírovať odkaz, ktorého navštívením by sa vrátili k rovnakému obsahu. Nemôžu si teda odkaz zaradiť medzi obľúbené záložky alebo poslať svojmu známemu. Keď sa nemení adresa stránky, nevytvára sa ani história v pamäti prehliadača, s čím súvisí nefunkčné tlačidlo Späť. Obidva tieto problémy sa dajú s väčšou či menšou námahou vyriešiť, aj keď riešenia nemusia byť ideálne.

S nemeniacou sa adresou nemajú problémy len ľudia, ale aj stroje - vyhľadávače. Ak sa obsah mení JavaScriptom, robot sa k takémuto obsahu nedostane. Zaindexuje len prvú stránku, ktorú mu server poskytne. Pri niektorých aplikáciách to nemusí vôbec vadiť, väčšinou však ide o pomerne veľký problém - nezaindexovaná stránka akoby neexistovala. Aj to je dôvod, prečo písať stránky s Ajaxom tak, aby fungovali aj bez JavaScriptu.

Medzi menej spomínané problémy patrí neuvoľňovanie pamäte pri programovaní v JavaScripte. Pri jednoduchom použití JavaScriptu to ani tak neprekáža. Pri intenzívnom a dlhodobom použití typickom pre Ajax aplikácie sa však v dôsledku neuvoľňovania pamäte počítač postupne spomaľuje, pričom po niekoľkých hodinách pomôže už len reštart prehliadača. Tento problém sa prejavuje najmä v prehliadači Internet Explorer verzie 6 a nižšie. Dodržiavaním jednoduchých zásad pri programovaní v JavaScripte sa však tomuto problému dokážeme vyhnúť.

Využívanie Ajaxu vo všeobecnosti znamená častejšiu komunikáciu medzi klientom a serverom, pričom odpovede servera na požiadavky klienta sú pomerne krátke. Pokiaľ je aplikácia využívajúca Ajax nesprávne navrhnutá, môže to znamenať také zvýšenie záťaže servera, ktoré ho položí na lopatky. Treba navrhovať Ajax aplikáciu a nie premyslený DDoS útok na vlastný server.

Spôsoby komunikácie

Pri Ajaxe sa najčastejšie spomína objekt

XMLHttpRequest

, ktorý umožňuje odoslanie požiadavky a prijatie odpovede. Okrem použitia tohto objektu však existuje ešte niekoľko ďalších spôsobov, ako sa dajú preniesť údaje medzi klientom a serverom. Každý z nich má svoje výhody a nevýhody.

Výhodou objektu

XMLHttpRequest

je to, že na komunikáciu klienta so serverom je priamo navrhnutý. Umožňuje odosielať HTTP požiadavky rôznymi metódami, teda aj metódou GET a POST. Údaje môžu byť prenášané ako čistý text alebo ako štruktúrovaný dokument XML. Naopak, nevýhodou je použitie ActiveX v prehliadačoch Internet Explorer až do verzie 6 (vrátane).

Prakticky ekvivalentnou alternatívou k objektu

XMLHttpRequest

je použitie prvku

iframe

na prenos údajov. Prvok

iframe

nepotrebuje ActiveX a funguje aj v starších prehliadačoch, ktoré ešte objekt

XMLHttpRequest

nemusia poznať. Umožňuje odosielať požiadavky metódami GET a POST. Odpoveďou nemôže byť síce priamo XML dokument, ale čistý text alebo HTML dokument áno.

Pri komunikácii so serverom je možné používať aj dynamicky vkladaný element

script

. Táto možnosť tiež funguje aj v starších prehliadačoch. Požiadavky sú odosielané metódou GET, preto je výhodné tento spôsob použiť vtedy, ak odosielame na server málo parametrov, ale odpoveď servera je dlhá. Prenášané údaje sú v tomto prípade zapísané v JavaScripte, čo prakticky znamená, že server môže vygenerovať funkcie, ktoré môžu vykonať ľubovoľnú akciu.

Existujú ešte ďalšie menej používané spôsoby prenosu údajov. Jedným z nich je dynamické vytvorenie obrázku, pomocou ktorého môžeme vytvoriť požiadavku typu GET na server. Odpoveď servera môže byť v takomto prípade vyjadrená rozmermi obrázku, prípadne poslaná formou cookie.

Záver

V prvom článku tohto seriálu sme sa oboznámili s technikou Ajax. Povedali sme si, čo je Ajax, kedy sa dá s výhodou použiť, ale aj to, aké problémy môže použitie tejto techniky priniesť. Medzi najčastejšie spomínané problémy patrí nefunkčnosť tlačidla späť a nemožnosť použitia adresy stránky v prehliadači tak, aby sme sa po jej navštívení dostali do rovnakého stavu. Niekoľko ukážok existujúcich aplikácii používajúcich Ajax Vám malo ukázať, čo všetko je možné pomocou tejto techniky dosiahnuť.

Nakoniec sme vymenovali viacero alternatív, ako sa dajú prenášať údaje medzi klientom a serverom. Na komunikáciu môžeme použiť objekt

XMLHttpRequest

, vložený rámec, dynamicky vytváraný element

script

alebo využiť správanie objektu

Image

. V ďalšom článku sa podrobne oboznámime s prvou možnosťou - objektom

XMLHttpRequest

.