[AJAX] nodes weergeven

[kleautviool]

Ok, ik probeer dus via Javascript om bepaalde gegevens uit mijn XML document weer te geven, alleen krijg ik niks te zien als ik de functie uitvoer.
Ik heb nu een lokaal XML bestand dat ik in (bijv. een textarea) weer wil geven.
Het XML document is op de volgende manier opgebouwd en heet afspraken.php (met een application/xml header):

XML:

<artists>
  <artist id="a1">
    <name>Big Daddy Kane</name>
    <album>Long Live The Kane</album>
    <url>http://www.mp3.com/big-daddy-kane/artists/9/summary.html</url>
  </artist>
  <artist id="a2">
    <name>Jungle Brothers</name>
    <album>Straight Out The Jungle</album>
    <url>http://www.mp3.com/jungle-brothers/artists/42/summary.html</url>
  </artist>
</artists>

Nu wil ik dus via Javascript in een textarea de waardes van <name>, <album> en <url> weergeven. Hiervoor had ik de volgende manier in gedachte:

JavaScript:

    function loadArtistData(id){
        var url = "artiesten.php", http_request = false;
        if(window.XMLHttpRequest){
            http_request = new XMLHttpRequest();
            if(http_request.overrideMimeType){
                http_request.overrideMimeType('text/xml');
            }
        }else if(window.ActiveXObject){
            try{
                http_request = new ActiveXObject("Msxml2.XMLHTTP");
            }catch(e){
                try{
                    http_request = new ActiveXObject("Microsoft.XMLHTTP");
                }catch(e) {}
            }
        }
        if(!http_request){
            alert('Geen verbinding mogelijk!');
            return false;
        }
        http_request.onreadystatechange = function(){
            if(http_request.readyState == 4){
                if(http_request.status == 200){
                    var XMLData = http_request.responseXML;
                    var rootNode = XMLData.getElementById("a"+id);
                    for(var i=0; i<rootNode.childNodes.length;i++){
                        alert(rootNode.childNodes[i].nodeName);
                    }
                }
            }
        };
        http_request.open('GET', url, true);
        http_request.send(null);
    }

En deze functie roep ik zo aan:

HTML:

<a href="javascript:void(null)" title="Jungle Brothers" onclick="loadArtistData('a2')">Jungle Brothers</a>

Alleen als ik nu op de link klikt gebeurt er niks, terwijl ik nu (volgens mij) de nodeNames van de Jungle Brothers te zien zou moeten krijgen.

Zie ik nu iets over het hoofd of die ik iets onweis dom?

[ Voor 34% gewijzigd door kleautviool op 21-03-2006 22:08 ]

[crisp]

Een id-attribuut heeft in XML geen speciale betekenis zoals in (X)HTML; je kan in XML dus niet zomaar getElementById gebruiken.

Eerste link die ik zo snel even tegenkwam: http://blog.bitflux.ch/wiki/GetElementById_Pitfalls

[ Voor 29% gewijzigd door crisp op 20-03-2006 22:44 ]

[XWB]

^^ wat crisp zegt

Probeer eens wat als (en haal id bij artist weg):

XML:

<artists>
  <artist>
    <name>Big Daddy Kane</name>
    <album>Long Live The Kane</album>
    <url>http://www.mp3.com/big-daddy-kane/artists/9/summary.html</url>
  </artist>
  <artist>
    <name>Jungle Brothers</name>
    <album>Straight Out The Jungle</album>
    <url>http://www.mp3.com/jungle-brothers/artists/42/summary.html</url>
  </artist>
</artists>

JavaScript:

var XMLData = http_request.responseXML.getElementsByTagName('artist');

for (var i = 0; i < XMLData.length; i++)
{
 //hier wat je wil opbouwen/weergeven
}

[ Voor 76% gewijzigd door XWB op 20-03-2006 22:58 ]

[Michali]

Om dit te selecteren kun je XPath gebruiken. Je krijgt dan een query als artist[@id='a1']. Je moet maar even op google zoeken hoe je dat doet in verschillende browsers.

[kleautviool]

Nou heb gezocht op google en vanalles geprobeerd maar kom er niet uit.
Als ik nu dit doe:

JavaScript:

[..]
        http_request.onreadystatechange = function(){
            if(http_request.readyState == 4){
                if(http_request.status == 200){
                    var XMLData = http_request.responseXML;
                    var rootNode = XMLData.getElementsByTagName("artist");
                    for(var i=0; i<rootNode.length;i++){
                        alert(rootNode[i].nodeName);
                    }
                }
            }
        };
[..]

Dan krijg ik dus 18 keer artist ge-alert (Dat klopt ook want mijn XML bestand bestaat uit 18 artiesten)
En nu wil ik dus dat als het ID van de artiest gelijk is aan het ID van de parameter waarmee ik de functie aanroep dat ik de titel van de desbetreffende artiest te zien krijg.
Om dit te berijken had ik de volgende manier bedacht:

JavaScript:

[..]
        http_request.onreadystatechange = function(){
            if(http_request.readyState == 4){
                if(http_request.status == 200){
                    var XMLData = http_request.responseXML;
                    var rootNode = XMLData.getElementsByTagName("artist");
                    for(var i=0; i<rootNode.length;i++){
                        if(rootNode[i].firstChild.nodeValue == id){
                            for(var j=0;j<rootNode[i].childNodes.length;j++){
                                alert(rootNode[i].childNodes[2].firstChild.nodeName);
                            }
                        }
                    }
                }
            }
        };
[..]

Maarja, hierbij gebeurt er dus niks.
Ik snap dus niet waarom het niet werkt, want volgens mijn logica doe ik het volgende:

JavaScript:

[..]
        http_request.onreadystatechange = function(){
            if(http_request.readyState == 4){
                if(http_request.status == 200){
                    var XMLData = http_request.responseXML;
                    var rootNode = XMLData.getElementsByTagName("artist");
                    for(loop door alle <artist> nodes heen){
                        if(Als het de waarde van de eerste childnode van een <artist> gelijk is aan de parameter ID ga verder){
                            for(Loop door alle childnodes van de desbetreffende <artist> heen){
                                alert(Geef de naam van de artiest weer);
                            }
                        }
                    }
                }
            }
        };
[..]

Volgens mijn logica zou dit dus moeten werken, maar dat doet het niet.
Wie kan mij vertellen waar het nu precies fout gaat?

Oh en voor XPath had ik gekeken, maar kom alleen op een W3CSchools IE-only pagina uit.

edit:
Oh, en mijn XML bestand ziet er nu zo uit:

XML:

<artists>
  <artist>
    <id>5</id>
    <status>1</status>
    <name>Big Daddy Kane</name>
    <plays>10</plays>
    <week>12</week>
    <url>http://www.mp3.com/big-daddy-kane/artists/9/summary.html</url>
  </artist>
  <artist>
    <id>14</id>
    <status>0</status>
    <name>Canibus</name>
    <plays>15</plays>
    <week>11</week>
    <url>http://www.mp3.com/canibus/artists/262622/summary.html</url>
  </artist>
</artists>

[ Voor 10% gewijzigd door kleautviool op 21-03-2006 22:07 ]

[XWB]

if(rootNode[i].firstChild.nodeValue == id)

Id is dus de parameter id? Heb je al even gekeken of die echt wel een waarde bevat?
En die artiesten, zitten die in een database? Als je toch een bepaalde artiest wil ophalen, waarom bouw je dan geen query op welke de specifieke artiest ophaalt? (WHERE iArtistId = id)

[kleautviool]

De functie roep ik zo aan:

HTML:

<a href="javascript:void(null)" title="Big Daddy Kane" onclick="loadArtistData(5)">Big Daddy Kane</a>

En de artiesten staan in een DB ja, maar ik wil de gegevens van een artiest bij een klik in enkele formuliervelden weergeven en dus scheelt dat een pageload.

[crisp]

id is een attribuut, geen nodeValue

vragen:

- waarom geef je het gewenste id niet gewoon als query-parameter mee aan je serverside script en zorg je ervoor dat die een XML bestand teruggeeft met alleen de relevante informatie?
- is er een speciale reden dat je XML genereert? Je zou ook een ander formaat terug kunnen sturen dat je makkelijker met JS kan verwerken - bijvoorbeeld JSON

[kleautviool]

De waarde van id is toch een nodeValue?
Hoe zou ik dit anders aan moeten roepen?

En antwoorden op je vragen:

- waarom geef je het gewenste id niet gewoon als query-parameter mee aan je serverside script en zorg je ervoor dat die een XML bestand teruggeeft met alleen de relevante informatie?

Ehm.. goed punt!, niet over nagedacht om eerlijk te zijn. Ik dacht dat dit de makkelijkste manier zou zijn om het op te lossen.

- is er een speciale reden dat je XML genereert? Je zou ook een ander formaat terug kunnen sturen dat je makkelijker met JS kan verwerken - bijvoorbeeld JSON

De reden dat ik XML gebruik is dat ik me daar wat meer in wil verdiepen en ik aangezien ik alleen data uit mijn database haal en deze later wil gebruiken leek XML mij de beste oplossing.
En wat JSON is weet ik niet, dat ga ik morgen even opzoeken.

Maar klopt het nu dat mijn functie niet werkt? Want ik heb het zojuist nog eens doorgelopen en ik kan het probleem écht niet vinden

[crisp]

kleautviool schreef op woensdag 22 maart 2006 @ 00:02:
De waarde van id is toch een nodeValue?

nee, een attribute is geen node

Hoe zou ik dit anders aan moeten roepen?

getAttribute() ?

Ehm.. goed punt!, niet over nagedacht om eerlijk te zijn. Ik dacht dat dit de makkelijkste manier zou zijn om het op te lossen.

Je hebt nu een extra tussenstap (XML); voor generieke interfaces waarbij de data door meerdere services gebruikt kan/gaat worden is dat prima, maar voor een specifieke toepassing is een specifiek formaat vaak efficienter en makkelijker om mee te werken.

De reden dat ik XML gebruik is dat ik me daar wat meer in wil verdiepen en ik aangezien ik alleen data uit mijn database haal en deze later wil gebruiken leek XML mij de beste oplossing.

Niets mis mee om daar ervaring mee op te doen hoor

En wat JSON is weet ik niet, dat ga ik morgen even opzoeken.

JSON is JavaScript Object Notation. Het komt er op neer dat je serverside een string genereerd die je in javascript eenvoudig (meestal mbv eval()) kan omzetten naar een javascript object - bijvoorbeeld een array.

Maar klopt het nu dat mijn functie niet werkt? Want ik heb het zojuist nog eens doorgelopen en ik kan het probleem écht niet vinden

zoiets zou toch moeten werken:

JavaScript:

var rootNode = XMLData.getElementsByTagName('artist'), i = 0;
while ((artist = rootNode[i++]))
{
  if (artist.getAttribute('id') == id)
  {
    // doe iets met artist
    break;
  }
}

[kleautviool]

Bedankt voor de tips, ga ik morgen wat mee doen!

Over je oplossing.

Als ik getAttribute() doe krijg ik 18x null als resultaat terug, dus die doet het ook niet helemaal.
Dus bij deze code:

JavaScript:

    function loadArtistData(id){
        var url = "artiesten.php", http_request = false;
        if(window.XMLHttpRequest){
            http_request = new XMLHttpRequest();
            if(http_request.overrideMimeType){
                http_request.overrideMimeType('text/xml');
            }
        }else if(window.ActiveXObject){
            try{
                http_request = new ActiveXObject("Msxml2.XMLHTTP");
            }catch(e){
                try{
                    http_request = new ActiveXObject("Microsoft.XMLHTTP");
                }catch(e) {}
            }
        }
        if(!http_request){
            alert('Geen verbinding mogelijk!');
            return false;
        }
        http_request.onreadystatechange = function(){
            if(http_request.readyState == 4){
                if(http_request.status == 200){
                    var XMLData = http_request.responseXML;
                    var rootNode = XMLData.getElementsByTagName('artist'), i = 0;
                    while((artist = rootNode[i++])){
                        alert(artist.getAttribute('name'));
                    }
                }
            }
        };
        http_request.open('GET', url, true);
        http_request.send(null);
    }

[crisp]

ja, maar name is ook geen attribuut maar een element binnen je artist-node...

[kleautviool]

Dan ben ik het spoor even helemaal bijster
Waarom is ID dan wel een attribuut en name niet?

[crisp]

kleautviool schreef op woensdag 22 maart 2006 @ 00:30:
Dan ben ik het spoor even helemaal bijster
Waarom is ID dan wel een attribuut en name niet?

XML:

<foo bar="moe">text</foo>

foo is een element, bar is een attribute, text is de waarde van de textNode binnen het foo-element (en is dus een child van foo).

Hier een werkend voorbeeld:

JavaScript:

if (!window.XMLHttpRequest)
{
    window.XMLHttpRequest = function()
    {
        var types = [
            'Microsoft.XMLHTTP',
            'MSXML2.XMLHTTP.5.0',
            'MSXML2.XMLHTTP.4.0',
            'MSXML2.XMLHTTP.3.0',
            'MSXML2.XMLHTTP'
        ];

        for (var i = 0; i < types.length; i++)
        {
            try
            {
                return new ActiveXObject(types[i]);
            }
            catch(e) {}
        }
    
        return undefined;
    }
}

function loadArtistData(id)
{
    var url = 'artists.xml';
    var http_request = new XMLHttpRequest();
    if (http_request)
    {
        http_request.onreadystatechange = function()
        {
            if (http_request.readyState == 4 && http_request.status == 200)
            {
                var XMLData = http_request.responseXML;
                var rootNode = XMLData.getElementsByTagName('artist'), i = 0;
                while((artist = rootNode[i++]))
                {
                    if (artist.getAttribute('id') == id)
                    {
                        alert(artist.childNodes[1].firstChild.nodeValue);
                    }
                }
            }
        }

        http_request.open('GET', url, true);
        http_request.send(null);
    }
    else
    {
        alert('Geen verbinding mogelijk!');
        return false;
    }

    return true;
}

loadArtistData('a1');

Note dat je ook rekening moet houden met het feit dat standard-compliant browsers nodes met enkel whitespace ook opnemen als textNode binnen de DOM-tree; hence de childNodes[1] ipv [0]. Hiervoor moet je dus corrigeren voor non-standard-compliant browsers zoals IE ( zie http://developer.mozilla.org/en/docs/Whitespace_in_the_DOM )

Uiteraard kan je ook dit doen:

JavaScript:

alert(artist.getElementsByTagName('name')[0].firstChild.nodeValue);

maar da's weer een extra lookup

[ Voor 7% gewijzigd door crisp op 22-03-2006 00:50 ]

[Michali]

Nog even een voorbeeldje hoe je zoiets ook met XPath kunt doen.

eenElement is dan een element in je XML doc, het documentElement bijvoorbeeld, of het document zelf.

JavaScript:

var id = 2;
var query = "artist[@id='" + id + "']";

// IE manier
var artistNode = eenElement.selectSingleNode(query);

// DOM compliant manier (Mozilla ea.)
var evaluator = new XPathEvaluator();
var result = evaluator.evaluate(query, eenElement, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null);
var artistNode = result.singleNodeValue;

[ Voor 15% gewijzigd door Michali op 22-03-2006 09:05 ]