Minule sme sa oboznámili s použitím objektu XMLHttpRequest, ktorý je určený na komunikáciu klienta so serverom. Dnešný článok bude o alternatívnom spôsobe komunikácie, ktorého použitie je v niektorých aspektoch oveľa výhodnejšie. Ak potrebujeme odosielať iba požiadavky typu GET a POST (čo je drvivá väčšina prípadov), je v súčasnosti komunikácia prostredníctvom skrytého rámca väčšinou tou lepšou možnosťou, ako samotný objekt XMLHttpRequest.

Prostredníctvom elementu iframe dokážeme prenášať údaje v HTML alebo v textovom formáte. Navyše od objektu XMLHttpRequest môžeme prenášať aj súbory z klientského počítača. Cestu k súboru však musí najskôr návštevník stránky vybrať, až potom môžeme prepísaním atribútu target formulára presmerovať požiadavku do skrytého rámca a súbor pomocou JavaScriptu odoslať na server.

V súčasnosti najväčšou výhodou prenosu dát prostredníctvom skrytého rámca je to, že v prehliadači Internet Explorer 6 a jeho predchádzajúcich verziách nepotrebujme používať ActiveX objekt. Pri vyššom stupni zabezpečenia tak nebude vyskakovať na používateľa otravná hláška. Okrem toho je element iframe podporovaný vo viacerých prehliadačoch, než objekt XMLHttpRequest. Vývoj však nezastavíme a v budúcnosti zrejme nebudú tieto dve výhody skrytého rámca až také podstatné.

Podobne ako to bolo pri použití objektu XMLHttpRequest, ani prostredníctvom rámca nemôžeme plne komunikovať so serverom z inej domény. Odosielanie požiadaviek je síce možné, avšak prečítanie odpovede už také jednoduché nie je. V JavaScripte sa totiž nedostaneme k dokumentu v elemente iframe, ktorý obsahuje stránku servera z inej domény. Napriek tomu môžeme v obmedzenej forme dostať odpoveď aj z takéhoto servera. Odpoveď môže byť obsiahnutá v adrese stránky, na ktorú server požiadavku skriptu presmeruje. Prečítaním adresy rámca z atribútu src sa túto odpoveď dozvieme.

Vytvorenie skrytého rámca

Najjednoduchším spôsobom, ako vytvoriť na stránke skrytý element iframe, je vložiť ho priamo do HTML kódu stránky. To však vôbec nie je elegantné. Keďže chceme oddeliť správanie od obsahu stránky, budeme skrytý rámec vytvárať prostredníctvom JavaScriptu. Rámec vytvoríme pomocou štandardnej metódy createElement pre vytváranie elementov. Aby bol neviditeľný, nastavíme mu nulovú šírku, výšku a nulové okraje. Posledným krokom je nastavenie obslužnej funkcie, ktorá sa zavolá vždy po dokončení nahrávania obsahu rámca.

function createIFrame ()
{
	var iframe = null;
	
	if (document.createElement)
	{
		var iframe = document.createElement ("iframe");

		iframe.style.position = "absolute";
		iframe.style.border = "0";
		iframe.style.width = "0";
		iframe.style.height = "0";
		iframe.load = function () {receiveResponse (iframe)};
		
		document.body.appendChild (iframe);

		if (iframe.addEventListener) // Gecko / W3C
			iframe.addEventListener ("load", iframe.load, false);
		else if (iframe.attachEvent) // IE
			iframe.attachEvent ("onload", iframe.load);
		else
			iframe.onload = iframe.load;
	}
	
	return iframe;
}

Pre nastavenie obslužnej funkcie použijeme štandardnú metódu addEventListener. V prehliadačoch, ktoré túto metódu nepodporujú, skúsime použiť neštandardnú metódu attachEvent, prípadne priradiť obslužnú funkciu priamo. Podobne ako v predchádzajúcom článku musíme aj tu myslieť na uvoľňovanie pamäte. Keďže sme elementu iframe nastavili obslužnú funkciu, ktorá používa odkaz na iframe, vytvorili sme kruhovú referenciu medzi elementom dokumentu a objektom JavaScriptu. Aby sme dokázali neskôr tento začarovaný kruh rozťať, odložíme si dočasne odkaz na obslužnú funkciu do vlastnosti load elementu iframe.

Odoslanie požiadavky

Požiadavku na server odošle prehliadač automaticky po nastavení adresy skrytého rámca alebo po zavolaní metódy submit formulára, ktorého odpoveď smeruje do skrytého rámca. Po spracovaní požiadavky sa odpoveď servera v tomto rámci objaví.

Odoslanie požiadavky metódou POST

Odoslanie údajov z formulára, ktorý je už na stránke, je jednoduché. Rámcu, ktorý sme vytvorili, priradíme nejaké meno v atribúte name a to isté meno nastavíme formuláru do atribútu target. Väčšinou však takýto formulár na stránke nemáme a odoslanie bude zložitejšie.

Pri odosielaní údajov metódou POST vytvoríme v skrytom rámci formulár, ktorý naplníme požadovanými údajmi. Nakoniec ho odošleme metódou submit. Odoslanú požiadavku zakóduje samotný prehliadač, takže nemáme priamu kontrolu nad odoslanými údajmi.

function sendRequest (data, url)
{
	var iframe = createIFrame ();
	
	if (iframe)
	{
		var iframeDoc = (iframe.contentWindow?
			iframe.contentWindow.document:
			iframe.contentDocument);

		if (iframeDoc)
		{
			var pairs = data.split ("&");
			var inputs = [];
			var encode = function (text)
			{
				return decodeURIComponent (text).
					replace (/&/g, "&").
					replace (/</g, "&lt;").
					replace (/>/g, "&gt;").
					replace (/"/g, "&quot;");
			};

			for (var i = 0; i < pairs.length; ++i)
			{
				var pair = pairs [i].split ("=");

				inputs [i] =
					'<input type="text" name="' + encode (pair [0]) + '"' +
					' value="' + encode (pair [1]) + '" />';
			}
			
			iframeDoc.open ();

			iframeDoc.write (
				'<form action="' + url + '" method="POST">' +
				inputs.join ("") +
				"</form>");

			iframeDoc.getElementsByTagName ("form") [0].submit ();
		}

		return iframeDoc;
	}

	return false;
}

Uvedená funkcia dynamicky vytvorí skrytý rámec. Aby bolo možné zapísať do dokumentu rámca formulár, musí sa najprv dostať k dokumentu rámca, ktorý si uloží do premennej iframeDoc. V nasledujúcom kroku vygeneruje formulár na základe údajov, ktoré chceme odoslať. Tieto údaje sú uložené v reťazci data. Namiesto reťazca by sme mohli použiť napríklad asociatívne pole. Reťazec používame preto, aby bolo rozhranie funkcie pre odoslanie požiadavky rovnaké, ako v minulom článku.

Premenná data teda obsahuje zakódovaný formulár. Formulár je zakódovaný rovako, ako by to spravil pri odosielaní prehliadač. Reťazec pozostáva z dvojíc meno=hodnota, ktoré sú zreťazené znakom &. Meno aj hodnota sú URL-zakódované. Funkcia pre odoslanie požiadavky metódou POST tento reťazec dekóduje a vytvorí z neho formulár. Každá dvojica meno=hodnota zodpovedá jednému elementu input type=text, ktorého atribút name obsahuje meno a atribút value obsahuje hodnotu. Vygenerovaný formulár odošle údaje na zadanú adresu, čo dosiahneme nastavením atribútu action. Nakoniec volaním metódy submit formulár odošleme.

Odoslanie požiadavky metódou GET

Odoslanie požiadavky metódou GET je oveľa jednoduchšie. Stačí nastaviť zdroj rámca prostredníctvom atribútu src na požadovanú URL.

function sendRequest (data, url)
{
	var iframe = createIFrame ();
	
	if (iframe)
		iframe.location.replace (url);
}

Táto funkcia ani nepotrebuje komentár. Nasledujúcim krokom bude prijatie a spracovanie odpovede nastavenou funkciou receiveResponse.

Prijatie odpovede

Pri vytváraní rámca sme mu nastavili obslužnú funkciu, ktorá sa zavolá po nahraní jeho obsahu. Táto funkcia spracuje odpoveď nastavenú v jeho dokumente:

function receiveResponse (iframe)
{
	var iframeDoc = (iframe.contentWindow?
		iframe.contentWindow.document:
		iframe.contentDocument);
	
	var text = iframeDoc.body.innerHTML.
		replace (/&/g, "&").
		replace (/&lt;/g, "<").
		replace (/&gt;/g, ">").
		replace (/&quot;/g, '"');

	alert (text);

	if (iframe.removeEventListener)
		iframe.removeEventListener ("load", iframe.load, false);
	else if (iframe.detachEvent)
		iframe.detachEvent ("onload", iframe.load);
	else
		iframe.onload = null;
	
	iframe.load = null;
	setTimeout (function () {document.body.removeChild (iframe)}, 0);
}

Pri prijatí odpovede sa najprv dostaneme k dokumentu rámca. Potom dekódujeme jeho obsah. Ten je zakódovaný do HTML, takže musíme nahradiť špeciálne entity za znaky, ktoré reprezentujú.

Po spracovaní odpovede nesmieme zabudnúť na odregistrovanie obslužnej funkcie a odstránenie skrytého rámca zo stránky. Odstránením obslužnej funkcie, na ktorú sme si odložili referenciu do vlastnosti load, prerušíme kruhovú referenciu, čím umožníme prehliadaču Internet Explorer uvoľniť pamäť. Odstránenie skrytého rámca zo stránky o niečo oneskoríme, pretože odstraňujeme element, ktorého udalosť práve obsluhujeme. V opačnom prípade by prehliadač Firefox neukončil korektne načítavanie obsahu rámca.

Záver

V tejto časti seriálu sme si ukázali spôsob odosielania údajov metódou GET aj POST prostredníctvom skrytého rámca. Uvedené funkcie by mali stačiť na vytvorenie jednoduchej aplikácie, kde komunikuje klient so serverom.

Podobne ako v predchádzajúcom článku sme sa aj tu zaoberali uvoľňovaním pamäte. Pri písaní funkcií v JavaScripte, ktoré plánujeme využívať mnohokrát za sebou, by sme sa mali vždy zamyslieť aj nad problémom neuvoľňovania pamäte v niektorých prehliadačoch.