Ajax: XML und JavaScript
Ist der Request abgeschickt und der Response empfangen geht es daran die bekommenden Daten auszuwerten und entsprechend ihrer Bestimmung zu verarbeiten.Exkurs XML
Was ist XML eigentlich? Einfach gesprochen ist XML ein Dateiformat für Textdaten welches aufgrund seiner Struktur eindeutig interpretierbar ist und daher auch von einem Computer einfach verstanden werden kann. XML-Dateien sehen dabei nicht viel anders aus als normale HTML-Dateien - bzw. in Form von XHTML handelt es sich bei den HTML-Daten sogar um XML-Daten. XML selbst stellt dabei die Grundlage - sozusagen die Beschreibung - bereit wie Dateien aufgebaut sein müssen, damit sie verstanden werden können. Hierzu gehört etwa, dass geöffnete Tags auch wieder geschlossen werden müssen, dass Attributwerte immer mit doppelten Anführungszeichen (") umschlossen werden müssen und noch vieles mehr. Darüber hinaus sind mit XML "eigene" Elemente realisierbar und mit passenden Inhalten füllbar. Damit wird es möglich Daten in einem individuellen Format zu hinterlegen und anschließend mit JavaScript wieder sinnvoll auszulesen. So kann etwa ein Element Adresse angelegt werden um darin speziell Adressdaten zu speichern oder ein Element Telefon um darin eben eine Telefonnummer zu speichern. Beispiel für eine einfache XML-Datei:
<?xml version="1.0"?>
<Adressbuch>
<Kunde Name="Max Mustermann">
<Adresse>
<Straße>Musterstraße 14</Straße>
<PLZ>12345</PLZ>
<Ort>Mustehausen</Ort>
</Adresse>
</Kunde>
<Kunde Name="August Ausgedacht">
<Adresse>
<Straße>Gibts-Nicht-Weg 37</Straße>
<PLZ>67890</PLZ>
<Ort>Augsburg</Ort>
</Adresse>
</Kunde>
</Adressbuch>
XML mit JavaScript verarbeiten
Zur Verarbeitung von XML-Daten stehen ebenso wie bei normalen HTML-Dokumenten zahlreiche Objekte, Methoden und Eigenschaften zur Verfügung, die den Zugriff auf die gesuchten Informationen ermöglichen. Das wichtigste Objekt ist hier das XML-Dokument ansich, welches von derresponseXML-Eigenschaft des XMLHttpRequest-Objekts zur Verfügung gestellt wird. Es stellt wiederum Eigenschaften, Methoden und Unterobjekte zur Verfügung, die den Zugriff auf die Untergeordneten XML-Elemente ermöglichen. Hierbei ebenfalls wichtig ist das documentElement-Objekt welches alle Elemente der XML-Datei beinhaltet und damit für jeden Zugriff sozusagen der Ausgangspunkt ist. Beispiel:
o.open('GET','http://meineseite.de/kunden.xml',false);
o.send(null);
x = o.responseXML.documentElement;
document.writeln('Kunden:<br>');
for(i=0;i<x.childNodes.length;i++)
{
kunde = x.childNodes[i];
if(kunde.nodeType == 1)
{
name = kunde.getAttribute('Name');
document.writeln(name+'<br>');
}
}
childNodes mit dessen Hilfe auf alle Unter-Knoten (weiter Elemente, Kommentare, Text-Abschnitte usw.) zugegriffen werden kann.
XML-Element im Überblick
Die wichtigsten Eigenschaften die jedes XML-Element besitzt sind u.a.:-
childNodes- Unterelement vergleichbar mit einem Array aller Unterknoten. Die einzelnen Knoten können der Reihenfolge nach per Index angesprochen werden. Achtung: Internet Explorer und Firefox verhalten sich hier ein wenig unterschiedlich. -
nodeName- gibt den Namen des Knotens an. Bei Elementen ist dies der Elementname, bei Attributen der Attributname usw. -
nodeType- gibt den Typ des Knotens an. Mögliche Werte sind u.a. 1 (Element), 2 (Attribut), 3 (Text), 8 (Kommentar). -
nodeValue- gibt den Wert des Knotens. Bei Attributknoten ist dies der Attributwert, bei Kommentaren der Kommentar selbst. Bei Elementen ist dieser Wert leer bzw.null. -
parentNode- gibt den Elternkonten -
tagName- den Tag-Namen (<name ...>)
-
getAttribute(Name)- gibt den zum übergebenen Attributnamen definierten Wert. -
getElementsByTagName(Name)- gibt ein Array aller Unterelemente die den übergebenen Namen tragen (<name ...>) -
hasChildNodes()- gibt an, ob das Element weitere Unterknoten besitzt (true) oder nicht (false).
Du arbeitest in einer Agentur oder als Freelancer?
Dann wirf doch mal einen Blick auf unsere Software FeatValue.
Weiterlesen: ⯈ Andere Formen von Ajax
Über uns
Wir entwickeln Webanwendungen mit viel Leidenschaft. Unser Wissen geben wir dabei gerne weiter. Mehr über a coding project