Fragen zu XMLHttpRequest

Timste

Hallo zusammen,

ich bin noch recht neu in der Thematik JS/CSS/HTML und bräuchte Hilfe/Denkanstöße zu der Thematik XMLHttpRequest.

Die Gegebenheiten sind wie folgt:

Auf dem Server liegen mehrere XML-Files aus denen ich Daten abgreifen und darstellen möchte.

Ich habe es auch hinbekommen ein XML-File namens "Player.xml" mit folgender Struktur

XML

<?xml version="1.0" encoding="UTF-8"?>
<Records>
    <player>
        <Name>Hans Wurst</Name>
        <Country>Germany</Country>
        <Birthday>25. April 1975</Birthday>
    </player>
    <player>
        <Name>Karl Mustermann</Name>
        <Country>Germany</Country>
        <Birthday>02. Januar 1985</Birthday>
    </player>
    <player>
        <Name>Inge Irgendwer</Name>
        <Country>Germany</Country>
        <Birthday>11. November 1980</Birthday>
    </player>
</Records>

Alles anzeigen

wie folgt auszulesen

HTML

<!DOCTYPE html>
<html>
<head>
    <script>
        function loadData()
        {
            var xhttp = new XMLHttpRequest();
            xhttp.onreadystatechange = function ()
            {
                if (this.readyState == 4 && this.status == 200) 
                {
                    document.getElementById("player").innerHTML = this.responseText;
                }
            };
            xhttp.open("GET", "http://SERVER/xml/player.xml", true);
            xhttp.send();
        }
    </script>
</head>
<body onload="loadData()">
    <p id="player"></p>
</body>
</html>

Alles anzeigen

Damit wird mir ja dann der komplette Inhalt des XML Files angezeigt.

Nun hätte ich folgende beiden Fragen und würde mich freuen wenn ihr mir da helfen könntet:

1. wie stelle ich es an, dass ich z.B. nur die Namen oder die Länder der einzelnen Spieler auslesen kann?

2. wie muss ich es umsetzen, wenn ich aus z.B. 5 unterschiedlichen Dateien Daten abgreifen muss (der Einfachheit halber heißen die Dateien einfach player1.xml - player5.xml)?
Muss ich dann 5 Funktionen machen, oder gibt es auch eine einfachere Möglichkeit ?

Vielen Dank schon mal für eure Unterstützung

Sempervivum

Zur ersten Frage: Mit XMLHttpRequest ist das sehr einfach und wird hier beschrieben:

https://developer.mozilla.org/en-US/docs/Web…est/responseXML

Auf diese Weise bekommst Du ein document-Objekt, auf das Du die einschlägigen Funktionen wie document.getElementById, document.querySelector etc. anwenden kannst.

Selber bevorzuge ich die fetch-API und wie es damit geht, wird hier sehr schön beantwortet:

https://www.mediaevent.de/javascript/xml-mit-fetch.html

Zur zweiten Frage: Wenn es unterschiedliche XML-Dateien sind, wirst Du wohl für jede einen Request an den Server schicken müssen.

Sempervivum

PS: Du hast u. a. gefragt:

Zitat

Muss ich dann 5 Funktionen machen, oder gibt es auch eine einfachere Möglichkeit

Nein, auch wenn Du 5 Request senden willst, brauchst Du nur eine Funktion. Du kannst dieser die URL der XML-Datei als Parameter übergeben. Bleibt die Frage, was Du mit der Response machst: Ist es immer die selbe Aktion, ist es kein Problem. Wenn nicht, könnte man es über eine Callback-Funktion lösen, aber ich fürchte, dann würde es zu kompliziert.

Timste

Vielen Dank Sempervivum mal wieder für deine kompetente Hilfe!

Zitat von Sempervivum

Nein, auch wenn Du 5 Request senden willst, brauchst Du nur eine Funktion. Du kannst dieser die URL der XML-Datei als Parameter übergeben. Bleibt die Frage, was Du mit der Response machst: Ist es immer die selbe Aktion, ist es kein Problem. Wenn nicht, könnte man es über eine Callback-Funktion lösen, aber ich fürchte, dann würde es zu kompliziert.

Die Daten aus den verschiedenen Files (Response) sollen einfach nur in Tabellen ausgegeben werden, oder als Graphen dargestellt werden.

Zudem sollen die Daten viertelstündig aktualisiert werden

Ich habe es jetzt mit folgendem Code hinbekommen, auf die einzelnen Werte des XML Files zugreifen zu können

HTML

<!DOCTYPE html>
<html>
<head>
    <script>
        function loadData()
        {
            var xhttp = new XMLHttpRequest();
            xhttp.onreadystatechange = function ()
            {
                if (this.readyState == 4 && this.status == 200)
                {
                    player(this);
                }
            };
            xhttp.open("GET", "SERVER/xml/Player.xml", true);
            xhttp.send();
        }
        function player(xml) {
            var i;
            var xmlDoc = xml.responseXML;
            var table = "<tr><th>Name</th><th>Land</th><th>Geburtstag</th></tr>";
            var x = xmlDoc.getElementsByTagName("Spieler");
            for (i = 0; i < x.length; i++) {
                table += "<tr><td>" +
                    x[i].getElementsByTagName("Name")[0].childNodes[0].nodeValue +
                    "</td><td>" +
                    x[i].getElementsByTagName("Country")[0].childNodes[0].nodeValue +
                    "</td><td>" +
                    x[i].getElementsByTagName("Birthday")[0].childNodes[0].nodeValue +
                    "</td></tr>";
            }
            document.getElementById("spieler").innerHTML = table;
        }
    </script>
</head>
<body onload="loadData()">
    <table id="spieler"></table>
</body>
</html>

Alles anzeigen

Könntest du mir vielleicht anhand des obigen Codes kurz zeigen wie ein weiteres Request auf ein 2. XML File auszusehen hätte?

Sempervivum

Was die Requests betrifft, ist es einfach: Übergib die URL der XML-Datei der Funktion loadData:

Code

    function loadData(url)
        {
            var xhttp = new XMLHttpRequest();
            xhttp.onreadystatechange = function ()
            {
                if (this.readyState == 4 && this.status == 200)
                {
                    player(this);
                }
            };
            xhttp.open("GET", url, true);
            xhttp.send();
        }

    // und spaeter die Aufrufe:
    loadData("SERVER/xml/Player.xml");
    loadData("SERVER/xml/Player2.xml");
    // usw.

Alles anzeigen

Die interessantere Frage ist, was Du mit den Tabellen machen willst: Soll alles in einer Tabelle zusammen gefasst werden oder für jede XML-Datei eine eigene Tabelle angelegt?

BTW: Das load-Event brauchst Du in diesem Fall nicht, wenn Du die Aufrufe der Funktion loadData an das Ende des Body schreibst, vor dem schließenden </body>.

Timste

Zitat von Sempervivum

Die interessantere Frage ist, was Du mit den Tabellen machen willst: Soll alles in einer Tabelle zusammen gefasst werden oder für jede XML-Datei eine eigene Tabelle angelegt?

Beides ist der Fall.

Es sollen also Werte aus verschiedenen XML Files in einer Tabelle zusammengefasst werden sollen, als auch Werte aus einem XML in einer eigenen Tabelle angezeigt werden.

Sempervivum

Dann brauchen wir also eine unterschiedliche Verarbeitung. Verstehe ich das richtig: Es gibt eine Anzahl von XMLs, spieler1.xml, spieler2.xm, spieler3.xml usw. und diese sollen in einer Tabelle zusammen gefasst werden. Und dann gibt es unabhängig davon eine weitere XML, die in einer getrennten Tabelle angezeigt werden soll?

Timste

Zitat von Sempervivum

Dann brauchen wir also eine unterschiedliche Verarbeitung. Verstehe ich das richtig: Es gibt eine Anzahl von XMLs, spieler1.xml, spieler2.xm, spieler3.xml usw. und diese sollen in einer Tabelle zusammen gefasst werden. Und dann gibt es unabhängig davon eine weitere XML, die in einer getrennten Tabelle angezeigt werden soll?

Genau so

Sempervivum

Das kannst Du dann auch problemlos mit einer einzigen Funktion erledigen: Übergib zusätzlich die ID der Tabelle:

Code

    function loadData(url, tableid)
        {
            var xhttp = new XMLHttpRequest();
            xhttp.onreadystatechange = function ()
            {
                if (this.readyState == 4 && this.status == 200)
                {
                    player(this, tableid);
                }
            };
            xhttp.open("GET", url, true);
            xhttp.send();
        }
        function player(xml, tableid) {
            var i;
            var xmlDoc = xml.responseXML;
            var x = xmlDoc.getElementsByTagName("Spieler");
            var table = '';
            for (i = 0; i < x.length; i++) {
                table += "<tr><td>" +
                    x[i].getElementsByTagName("Name")[0].childNodes[0].nodeValue +
                    "</td><td>" +
                    x[i].getElementsByTagName("Country")[0].childNodes[0].nodeValue +
                    "</td><td>" +
                    x[i].getElementsByTagName("Birthday")[0].childNodes[0].nodeValue +
                    "</td></tr>";
            }
            document.getElementById(tableid).innerHTML = table;
        }

Alles anzeigen

Dann legst Du für jede Tabelle den Rahmen mit leerem Body an:

Code

<table>
    <thead>
         <tr><th>Name</th><th>Land</th><th>Geburtstag</th></tr>
    </thead>
    <tbody id="tbody1">
    </tbody>
</table>
<table>
    <thead>
         <tr><th>Name</th><th>Land</th><th>Geburtstag</th></tr>
    </thead>
    <tbody id="tbody2">
    </tbody>
</table>
<!-- usw. -->

Alles anzeigen

Und übergibst jeweils die ID an die Funktion loadData:

Code

    loadData("SERVER/xml/Player.xml", "tbody1");
    loadData("SERVER/xml/Player2.xml", "tbody2");
// usw.

Timste

Wow, vielen Dank!

Ich werde mal versuchen mich da durchzufuchsen.

Sempervivum

Ich sehe gerade, dass ich das Zusammenfassen in einer Tabelle gar nicht berücksichtigt habe. Dazu musst Du das HTML zu dem vorhandenen hinzu fügen, also eine globale Tabelle:

Code

<table>
    <thead>
         <tr><th>Name</th><th>Land</th><th>Geburtstag</th></tr>
    </thead>
    <tbody id="tbody-global">
    </tbody>
</table>
<table>
    <thead>
         <tr><th>Name</th><th>Land</th><th>Geburtstag</th></tr>
    </thead>
    <tbody id="tbody1">
    </tbody>
</table>

Alles anzeigen

Und dann das HTML hinzu fügen:

Code

        function player(xml, tableid) {
            var i;
            var xmlDoc = xml.responseXML;
            var x = xmlDoc.getElementsByTagName("Spieler");
            var table = '';
            for (i = 0; i < x.length; i++) {
                table += "<tr><td>" +
                    x[i].getElementsByTagName("Name")[0].childNodes[0].nodeValue +
                    "</td><td>" +
                    x[i].getElementsByTagName("Country")[0].childNodes[0].nodeValue +
                    "</td><td>" +
                    x[i].getElementsByTagName("Birthday")[0].childNodes[0].nodeValue +
                    "</td></tr>";
            }
                // document.getElementById(tableid).innerHTML = table;
                document.getElementById(tableid).insertAdjacentHTML('beforeend', table);       }

Alles anzeigen

Timste

Das muss ich jetzt erst Mal alles verdauen und versuchen Schritt für Schritt umzusetzen

Jetzt mitmachen!