DOMParser og AJAX

Hva

Vi bruker parseren i nettleseren til å parse egne filer som hentes via AJAX og opprette DOM-objekter som kan leses og manipuleres på samme måte som vi kan lese og manipulere elementer på en webside. Nedenfor finner du en demonstrasjon av HTML og SVG. XML-filer kan vi lese via AJAX og få dem ferdig parset som dom-objekter tilbake.

HTML

Vi henter en enkel web-side, htmlpage.html

Vi henter og behandler teksten og lager et document slik:

function doHTML(){
$.ajax({
    url:"htmlpage.html",
    success:function(data,status,xhr)
    {
        useHTML(xhr.responseText);
    },
    error:function(data)
    {
        document.getElementById("dumptext").innerHTML=
          data.statusText;
    }
    });
}
function useHTML(T){
    var parser = new DOMParser();
    var doc = parser.parseFromString(T, "text/html");
    var S=doc.getElementById("hentes").innerHTML;
    document.getElementById("dumptext").innerHTML=S;
}

SVG

Vi henter en SVG-fil flagget.svg, og presenterer den i sin helhet som et element på siden.

Vi behandler fila og lager et document slik:

function doSVG(){
$.ajax({
    url:"flagget.svg",
    success:function(data,status,xhr)
    {
        useSVG(xhr.responseText);
    },
    error:function(data)
    {
        document.getElementById("dumpflag").innerHTML
          =data.statusText;
    }
    });
}
function useSVG(T){
    var parser = new DOMParser();
    var svgdoc = parser.parseFromString(T, "image/svg+xml");
    var elt=document.getElementById("dumpflag");
    // clear it (for second call)
    elt.innerHTML="";
    
    // forutsetter at svg har correct header: version and namespace
    var svgNode=svgdoc.documentElement;
    elt.appendChild(document.importNode(svgNode, true));
}

SVG2

Nå viser det seg at jQuery (best guess) parser svg-fila som XML, og vi kan forenkle koden slik:

function doSVG2(){
$.ajax({
    url:"flagget.svg",
    success:function(data,status,xhr)
    {
        useSVG2(xhr.responseXML);
    },
    error:function(data)
    {
        document.getElementById("dumpflag2").innerHTML
          =data.statusText;
    }
    });
}
function useSVG2(svgdoc){
    var elt=document.getElementById("dumpflag2");
    // clear it (for second call)
    elt.innerHTML="";
    
    // forutsetter at svg har correct header: version and namespace
    var svgNode=svgdoc.documentElement;
    elt.appendChild(document.importNode(svgNode, true));
}

Feilhandtering

XML-filer kan betraktes spå samme måte som SVG-eksempelet over, men vi må i begge tilfellene ta høyde for at XML-strukturen ikke er riktig. Vi bruker en ren XML-fil til å se nærmere på dette. Vi kan angripe dette på to måter: Vi kan hente fila som XML og sjekke hva vi får tilbake, eller vi kan lese fila som text og ta oss av parsingen med DomParser selv. Det to eksemplene under demonstrerer dette. Vi bruker i begge tilfellene denne enkle fila:

<?xml version="1.0" encoding="UTF-8"?>
<medlemmer>
<medlem>
    <navn>Ole</navn>
    <by>Moss</by>
</medlem>
<medlem>
    <navn>Jens</navn>
    <by>Moss</by>
</medlem>
<medlem>
    <navn>Kari</navn>
    <by>Sarpsborg</by>
</medlem>
<medlem>
    <navn>Per</navn>
    <by>Sarpsborg</by>
</medlem>
<medlem>
    <navn>Frits</navn>
    <by>Halden</by>
</medlem>
</medlemmer>

og en versjon der vi har introdusert en feil i et element(medlam i stedet for medlem)

<?xml version="1.0" encoding="UTF-8"?>
<medlemmer>
<medlem>
    <navn>Ole</navn>
    <by>Moss</by>
</medlam>
<medlem>
    <navn>Jens</navn>
    <by>Moss</by>
</medlem>
<medlem>
    <navn>Kari</navn>
    <by>Sarpsborg</by>
</medlem>
<medlem>
    <navn>Per</navn>
    <by>Sarpsborg</by>
</medlem>
<medlem>
    <navn>Frits</navn>
    <by>Halden</by>
</medlem>
</medlemmer>

Lese som XML

Koden blir i dette tilfellet slik:

function doXML(adresse){
$.ajax({
    url:adresse,
    dataType:"xml",
    success:function(data,status,xhr)
    {
        useXML(xhr.responseXML);
    },
    error:function(xhr,statusText,errorThrown)
    {
        //console.log("fail: ",statusText);
        //console.log("fail: ",errorThrown);
        var T=statusText+'<br/>'+errorThrown;
        document.getElementById("dumpxml").innerHTML
          =T.substring(0,100);
    }
    });
}
function useXML(xmldoc){
    var elt=document.getElementById("dumpxml");
    // clear it (for second call)
    elt.innerHTML="";
    var resT="";
    var path='//medlem/navn';
    var nodes=xmldoc.evaluate(path, xmldoc, null, 
                                XPathResult.ANY_TYPE, null);
    var result=nodes.iterateNext();
    var resT="";
    while(result){
        resT+=result.childNodes[0].nodeValue + "</br>";
        result=nodes.iterateNext();
    }            
    elt.innerHTML=resT;
}

Lese som text

Koden blir i dette tilfellet slik. Vi bruker den samme strategien som når vi hentet XML-strukturen som text i modulen DOMParser .

function doXML2(adresse){
$.ajax({
    url:adresse,
    dataType:"text",
    success:function(data,status,xhr)
    {
        useXML2(xhr.responseText);
    },
    error:function(xhr,statusText,errorThrown)
    {
        var T=statusText+'<br/>'+errorThrown;
        document.getElementById("dumpxml2").innerHTML
          =T.substring(0,100);
    }
    });
}
function useXML2(Xmedlemmer){
   var dumpelt=document.getElementById("dumpxml2");
    dumpelt.innerHTML="";
    try{
        var parser = new DOMParser();
        var xmldoc = parser.parseFromString(Xmedlemmer, 
                                        "application/xml");
        var docelt=xmldoc.documentElement;
        // something wrong ?
        if(docelt.nodeName=="parsererror"){
            var T=docelt.firstChild.textContent;
            throw(T);
        }
        // it is ok
        var resT="";
        var path='//medlem/navn';
        var nodes=xmldoc.evaluate(path, xmldoc, null, 
                                XPathResult.ANY_TYPE, null);
        var result=nodes.iterateNext();
        var resT="";
        while(result){
            resT+=result.childNodes[0].nodeValue + "</br>";
            result=nodes.iterateNext();
        }            
        dumpelt.innerHTML=resT;
    }
    catch(T){
        T=T.replace(new RegExp('<', 'g'), '&lt;')
            .replace(new RegExp('>', 'g'), '&gt;');
        //console.log(docelt,T);
        dumpelt.innerHTML=T;
    }
}

Referanser

SVG MDN developer.mozilla.org/en-US/docs/Web/SVG 14-12-2015