HTML-Hajen

Simple lister fra XML-databaser









Simple lister fra XML-filer

Når man har lavet sin XML-database, er der forskellige måder at trække data ud på igen. Den helt simple er, at få indholdet skrevet ud som en liste, f.eks. en tabel.

At skrive hele indholdet ud, når man lige har lavet en database kan umiddelbart virke som at gå over åen efter vand, for så kunne man lige så godt bare lave tabellen og spare en fil og et JavaScript og dermed få en side der er hurtigere og lettere at lave. Det er imidlertid sådan, at der findes brugere der kan gå helt i sort over et søgefelt. De skimmer hellere en alenlang liste igennem efter det de søger, end at skulle foretage et valg ved at skrive i et søgefelt, eller de ved ikke helt hvad de søger, før de ser det. Man kan derfor med fordel tilbyde valget mellem en søgning i databasen eller at få hele indholdet ud, så man selv kan gennemlæse indholdet efter det man måtte søge.


XML-filen

XML-filen består af et felt man søger i, og et felt man returnerer. Det kan sagtens være det samme felt, men ofte er det en feltværdi, f.eks. et nøgleord, vi søger på og får f.eks. forklaringen returneret. Hvis vi prøver at lave en liste med ass icons som model, så kunne listen se således ud:

<?xml version="1.0" encoding="UTF-8"?>
<AssIcons>

<AssIcon>
<Icon><![CDATA[)*(]]></Icon>
<Explanation><![CDATA[an asshole (et røvhul)]]></Explanation>
</AssIcon>

<AssIcon>
<Icon><![CDATA[(_!_)]]></Icon>
<Explanation><![CDATA[a regular ass (en almindelig røv)]]></Explanation>
</AssIcon>

<AssIcon>
<Icon><![CDATA[(!)]]></Icon>
<Explanation><![CDATA[a tight ass (en gnier)]]></Explanation>
</AssIcon>

<AssIcon>
<Icon><![CDATA[(_?_)]]></Icon>
<Explanation><![CDATA[a dumb ass (en dumrian)]]></Explanation>
</AssIcon>

<AssIcon>
<Icon><![CDATA[(_o^^o_)]]></Icon>
<Explanation><![CDATA[a wise ass (en Karl Smart/vittig hund/en med kvikke eller sarkastisk bemærkninger)]]></Explanation>
</AssIcon>

<AssIcon>
<Icon><![CDATA[(_e=mC2_)]]></Icon>
<Explanation><![CDATA[a smart ass (en Karl Smart/smart-i-en-fart)]]></Explanation>
</AssIcon>

<AssIcon>
<Icon><![CDATA[(_1/2_)]]></Icon>
<Explanation><![CDATA[half-assed (halvgjort)]]></Explanation>
</AssIcon>

</AssIcons>

Listen får navnet Icons.xml, og ligger her i samme directory som HTML-filen med JavaScriptet der trækker listen.


JavaScriptet

Når man skal lave en simpel liste som denne, er det lettest og hurtigst at arbejde med et internt script med document.write(). Vil man gerne konstruere sit JavaScript på anden måde, af den ene eller den anden grund, er man selvfølgelig meget velkommen til dette.

JavaScriptet består af tre dele:
  1. Indlæsning af XML-filen
  2. Gennemløb af XML-filens Icon- og Explanationfelter
  3. Indsættelse af feltværdier i en tabel

I dette eksempel laver vi en tabel, hvor der først er en celle med ikonen og derefter en celle med forklaringen.


Det første vi skal have fat i er XML-filen. Til dette anvender vi JavaScriptet loadXMLDoc(). Hvordan det er lavet, kan læses her. Så langt ser JavaScriptet nu således ud:

<SCRIPT TYPE="text/javascript">
xmlDoc=loadXMLDoc("Icons.xml");

</SCRIPT>

Dernæst skal vi have fat i værdierne for de to tags Icon og Explanation. Dette gør vi med getElementsByTagName(""):

<SCRIPT TYPE="text/javascript">
xmlDoc=loadXMLDoc("Icons.xml");

var Icon_lmnt = xmlDoc.getElementsByTagName("Icon");
var Explanation_lmnt = xmlDoc.getElementsByTagName("Explanation");

</SCRIPT>

For at få data ind i en tabel, skal der nu laves en TABLE-tag. Vi laver den her med border-collapse:collapse, så cellerne sidder sammen. Dette gøre med document.write(), og så kommer det til at se således ud (husk slut-tag'en):

<SCRIPT TYPE="text/javascript">
xmlDoc=loadXMLDoc("Icons.xml");

var Icon_lmnt = xmlDoc.getElementsByTagName("Icon");
var Explanation_lmnt = xmlDoc.getElementsByTagName("Explanation");

document.write("<TABLE STYLE='border-collapse:collapse'>");

document.write("</TABLE>");

</SCRIPT>

Tabellens indhold laves ligeledes med document.write(), hvor man bygger det op med TR- og TD-tags. Listen traverseres i dens fulde længde, specificeret med Icon_lmnt.length, hvilket ser således ud:

<SCRIPT TYPE="text/javascript">
xmlDoc=loadXMLDoc("Icons.xml");

var Icon_lmnt = xmlDoc.getElementsByTagName("Icon");
var Explanation_lmnt = xmlDoc.getElementsByTagName("Explanation");

document.write("<TABLE STYLE='border-collapse:collapse'>");

for (i = 0; i < Icon_lmnt.length; i++)

document.write("</TABLE>");

</SCRIPT>


For hver postering startes en tabelrække, TR, og i hver sin celle, TD, indsættes feltværdierne for Icon og Explanation med variablernes firstChild.nodeValue. Her har cellerne fået specificeret padding og rammer, og den færdige kode kommer nu til at se således ud:

<SCRIPT TYPE="text/javascript">
xmlDoc=loadXMLDoc("Icons.xml");

var Icon_lmnt = xmlDoc.getElementsByTagName("Icon");
var Explanation_lmnt = xmlDoc.getElementsByTagName("Explanation");

document.write("<TABLE STYLE='border-collapse:collapse'>");

for (i = 0; i < Icon_lmnt.length; i++)
document.write("<TR><TD STYLE='border-style:solid; border-width:1px; border-color:#000000; padding:3px'>" + Icon_lmnt[i].firstChild.nodeValue + "</TD><TD STYLE='border-style:solid; border-width:1px; border-color:#000000; padding:3px'>" + Explanation_lmnt[i].firstChild.nodeValue + "</TD></TR>");

document.write("</TABLE>");

</SCRIPT>


På skærmen kommer resultatet til at se således ud: