Co je AJAX
AJAX (Asynchronous JavaScript And XML) je nestandardní rozšíření skriptovacího jazyka JavaScript, který se používá v dynamicky generovaných webových aplikacích.
Jedná se o JavaScriptový objekt, s jehož pomocí je možné zasílat a přijímat z webového serveru různé formáty dat, zahrnující XML, HTML, nebo jen čistý text. Tato operace je prováděná asynchronně a tímto způsobem je možné vytvářet opravdu dynamické webové stránky, kde se obsah stránky mění jakoby v pozadí aplikace a na žádost klienta (uživatele), bez nutnosti znovu nahrávat celou stránku.
V čem je háček?
Protože je AJAX rozšířením JavaScriptu, tak je samozřejmě možné jej použít pouze u internetových prohlížečů, které jej podporují. Proto je nevhodné všechny informace na stránkách prezentovat uživatelům jen přes AJAX, jednak ne všichni uživatelé (zhruba 1% uživatelů má JavaScript deaktivovaný) a ne všechny internetové prohlížeče (hlavně internetové prohlížeče v mobilních telefonech) JavaScript podporují. Nakonec i vyhledávací roboti (jako např: googlebot, seznambot) s JavaScriptem neumí pracovat a tedy neumí indexovat informace prezentované uživateli JavaScriptem. Proto je nutné, aby byly stránky přístupné i bez JavaScriptu a JavaScript a AJAX používat jen jakožto rozšíření stávajících stránek, poskytující uživatelům větší komfortnost a přístupnost.
Ovšem u některých projektů je AJAX přímo nutností, jako například u Google maps, či mapy seznamu. Tyto aplikace neustále komunikují se serverem a bylo by dosti obtížné tuto funkci provádět načtením stránky pokaždé, kdy uživatel změní polohu bodu na mapě.
Aplikace používající AJAX
Mimo výše uvedené aplikace pro zobrazení map, se také AJAX velmi často používá u tzv. našeptávače, který je k vidění například u vyhledávače na seznam.cz. Kdykoliv se do vyhledávacího políčka zadá vyhledávací výraz, tak se ihned aktivuje funkce, která posílá napsané znaky serveru. Ten následně pošle zpět možné klíčové slova, která zřejmě chce zřejmě uživatel do políčka zadat. Vše se tak děje na pozadí aplikace a uživatel nemá vůbec ponětí, že prohlížeč neustále komunikuje se serverem a posílají si vzájemně data.
Dalšími aplikacemi, používající AJAX, jmenujme také např. IceWarp webmail.
Implementace
Jelikož je AJAX nestandardním rozšířením, tak jej jednotlivé firmy, vytvářející internetové prohlížeče, implementovaly do JavaScriptu pod různými objekty. Microsoft a jeho prohlížeče Internet Explorer do verze 6 používají k přístupu prvek ActiveX Objektu “Microsoft.XMLHTTP”, kdežto ostatní prohlížeče (Mozzila, Firefox, Safari, Internet Explorer 7 a vyšší) používají přímo třídu XMLHttpRequest. Jejich jedlotlivé metody jsou již shodné a proto se mohou vytvářet například tímto způsobem:
var httpRequest;
if (window.XMLHttpRequest) { // Mozilla, Safari, ...
httpRequest = new XMLHttpRequest();
} else if (window.ActiveXObject) { // IE
httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
}
Tímto je vytvořen objekt httpRequest. Následně je nutno metodou open() definovat požadavek, který má být odeslán na server. Metoda open() má tento tvar:
httpRequest.open(metoda požadavku, URL, typ požadavku);
kde jednotlivé parametry znamenají:
metoda požadavku – GET nebo POST
URL – např. “http://www.priklad.cz/ajax.php”
typ požadavku – zda se jedná o synchronní (false), nebo asynchronní (true) přenost dat
Jak už býlo uvedeno výše, AJAX je zkratou pro asynchronní přenos dat. Proto musí existovat způsob, který zajistí, že data budou odeslána na server, avšak uživatel zároveň bude moci nadále pracovat s prohlížečem, bez nutnosti čekat na výsledek odeslaný serverem. Pro tento účel je vytvořena metoda onreadystatechange, ke které je nuto přiřadit akci, která se má provést při každé změně stavu zasílání dat.
Existují celkem 4:
0: (uninitialized) dosud neinicializovano metodou send()
1: (loading) nahrává se
2: (loaded) nahráno
3: (interactive)
4: (complete) kompletní dokončení požadavku
Stavy zasílání dat je možné získat vlastností readyState, a se spojení s metodou onreadystatechange lze přesně určit, kdy byla dat v pořádku ze serveru přijata, například takto:
httpRequest.onreadystatechange = function () {
if (httpRequest.readyState == 4) {
// data přijata, můžu zpracovat
} else {
// data stále nepřijata
}
}
Pokud je vytvořen objekt httpRequest a jsou definovány funkce a metody pro zasílání a přijímání dat, je možné odeslat celý požadavek na server pomocí metody send():
httpRequest.send(null);
Po úspěšném přijetí dat je možné si tato data vyzvednout metodou httpRequest.responseXML, pokud je zaslán validní XML, nebo pomocí httpRequest.responseText v jakémkoli jiném případě.
Více informací o implementaci a všech metodách objektu httpRequest je možné získat na webu Mozilla Developer Center.
Závěrem
Použití AJAXu znamená zvýšení použitelnosti a přívětivosti webových aplikací. Webové aplikace se tak přizpůsobují aplikacím desktopovým, kdy na požadavek klienta jsou data ihned k dispozici, aníž by bylo nutno načítat znova celou stránku. Tímto se taktéž zvyšuje rychlost aplikace, neboť jsou zasílány pouze ta data, která jsou v daný moment potřebná. Je však vždy nutno počítat s tím, že daná data zasílána AJAXem nejsou viditelná pro vyhledávací roboty, proto je nutno zajistit jejich nalezení i bez použití AJAXu.
A ještě úplně závěrem, tento článek jsem psal někdy v roce 2009 – dnes se už vše řeší pomocí JQUERY.