XML pro web aneb od teorie k praxi, 11.díl - XML a Javascript poprvé

14. února 2003
Nová Kazaa 2.1 SDÍLET NA FACEBOOKU TWEETNOUT
Technologie implementované v moderních prohlížečích umožňují efektivně používat XML při kouzlení s HTML stránkami. Dnes si ukážeme první příklad spojení XML a Javascriptu.

XML a Javascript? Na první pohled může tato kombinace vypadat poněkud nedůvěryhodně. Jaké asi může mít možnosti Javascript, jazyk stvořený (téměř) výhradně pro práci s HTML stránkami v prohlížeči, ve spolupráci s XML? Ve skutečnosti je však spektrum využití Javascriptu v moderních prohlížečích velice široké a zahrnuje také relativně velkou množinu způsobů, které nám umožňují začlenit práci s progresivním formátem XML i na stranu klientských aplikací.

Javascript a DOM

Samotný Javascript by ovšem příliš slávy neudělal, kdyby neměl jednoho velmi vydatného pomocníka - Objektový model dokumentu (Document Object Model, neboli zkráceně DOM). Předem upozorňuji, že bez znalosti DOM můžete na jakékoliv využití XML v Javascriptu v podstatě zapomenout. Pro ty, kteří se učili Javascriptu už před určitým časem, kdy panovaly prohlížeče Microsoft Internet Explorer 4 a Netscape Navigator 4.xx, je nutné dodat, že dnešní DOM (standard vyvíjený konsorciem W3C) je něco trochu jiného než "Objektový model prohlížeče", kterým disponovaly výše zmíněné prohlížeče (a také jejich přímí předchůdci) - i když obojí vychází z podobných principů. W3C DOM je obecnější a byl od začátku vyvíjen jak pro XML, tak i pro (X)HTML.

Podpora v prohlížečích

Ve kterých prohlížečích najdeme takovou podporou W3C DOM, která nám umožní smyslupnou práci s XML?

  • Microsoft Internet Explorer, verze 5.0 a vyšší
  • Mozilla a prohlížeče založené na jádru Gecko (Netscape 6 a vyšší, Phoenix...)
  • Opera, počínaje současnou verzí 7

Suverénně nejlepší podporou DOM disponuje Mozilla, následovaná poslední verzí Opery s nově napsaným jádrem. Internet Explorer byl zřejmě prvním prohlížečem s podporou W3C DOM a kromě podpory samotného standardu DOM obsahuje (díky vestavěnému MSXML parseru) i další, mnohdy užitečná rozšíření pro práci s XML. I v Mozille je k dispozici několik rozšíření, často téměř identických s MSIE. V tomto ohledu je nutné konstatovat, že vývoj prohlížečů opět poněkud utíká vývoji standardů, stejně jako tomu bylo s objektovým modelem - zasvěcení si jistě vzpomenou na schizofrenické souboje se zcela odlišnými objektovými modely v IE 4 a NN 4, které v posledních letech pomalu upadají v zapomění díky pokračují implementaci W3C DOM v browserech.

Je nutné upozornit na to, že DOM není nijak svázan pouze s Javascriptem - jedná se o univerzální objektové rozhraní, které může být (a také je) implementováno v různých jazycích a na různých platformách. Z "blízkých příbuzných" uveďme například Javu, .NET nebo PHP.

Pokud je pro vás zatím Document Object Model velkou neznámou, není nutné skládat ruce do klína - před necelým rokem vycházel na Živě seriál o W3C DOM a jeho implementaci v Javascriptu, který je téměř ideální průpravou pro osvojení postupů, které si ukážeme dnes a především v dalších dílech.

Jak načíst XML dokument do HTML stránky?

Odpověď na otázku položenou v nadpisu představuje řešení základního problému pro použití XML v prohlížeči. Hned na začátku prozradím, že těch řešení je ve skutečnosti vícero. Dnes se však budeme zabývat řešením nejjednodušším, nejuniverzálnějším, ale zároveň také nejvíce vzdáleným od optimálního způsobu.

Pokud stojíte před úkolem, jak do HTML stránky načíst jiný (X)HTML dokument, pravděpodobně vám bude ihned jasné, že stránka musí obsahovat FRAME (ať už klasický FRAMESET, nebo vnořený rám IFRAME, začleněný v toku běžného (X)HTML dokumentu). Naprosto stejný způsob můžeme použít i pro načtení XML dokumentu, pouze je nutné pamatovat na některá specifika. Pojďme si nyní podrobně rozebrat příklad takto fungujícího řešení.

Nejčastějším důvodem, proč budeme chtít načítat XML dokument do HTML stránky, bude manipulace s daty, které obsahuje XML dokument. S nejvetší pravděpodobností budeme požadovat, aby samotný XML dokument vůbec nebyl zobrazen. Proto se zřejmě nejlepší volbou jeví načtení XML dokumentu do skrytého IFRAME. Hned u tohoto bodu se skrývá první zádrhel, spojený s prohlížečem Opera 7 - pokud IFRAME skryjeme pomocí CSS vlastnosti display (display: none), skript nebude funkční. V ostatních prohlížečích (IE5+, Mozilla) skrytí pomocí display: none na funčnost skriptu nemá žádný vliv. Jelikož je však naším cílem, aby načtení XML dokumentu pracovalo v co nejvyšším počtu prohlížečů, musíme tuto anomálii ošetřit. Skrytí IFRAME můžeme dosáhnout také pomocí CSS vlastnosti visibility (visibility: hidden), ovšem potom nám může vadit, že skrytý objekt si nárokuje stejné místo ve stránce, jako kdyby byl zobrazen. Musíme tedy použít jiný trik - vyjmutí elementu ze standardního toku dokumentu pomocí absolutního pozicování (position: absolute). Nemusím snad dodávat, že šířku a výšku IFRAME je záhodno nastavit na nulu, ať už pomocí příslušných atributů, nebo pomocí CSS.

Nyní tedy máme v kódu (X)HTML stránky následující konstrukci:

<iframe id="xml-data" name="xml-data" src="document.xml" width="0" height="0"></iframe>

A v kaskádovém stylu jsme ošetřili skrytí IFRAME:

iframe {
	visibility : hidden;
	position : absolute;
}

Nyní je potřeba vyřešit problém, jak se pomocí Javascriptového kódu v naší HTML stránce dostat k objektu načteného XML dokumentu. Postup bude stejný, jako kdyby v IFRAME sídlil obyčejný (X)HTML dokument:

var XMLdoc = window.frames["xml-data"].document;

V této fázi se dostáváme k další komplikaci, která tentokrát nastane v prohlížeči Microsoft Internet Explorer - na rozdíl od Mozilly a Opery (které se chovají v tomto bodě korektně) tento vrátí nikoliv DOM objekt XML dokumentu, nýbrž jakýsi prazvláštní DOM HTML dokument. I tato úchylka MSIE se dá obejít - pro přístup k objektu DOM XML dokumentu ale musíme použít proprietální vlastnost objektu document XMLDocument. Pokud bychom použili technologii Data Islands popsanou v minulém dílu, pomocí stejné vlastnosti bychom přistupovali v Javascriptu k XML dokumentu načtenému v "datovém ostrůvku". Abychom se co nejvíce odstínili od rozličného chování prohlížečů, můžeme si napsat jednoduchou vlastní funkci, která bude vracet objekt DOM XML dokument.

var XMLdoc;

function getXMLdocument(frameName)
{
	XMLdoc = window.frames[frameName].document;
	if(XMLdoc.XMLDocument) XMLdoc = XMLdoc.XMLDocument;
	return XMLdoc;
}

Jediným parametrem funkce je jméno rámu, který obsahuje načtený XML dokument. Mozilla a Opera budou mít jasno hned na prvním řádku kódu funkce. Kvůli Internet Exploreru ještě testujeme existenci vlastnosti XMLDocument - pokud ji prohlížeč (MSIE) zná, pak je nutné právě tuto vlastnost použít a snadno tak uložíme do proměnné XMLdoc ten správný objekt v prohlížeči Internet Explorer.

Při volání funkce getXMLdocument() musíme dát pozor na to, jestli už je XML dokument v IFRAME načtený. Bezprostřední volání funkce v bloku javascriptu v hlavičce (HEAD) HTML stránky skončí neúspěchem (doprovázeným chybovou hláškou), neboť v okamžiku provádění ještě není zpracován další obsah HTML stránky, natož aby mohl být XML dokument v IFRAME načtený. Lepší nápad je spouštět funkci až po úplném načtení stránky. Toho dosáhneme například voláním funkce v ovladači události load objektu window. Vytvoříme si funci init(), která bude sloužit jako výše zmíněný ovladač.

var isXMLloaded = false; //promenna indikujici nacteni XML dokumentu
var XMLdoc; //promenna pro XML dokument
window.onload = init; //registrace ovladace
	
function init() {
	XMLdoc = getXMLdocument(`xml-data`);
	isXMLloaded = true;
	alert(`XML dokument byl nacten.`);
}

Definovali jsme si globální proměnnou isXMLloaded, která je defaultně nastavena na false. Po načtení dokumentu je spuštěna funkce init(). Funkce getXMLdocument zajistí přístup k DOM objektu XML dokumentu, který je uložen do proměnné XMLdoc. Poté je logická proměnná isXMLloaded nastavena na true a uživateli se zobrazí hlášení o načtení XML dokumentu.

Možná nemusí být úplně jasné, k čemu potřebujeme proměnnou isXMLloaded. Indikace načtení XML dokumentu se nám může hodit v případě načítání rozsáhlejších stránek či XML dokumentů - pokud stránka umožňuje uživateli spustit jakoukoliv akci, která používá data z XML dokumentu, mohou být příslušné ovládací prvky zobrazeny ještě před tím, než bude XML dokument načten celý a připraven k použití - akce uživatele pak může vést k chybovému hlášení. Máme-li ošetřenu indikaci načtení XML dokumentu výše popsaným způsobem, stačí ve funkci, kterou spouští akce uživatele, napřed otestovat indikátorovou proměnnou a případně běh funkce stopnout.

Nyní tedy zbývá jen ukázat zpracování XML dokumentu pomocí mocné kombinace Javascript/DOM. Na pokyn návštěvníka stránky dojde k vypsání dat o uživatelích z načteného XML dokumentu. Vypsání má na starost funkce writeUserData(). Funkce využívá další 4 pomocné funkce. Celý příklad si můžete vyzkoušet prakticky [ukázka].

function writeUserData() {
	if(!isXMLloaded) return false;//testovani nacteni XML
	var userNodes = getElByName(XMLdoc, `user`);
	for(i=0; i<userNodes.length; i++) {
		var nameEl = createEl(`h2`, getContent(getElByName(userNodes[i], `nickname`)[0]));
		var passEl = createEl(`code`, `heslo: `+getContent(getElByName(userNodes[i], `password`)[0]));
		var dateEl = createEl(`div`, `datum registrace: `+getContent(getElByName(userNodes[i], `reg-date`)[0]));
		document.body.appendChild(nameEl);
		document.body.appendChild(passEl);
		document.body.appendChild(dateEl);
	}
	document.getElementById("tlacitko").style.display = `none`;
	return false;
}
/* vraci set vsech elementu daneho name v danem node */
function getElByName(node, name) {
	return node.getElementsByTagName(name);
}
/* vraci text obsazeny v elementu s textovym obsahem */
function getContent(node) {
	return node.firstChild.data;
}
/* vytvari element vcetne textoveho obsahu */
function createEl(name, text) {
	var el = document.createElement(name);
	el.appendChild(createText(text));
	return el;
}
/* vytvari textovy node */
function createText(text) {
	return document.createTextNode(text);
}

Podrobné vysvětlení toho, jak celá funkce pracuje, je již nad rámec tohoto seriálu - ti, kteří znají W3C DOM, princip jistě chápou, ostatní tento příklad hravě pochopí poté, co si prostudují doporučený seriál o W3C DOM :-).

V příštím dílu se dozvíte, že způsob načtení XML dokumentu do HTML stránky může být i o poznání elegantnější - nicméně daň za tuto "noblesu" odnese Opera, pro kterou zatím zůstává tato "vyšší škola" tabu.

Diskuze (10) Další článek: Nová Kazaa 2.1

Témata článku: Software, Programování, Internet Explorer, Java, Javascript, Vnořený rám, Code, Nn, Hidden, POP, XML, Teorie, Stejný princip, HTML, Phoenix, Element, Prohlížeč, Doma, Tabu, CSS vlastnost, Funky


Určitě si přečtěte

Tesla je stále ve ztrátě, ale elektromobily Model 3 se prodávají neuvěřitelně dobře

Tesla je stále ve ztrátě, ale elektromobily Model 3 se prodávají neuvěřitelně dobře

** Tesla má rekordní příjem, je ale ve ztrátě ** Objem výroby se zvyšuje, dochází ale baterie ** Pomoci mají nové továrny Gigafactory

Karel Javůrek | 91

Sex a rozmnožování při mezihvězdné cestě: Kolik lidí je potřeba pro let k Proximě Centauri?

Sex a rozmnožování při mezihvězdné cestě: Kolik lidí je potřeba pro let k Proximě Centauri?

** Vědci spočítali, jak velká by musela být posádka pro vícegenerační let k nejbližší hvězdné soustavě ** Proxima Centauri se nachází 4,3 světelných let od nás ** Za současných technologií bychom k ní letěli 6300 let

Petr Kubala | 58

Cardano: kryptoměna nové generace, která se netěží, ale razí

Cardano: kryptoměna nové generace, která se netěží, ale razí

** Cardano je unikátní kryptoměna, která díky svým vlastnostem a schopnostem přitahuje pozornost ** Od Bitcoinu se zásadně liší ** Jejím smyslem není jen „koupit a prodat“, má pozoruhodné technologické možnosti

Martin Miksa | 28

Qualcomm se chlubí, že se mu podařilo téměř nemožné: Vyrobil první mobilní anténu pro 5G

Qualcomm se chlubí, že se mu podařilo téměř nemožné: Vyrobil první mobilní anténu pro 5G

** Za dveřmi je 5G – nová generace mobilních telekomunikací ** Jednou z jeho specialit jsou nové kmitočty, tzv. mmWave ** Jenže signál o mnoha desítkách GHz přináší hromadu překážek

Jakub Čížek | 22


Aktuální číslo časopisu Computer

Jak mobily určují svoji polohu?

Velký test notebooků pro studenty

Nejlepší reproduktory na párty

Služby a aplikace pro výuku angličtiny