XML Rakendus

XML rakenduse loomine, kasutades Html'i ja JavaScript'i.

XML Näidisdokument

Loome XML dokumendi ("eu.xml") mis loetleb euroopa riike.

<?xml version="1.0"  encoding="ISO-8859-1"?>
<EUROOPA >
	<LOETELU>
		<RIIK>Eesti</RIIK>
		<PEALINN>Tallinn</PEALINN>
		<PINDALA>45 226 r/km</PINDALA>
		<RAHVAARV>1,34 mlj.</RAHVAARV>
		<RIIGIKEEL>eesti</RIIGIKEEL>
		<RIIGIKORD>parlamentaarne vabariik</RIIGIKORD>
	</LOETELU>
.
...järgneb...
.

Siit saad vaadat kogu loetelu

Selleks, et laadida XML dokumenti ("eu.xml"), kasutame samasugust koodi nagu XML Parseri peatükis:

var xmlDoc;
if (window.ActiveXObject)
  {// kood IE jaoks
  xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
  }
else if (document.implementation.createDocument)
  {// kood Firefox, Mozilla, Opera, etc. jaoks
  xmlDoc=document.implementation.createDocument("","",null);
  }
else
  {
  alert('Sinu brauser ei loe seda skripti');
  }
xmlDoc.async=false;
xmlDoc.load("eu.xml");

xmlDoc on XML DOM objekt mis avab juurdepääsu JavaScript'ile.
Järgnev kood kuvab Html tabeli mille lahtrid täituvad XML dokumendi dataga, XML DOM objekti abil:

document.write("<table border='1'>");

     var x=xmlDoc.getElementsByTagName("LOETELU");
for (var i=0;i<x.length;i++)
{ 
document.write("<tr>");
document.write("<td>");
document.write(
x[i].getElementsByTagName("RIIK")[0].childNodes[0].nodeValue);
document.write("</td>");

document.write("<td>");
document.write(
x[i].getElementsByTagName("LINN")[0].childNodes[0].nodeValue);
document.write("</td>");
document.write("</tr>");
}
document.write("</table>");

XML dokumendi, iga LOETELU elemendi jaoks on loodud tabeli rida. Igas reas on kaks lahtrit mis hakkavad sisaldama RIIK ja PEALINN andmeid.

Selline on tulemus:

XML datat saab kopeerida igasse HTML elementi, mis omakorda kuvab selle tekstina. Allpool olev kood on üks osa Html faili <head> sektsioonist. Kood võtab XML failist <LOETELU> andmed ja kuvab need Html elemendis id="show" abil:

var x=xmlDoc.getElementsByTagName("LOETELU");
i=0;
function display()
{
artist=
(x[i].getElementsByTagName("RIIK")[0].childNodes[0].nodeValue);
title=
(x[i].getElementsByTagName("PEALINN")[0].childNodes[0].nodeValue);
year=
(x[i].getElementsByTagName("PINDALA")[0].childNodes[0].nodeValue);

txt="Riik: "+riik+"<br />Pealinn: "+pealinn+"<br />Pindala: "+pindala;

document.getElementById("show").innerHTML=txt;
}

Html dokumendi <body> sisaldab onload sündmust mis omakorda käivitab "display()" funktsiooni, kui lehte laetakse. Sealsamas asub ka <div id='show'> element mis hangib XML datat.

<body onload="display()">
   <div id='show'></div>
	</body>

XML data <div> elemendi sees
Selles näites saab vaadata ainult esimest LOETELU elementi XML dokumendis. Selleks, et liikuda edasi data saamiseks, tuleb lisada veel koodi. Selleks loome kaks funktsiooni, nimega next() ja previous():

function next()
{
if (i<x.length-1)
  {
  i++;
  display();
  }
}

function previous()
{
if (i>0)
  {
  i--;
  display();
  }
}

Funktsioon next() kinnitab, et enam midagi näha pole, seega on see viimane LOETELU element. Funktsioon previous() kinnitab, et enam midagi näha pole, seega oled esimese LOETELU elemendi juures. Mõlemad funktsioonid käivituvad edasi/tagasi nuppudele klikkides:

<input type="button" onclick="previous()" value="previous" />

<input type="button" onclick="next()" value="next" />

Paneme kõik kokku

Veidi kujutlusvõimet ning pealehakkamist ja saadki luua meelepärase rakenduse.

Proovi ise

Selleks, et paremini tundma õppida seda teemat siis tutvu lähemalt
XML DOM materjalidega.

XML Rakendus

Menüü

XML JavaScript

XML Arendused

Kasulikud lingid