Daten

Wenn es um Ajax-basierte Anfragen geht, ist das HttpRequest die bekannteste Methode. Aber auch die fetch()-Methode ist eine recht neue Art der Anfrage, die sich gut nutzen lässt. Welche davon im Kontext dieses Seminars genutzt wird, ist egal.

In beiden Fällen ist jedoch die Art der Daten, auf die zugegriffen werden soll, sehr wichtig. Man muss genau wissen, welche Datenbasis man als Grundlage hat. Als Grundlage für die folgenden Beispiel dienen die beiden Dateien (XML und JSON), die auf der Seite Datenbasis gefunden werden können.

Der Ablauf ist dabei immer gleich, egal auf welchen Datentyp zugegriffen wird:

  1. Anfrage an den Server nach einer bestimmten Datei.
  2. Speichern der Daten in einer globalen Variable und Ausgabe in der Console.

console.log()

Wichtig: Das ist noch keine Ausgabe auf der Webseite, aber so kann leicht mit den Daten weitergearbeitet werden. Die Ausgabe über console.log() dient lediglich für Sie, um die gespeicherten Daten vor der Ausgabe kontrollieren zu können. Wie auf diese Ausgabe zugegriffen wird, hängt vom Browser ab. Beschreibungen dazu finden Sie auf dieser Seite.

HttpRequest

XML

var request = new XMLHttpRequest();

request.onreadystatechange = function () {
	if (this.readyState == 4 && this.status == 200) {
		xmlData = this.responseXML;
		console.log(xmlData);
	}
};

request.open("GET", "buch.xml", true);
request.send();

JSON

var request = new XMLHttpRequest();
request.responseType = 'json';

request.onreadystatechange = function () {
	if (this.readyState == 4 && this.status == 200) {
		jsonData = request.response;
		console.log(jsonData);
	}
};

request.open("GET", "buch.json", true);
request.send();

Bei näherem Hinsehen kann man erkennen, dass beide Beispiele grundsätzlich gleich sind. Durch das neu erstellte XMLHttpRequest kann eine Datenanfrage an den Server geschickt werden. Welcher Datentyp angefragt wird, ist egal. Auch wenn es sich anders anhört, können mit einem XMLHttpRequest unterschiedliche Datentypen angesprochen werden (zb txt, json, xml, php). Der Pfad der gewünschten Datei kann lokal angegeben sein, aber auch als URL.

Aufgepasst werden muss hier lediglich beim Datentyp. Während es für XML-Daten ein spezielles Objekt gibt, welches genau diese Daten als Text zurückgibt (responseXML), muss bei einer JSON-Datei der responseType festgelegt werden (responseType = 'json') und die Antwort ist dann ein normaler response (ohne XML).

Die Antwort des Servers kann entweder während der Anfrage (innerhalb der if-Bedingung) in einer Funktion aufgerufen oder in einer Variable gespeichert werden, um sie später weiterzuverarbeiten. In unseren Beispielen speichern wir die Daten in einer globalen Variable (jsonData), um leichter damit arbeiten zu können.

Fetch()

XML

function xmlFetch() {
	fetch('buch.xml')
		.then(function (response) {
			return response.text();
		})
		.then(function (xmlString) {
			return (new window.DOMParser()).parseFromString(xmlString, "text/xml");
		})
		.then(function (xmlText) {
			xmlData = xmlText;
			console.log(xmlData);
		})
		.catch(function (ex) {
			console.log('parsing failed', ex);
		})
}

JSON

function jsonFetch() {
	fetch('buch.json')
		.then(function (response) {
			return response.json();
		})
		.then(function (jsonText) {
			jsonData = jsonText;
			console.log(jsonData);
		})
		.catch(function (ex) {
			console.log('parsing failed', ex);
		})
}

Auch hier läuft die Serveranfrage relativ gleich ab. Es wird eine Anfrage gestellt, auf die der Server die entsprechende Datei als Antwort zurückgibt (response.text() oder response.json()). Danach werden die Antwortdaten als Parameter in einer anonymen Funktion übergeben. Innerhalb dieser Funktion kann daraufhin mit den Daten weitergearbeitet werden. Die catch-Funktion gibt eine Fehlermeldung in der Console aus, wenn die Daten nicht geladen werden konnten.

Auch hier gibt es jedoch einen Unterschied zwischen XML und JSON, der beachtet werden muss. So wie es beim HttpRequest eine spezielle Methode für die XML-Daten gibt, gibt es hier eine Methode für JSON (response.json()). Dagegen wird bei der Anfrage von XML-Daten zuerst der reine Text zurückgegeben werden, bevor in einer separaten, anonymen Funktion der Text in XML geparsed und zurückgegeben werden kann ((new window.DOMParser()).parseFromString(xmlString, "text/xml")).