Hallo,
Per JavaScript lade ich mit Hilfe des XMLHttpRequest Objekts Daten asynchron im Hintergrund nach (AJAX). Der Server bearbeitet die Anfrage und liefert mir die Antwort in Form von HTML zurück (beispielsweise eine Tabelle). Nun möchte ich mit Hilfe von JavaScript den Inhalt eines speziellen Nodes (..) mit der Antwort des Servers befüllen.
Muss ich jetzt wirklich die Tabelle mit createElement() und appendChild() über das DOM manuell aufbauen??
Ich verstehe nicht recht, was dein Problem ist.
Der Server liefert HTML (text/html) zurück. Dieses kannst du nur über responseText auslesen. Das kennst du ja.
Der Sinn von XMLHttpRequest ist die Übertragung von XML-Dokumenten. Wenn dein Server ein XML-Dokument zurückgibt (z.B. mit dem MIME-Typ application/xml), wird es geparst und du kannst über die Eigenschaft responseXML des XMLHttpRequest-Objekts darauf gemäß dem DOM zugreifen (responseXML ist ein Document-Objekt). (DOM HTML ist dann übrigens nicht verwendbar.)
Das XML-Dokument muss kein vollständiges (X)HTML-Dokument sein, sondern muss nur irgendwelche Elemente aus dem XHTML-Namespace enthalten. Sinnvollerweise nimmt man ein div-Element als Wurzelelement. Etwa so:
<?xml version="1.0" encoding="utf-8" ?>
<div xmlns="http://www.w3.org/1999/xhtml">
<p>foo</p>
<p>bar</p>
<p>baz</p>
</div>
Das bastelt man nun z.B. so in ein Dokument ein:
<div id="div"></div>
<script type="text/javascript">
function load (e) {
if (request.readyState != 4) return;
if (!request.responseXML) {
window.alert("responseXML nicht verfügbar");
return false;
}
var doc = request.responseXML;
if (!doc.documentElement) {
window.alert("document.documentElement nicht vergübar");
return false;
}
var root = doc.documentElement;
var node;
if (document.importNode) {
node = document.importNode(root, true);
} else if (root.cloneNode) {
node = root.cloneNode(true);
}
document.getElementById("div").appendChild(node);
}
var request = new XMLHttpRequest();
request.open("GET", "test.xml");
request.onreadystatechange = load;
request.send(null);
</script>
Der Elementknoten muss über importNode bzw. cloneNode für MSIE importiert werden. (Siehe auch </archiv/2005/3/t104297/#m643227> und </archiv/2005/2/t101046/#m620024>.)
Obiges Script im MSIE ungetestet, die Abfragen in der Funktion sollten den IE aber berücksichtigen, bis auf new XMLHttpRequest, wo man im MSIE eben über new ActiveXObject geht.
Den appendChild-Methodenaufruf kann man zur Sicherheit in einem try-catch-Statement unterbringen.
Falls ja, gibt es eventuell bereits einen JavaScript Parser, der z.B. aus einem speziellen XML-Dokument Teile der DOM-Struktur manipulieren kann? Vielleicht gibt es dafür ja auch schon einen Standard und eine DTD?
Was meinst du? Du hast ganz normal DOM-Core-Zugriff auf das XML-Dokument. DTDs bzw. Dokumenttyp-Angaben sind nicht notwendig.
Mathias