Ajax - XMLHttpRequest

Spôsobov, ako implementovať komunikáciu klienta so serverom je viac, avšak použitie objektu

XMLHttpRequest

sa s technikou Ajax spája asi najčastejšie. Použitie tohto objektu je v podstate jediné čisté riešenie komunikácie, pri ktorom sa technológia používa presne na to, na čo bola určená.

XMLHttpRequest

umožňuje vytvárať požiadavky s použitím rôznych metód, vrátane metód GET a POST. V dnešnej dobe ho podporujú všetky súčasné prehliadače.

Objekt

XMLHttpRequest

umožňuje prenášať údaje vo formáte XML, vďaka čomu môžeme na strane klienta jednoduchšie spracovávať prijaté údaje. Rovnako je však možné prenášať čistý text, čo sa hodí v prípadoch, v ktorých by bol XML formát kanónom na vrabce. Hoci je

XMLHttpRequest

určený na komunikáciu klienta so serverom, nie vždy je to tá najlepšia voľba. Nedostatkom objektu

XMLHttpRequest

je, že v prehliadači Internet Explorer je možné tento objekt vytvoriť iba s použitím technológie ActiveX. To môže byť problémom, pretože pri vyššom stupni zabezpečenia sa pri vytváraní tohto objektu môže používateľovi zobraziť otravná hláška, prípadne sa nemusí objekt

XMLHttpRequest

vôbec vytvoriť. V prehliadači Internet Explorer 7 už toto obmedzenie neplatí a objekt

XMLHttpRequest

sa dá vytvoriť rovnakým spôsobom ako v ostatných prehliadačoch.

Ďalšou vlastnosťou komunikácie prostredníctvom objektu

XMLHttpRequest

je, že nie je možné komunikovať so serverom z inej domény, než z ktorej bol spustený skript. Toto obmedzenie sa dá obísť nastavením prehliadača, ale z bezpečnostného hľadiska to nie je príliš rozumné. Ak by totiž bola povolená komunikácia so servermi z inej domény, bolo by jednoduché okrem iného napríklad hlasovať za nejakú možnosť v ľubovoľnej ankete, prípadne z Vašej IP adresy vložiť príspevok do nejakej diskusie na inej stránke. Pre komunikáciu so servermi z inej domény je preto lepšie vytvoriť na serveri proxy stránku, ktorá takúto komunikáciu zabezpečí.

Vytvorenie objektu XMLHttpRequest

Pri vytváraní objektu

XMLHttpRequest

sa postupne skúšajú viaceré spôsoby. Uprednostňuje sa vytvorenie objektu

XMLHttpRequest

jeho konštruktorom, ako keby to bol objekt ako každý iný. Až v prípade, že konštruktor nie je k dispozícii, príde na rad vytvorenie tohto objektu pomocou technológie ActiveX. V mnohých ukážkach na webe bolo toto poradie opačné a v podstate na ňom do istej doby ani nezáležalo. Ak bola k dispozícii technológia ActiveX, vytvoril sa

XMLHttpRequest

pomocou nej a až keď sa to nepodarilo, použil sa konštruktor pre

XMLHttpRequest

. Príchodom prehliadača Internet Explorer 7 už na poradí záleží, pretože ten umožňuje vytvoriť

XMLHttpRequest

obidvomi spôsobmi, pričom chceme uprednostniť natívny objekt

XMLHttpRequest

.

function createXhr ()
{
	var xhr = null;

	if (window.XMLHttpRequest)
		xhr = new XMLHttpRequest ();
	else if (window.ActiveXObject)
		try { xhr = new ActiveXObject ("Msxml2.XMLHTTP"); }
		catch (e)
		{
			try { xhr = new ActiveXObject ("Microsoft.XMLHTTP"); }
			catch (e) {}
		}

	return xhr;
}

Možno sa pýtate, prečo sa pokúšame vytvoriť ActiveX objekt

Msxml2.XMLHTTP

a pri neúspechu vyskúšame ActiveX objekt

Microsoft.XMLHTTP

. Je to tým, že objekt

XMLHttpRequest

má viacero implementácií. Pomocou objektu

Microsoft.XMLHTTP

bolo možné vytvoriť objekt na komunikáciu so serverom dávno pred tým, než sa objavil objekt

XMLHttpRequest

v iných prehliadačoch. Neskôr vznikla ďalšia verzia tohto objektu

Msxml2.XMLHTTP

, ktorá sa líši snáď iba pomenovaním.

Vytvorený objekt

XMLHttpRequest

poskytuje niekoľko metód:

abort ():
Ukončí požiadavku.
getAllResponseHeaders ():
Vráti v reťazci zoznam všetkých hlavičiek.
open ("metóda", "url"[, asyncFlag[, "userName"[, "password"]]]):
Priradí požiadavke cieľovú URL, metódu a ďalšie voliteľné parametre.
send (content):
Odošle požiadavku so zadaným obsahom.
setRequestHeader ("label", "value"):
Pridá k požiadavke hlavičku.

Vlastnosti objektu XMLHttpRequest:

onreadystatechange:
Funkcia pre obsluhu udalosti zmeny stavu objektu.
readyState:
Číslo reprezentujúce aktuálny stav objektu: 0 = nenainicializovaný (uninitialized), 1 = nahráva (loading), 2 = nahraný (loaded), 3 = interaktívny (interactive), 4 = dokončený (complete)
responseText:
Reťazec s údajmi, ktoré poslal server.
responseXML:
XML (DOM-kompatibilný objekt) s údajmi, ktoré poslal server.
status:
Návratový kód odpovede, ako napr. 404 pre nenájdenú stránku alebo 200 pre úspech.
statusText:
Text, ktorý dopĺňa návratový kód odpovede.

Odoslanie požiadavky

Z predchádzajúceho výpisu metód objektu

XMLHttpRequest

vidíme, že pri otváraní novej požiadavky môžeme nastaviť, či má byť volanie synchrónne alebo asynchrónne. Predvolená hodnota je

true

, takže bez uvedenia tretieho argumentu metódy

open

bude volanie asynchrónne. Ak by sme nastavili tretí argument na

false

, volanie by bolo synchrónne. To by znamenalo, že hneď po zavolaní metódy

send

by sme mohli pracovať s odpoveďou, ku ktorej by sme sa dostali prostredníctvom vlastností

responseText

alebo

responseXML

. Avšak pri synchrónnom volaní musí klient na odpoveď čakať a počas tohto čakania nemôže nič robiť. Preto je vždy lepšie použiť asynchrónne volanie (okrem veľmi výnimočných prípadov).

Odoslanie požiadavky metódou POST

Najčastejšie sa používajú metódy

open

a

send

. Odoslanie požiadavky metódou POST by vyzeralo nasledovne:

function sendRequest (data, url)
{
	var xhr = createXhr ();

	if (xhr)
	{
		xhr.open ("POST", url);
		xhr.onreadystatechange = function () { if (receiveResponse (xhr)) xhr = null; };
		xhr.setRequestHeader ("Content-Type", "application/x-www-form-urlencoded");
		xhr.send (data);
	}

	return xhr;
}

Pri asynchrónnom volaní nastavíme obslužnú funkciu udalosti

readystatechange

, ktorá sa potom zavolá pri každej zmene stavu požiadavky. Tu by som chcel upozorniť na funkciu, ktorú sme v príklade použili ako obslužnú. Táto funkcia volá ďalšiu funkciu

receiveResponse

, ktorej v argumente posunieme objekt

xhr

. Dôležité je to, že po spracovaní odpovede, keď už viac nebude potrebné pristupovať k objektu

xhr

, vráti funkcia

receiveResponse

hodnotu

true

, aby bolo možné uvoľniť objekt

xhr

z pamäte. V mnohých ukážkach na webe takéto uvoľňovanie pamäte chýba, čo má za následok v niektorých prehliadačoch to, že pri každej požiadavke na server sa obsadí ďalší kus pamäte. Konkrétne ide o tzv. memory leaks v prehliadači Internet Explorer. Táto pamäť sa dá potom uvoľniť jedine reštartom prehliadača.

Pri požiadavkách odosielaných metódou POST musíme ešte nastaviť hlavičku požiadavky

Content-Type

na

application/x-www-form-urlencoded

, aby server vedel, že obsahom je zakódovaný formulár.

Odoslanie požiadavky metódou GET

Odoslanie požiadavky metódou GET je veľmi podobné, ale o niečo jednoduchšie. Keďže odosielané údaje sú zakódované už priamo v URL, netreba ich v metóde send nastavovať. Podobne netreba nastavovať hlavičku:

function sendRequest (data, url)
{
	var xhr = createXhr ();

	if (xhr)
	{
		xhr.open ("GET", url);
		xhr.onreadystatechange = function () { if (receiveResponse (xhr)) xhr = null; };
		xhr.send (null);
	}

	return xhr;
}

Nasledujúcim krokom bude prijatie a spracovanie odpovede nastavenou metódou

receiveResponse

.

Prijatie odpovede

Pri vytváraní požiadavky sme priradili objektu

XMLHttpRequest

obslužnú funkciu, ktorá sa volá pri výskyte udalosti

readystatechange

. Úlohou tejto obslužnej funkcie je spracovať prijatú odpoveď, prípadne ohlásiť chybu. Môže vyzerať nasledovne:

function receiveResponse (xhr)
{
	if (xhr.readyState == 4)
	{
		if (!xhr.status || xhr.status == 200)
			alert (xhr.responseText);
		else
			alert ("Error: " + xhr.statusText);

		return true;
	}
  
	return false;
}

Pri prijatí odpovede sa v prvom rade skontroluje vlastnosť

readyState

. Tá obsahuje kód stavu, v akom sa požiadavka nachádza. V drvivej väčšine prípadov chceme obslúžiť stav s kódom 4, kedy sa dokončilo prijatie odpovede. V komunikácii cez protokol HTTP má každá odpoveď svoj stav, ktorý je vyjadrený číslom vo vlastnosti status. Ak prišla odpoveď v poriadku, bude jej stav označený číslom 200. Iný stav znamená, že pravdepodobne nastala nejaká chyba. Ak spúšťame skript z lokálneho počítača bez použitia webového servera, môžeme pristupovať priamo k súborom na disku. Keďže v takomto prípade nekomunikujeme s webovým serverom, nemusí byť stav odpovede nastavený.

Táto funkcia vráti

true

v prípade, že požiadavku spracovala a objekt

xhr

nebude už viac potrebovať. V opačnom prípade vráti

false

. Ako bolo skôr spomenuté, takéto správanie sme si definovali kvôli správnemu uvoľňovaniu pamäte.

Záver

V tejto časti seriálu sme si ukázali základy práce s objektom

XMLHttpRequest

, ktoré by mali stačiť na vytvorenie jednoduchej komunikácie klienta so serverom. V ďalšej časti si ukážeme, ako by sa dala realizovať ekvivalentná komunikácia prostredníctvom skrytého rámca.

Čím sa líši táto ukážka od ostatných príkladov komunikácie klienta so serverom dostupných na Internete je hlavne to, že sa staráme aj o uvoľňovanie pamäte. Keď nepoužívame takúto komunikáciu intenzívne, nemusíme sa o neuvoľnenú pamäť príliš starať. Pri častej komunikácii však bez uvoľňovania pamäte hrozí kolaps aplikácie, webového prehliadača, prípadne celého systému z dôvodu vyčerpania systémových zdrojov.