XML olvasás JavaScript-tel

A dinamikus tartalmú oldalak egyre népszerűbbek, ám ezek mindegyike a szerveren rengeteg erőforrást használnak fel. Az oldalon található PHP leírások mindegyike segít abban, hogy egyszerűen készítsünk változó tartalmakat, ám lehetnek olyan esetek, hogy a szerveren nem érhető el a PHP.

A fentebb vázolt esetben jöhet jól egy lehetséges alternatíva: kliens-oldali adatfeldolgozás. A képlet nagyon egyszerű: ne terheljük azzal a szerver-gépet, hogy minden egyes kliensnek szóról-szóra megmondja, hogy mit is jelenítsen meg, hanem csak adja át az adatokat, a kliens meg kezdjen vele, amit akar…
(A legjobb példa, ami eszembe jut a különböző multi-player-es FPS-ek: a kiszolgáló csak az adatokat küldi ki [ XY játékos előrébb ment 1-el ] és a kliens feldolgozza azt. Ha bármelyik játékos megnyomja az előre gombot, akkor arról a szerver kap egy értesítést, amit szétküld az összes többi felhasználónak…)

Az adatokat egy bizonyos rendszerbe bele kell foglalnunk, különben azok nehezen értelmezhetőek lennének (különösen egy számítógép számára). Erre a rendszerezésre az Extended Markup Language (XML), egy egyre szélesebb körben használt eszköz a legmegfelelőbb. Az XML Dom (Document Object Model – Dokumentum objektum modell) részletezésére most nem térek ki, mert az igen hosszú lenne (több könyvet lehetne belőle írni), legyen elég annyi, hogy közel mindent egyszerűen tárolhatunk benne.

A modernebb böngészőkben (IE 5.5+, Mozilla) a beépített JavaScript értelmező már támogatja az XML fileok olvasását az ún. XMLDocument objektummal (IE alatt ez egy Active-X vezérlő). Természetesen a böngészők írói itt jól megkeverik a dolgokat: szabvány, mint olyan nincs…
Éppen ezért az objektum betöltésére egy kis JS kódot kell írnunk, ami a böngészőnek megfelelő objektumot tölt be:

<script type="text/javascript">
function loadXML(url)
    {
    var mozilla = (typeof document.implementation != 'undefined') && (typeof document.implementation.createDocument != 'undefined'); 
    var ie = (typeof window.ActiveXObject != 'undefined'); 
    if(mozilla)
        {
        this.xmlDoc = document.implementation.createDocument("", "", null);
        this.xmlDoc.strictErrorChecking = false;
        this.xmlDoc.async = false;
        this.fail = false;
        }
    else if(ie)
        {
        this.xmlDoc = new ActiveXObject("Microsoft.XMLDOM"); 
        this.xmlDoc.async = false; 
        while(this.xmlDoc.readyState != 4) {};
        this.fail = false;
        }
    else
        {
        this.xmlDoc = '';
        this.fail = true;
        }
    if(this.fail != true)
        {
        try
            {
            this.xmlDoc.load(url)
            }
        catch(e)
            {
            this.fail = true;
            }
        }
    }
</script>

Ez az egyszerű funkció egy objektumot hoz létre, aminek két tulajdonsága van: az xmlDoc tulajdonság tartalmazza a létrehozott xmlDocument vezérlőt, a fail tulajdonság pedig egy igaz vagy hamis értéket attól függően, hogy sikeres volt-e a betöltés. Az objektum előkészítése után a paraméterben megadott url-ből megpróbáljuk betölteni a filet. Amennyiben hiba történt [nem létezik a file, az objektumunkkal valami baj volt, az XML fileunk-ban valami hiba van, stb.] a try… catch szerkezetettel „elkapjuk” a hibát, így a böngésző nem fog JavaScript hibát jelezni.

Ez így mind szép és jó, de mire lehet ezt használni? Még egy JS osztály megírásával (egy nagyon alap-szintű sablon-rendszer) pillanatok alatt létre lehet hozni egy XML alapú kliens-oldali hírrendszert. Ehhez először lássuk a sablon-rendszert [a sablon-rendszer felhasználja a fenti osztályunkat, tehát szükséges hozzá ennek megléte!]

<script type="text/javascript">
function xml_template(template_file)
    {
    xmlLoader = new loadXML(template_file + '.xml');
    if(xmlLoader.fail == true)
        {
        this.original = 'Sikertelen sablon-betöltés';
        }
    else
        {
        this.original = xmlLoader.xmlDoc.getElementsByTagName('templatedata')[0].firstChild.nodeValue;
        }
    this.current = this.original;
    this.addValue = addValue;
    this.show = show;
    this.reset = reset;
    }
 
function addValue(key, value)
    {
    this.current = this.current.replace('{'+key.toUpperCase()+'}', value);
    }
 
function show()
    {
    return this.current;
    }
 
function reset()
    {
    this.current = this.original;
    return true;
    }
</script>

Mint látható ennek az osztálynak már 3 metódusa is van a két tulajdonság mellett. A két tulajdonság (original, current) a sablon két változata: az eredeti, amit a szerverről töltöttünk le, és egy, amin a változtatásokat folyamatosan eszközöljük. Amennyiben a letöltés sikertelen volt a „sablonunk” csak egy hibaüzenetet fog tartalmazni.
A metódusok sorrendben: új kulcs hozzáadása (kulcs, érték). A {kulcs_nagybetűvel} szövegek helyére beilleszti a második paraméterben megadott szöveget. (Példát később láthatunk erre)
A show() metódus visszaadja a sablon jelenlegi változatát, amiben az összes az utolsó reset() óta történt változtatás megtalálható. A reset() – mint nevéből kiderül – az eredeti sablon visszaállítására szolgál.

A következőkben két XML filera is szükségünk lesz még: a hírrendszer sablon-fájljára, és az adatokat tartalmazó fájlra.
(Mindkettőbe – természetesen – vihetőek fel új tagok.)

template_news.xml

<?xml version="1.0" encoding"ISO-8859-2"?>
<template>
    <name>Hírrendszer-sablon</name>
    <templatedata>
        &lt;div&gt;{TITLE} - {DATE} ({AUTHOR})
        &lt;br /&gt;
        {TEXT}
        &lt;/div&gt;
    </templatedata>
</template>

Mint látható itt csak egy nagyon egyszerű sablon hoztam létre, semmi felesleges díszítés, de természetesen azt is bele lehetett volna vinni. Fontos azonban azt megjegyezni, hogy – mivel XML fájlról van szó – a < és > karaktereket nem használhatjuk helyettük az &lt; és &gt; karakterláncokat kell felhasználnunk! [A letölthető csomagban jobban látszik…]

A másik fileunk egy szabványos RSS file lesz: ilyet rengeteg helyen találhatunk a neten, úgyhogy a szerkezetére most nem térek ki. A lényeg a lényeg kell egy index.html [vagy akármilyen nevű html file], ami összefogja a fenti dolgokat:

<html>
    <head>
        <title>RSS olvasás JavaScripttel</title>
    </head>
    <script type="text/javascript" src="loadxml.js"></script>
    <script type="text/javascript" src="template.js"></script>
    <script type="text/javascript">
    function loadNews(rssfile)
        {
        var xml = new loadXML(rssfile);
        if(xml.fail == true)
            {
            document.getElementById('content').innerHTML = 'Belsõ hiba!';
            }
        else
            {
            var news = '';
            var template = new xml_template('template_news');
            x = xml.xmlDoc.getElementsByTagName('item');
            if(x.length != 0)
                {
                for(var i = 0; i < x.length; i++)
                    {
                    template.addValue('title', x[i].getElementsByTagName('title')[0].firstChild.nodeValue);
                    template.addValue('text', x[i].getElementsByTagName('description')[0].firstChild.nodeValue);
                    template.addValue('date', x[i].getElementsByTagName('pubDate')[0].firstChild.nodeValue);
                    template.addValue('author', x[i].getElementsByTagName('author')[0].firstChild.nodeValue);
                    news = news + template.show();
                    template.reset();
                    }
                }
            document.getElementById('content').innerHTML = news;
            }
        return true;
        }
    </script>
    <body onload="loadNews('news.xml')">
        <div id="content">
 
        </div>
    </body>
</html>

Ezzel el is készült a gyors kis hírrendszerünk, ami gyakorlatilag statikus lapok kiszolgálásából áll, nem terheli – annyira – a szervert, és gyorsabban és egyszerűbben formázható, mint a „sima” html oldalak… Mint mindig, ez csak egy fajta felhasználása a végtelen számú lehetőségnek, amit ez a technika nyújthat… „Én csak az ajtót mutatom meg!”

A fenti kis program akár kliens-oldali RSS olvasásra is alkalmas lenne, ha csak az Internet Explorer létezne, de sajnos nem így van: a Mozilla nem hajlandó másik domain-ből megnyitni xml fileokat…

Az összes file letölthető innen.