Ajax Datenbasis
Kölsch der Woche!
Inhaltsangabe:
Ajax - Ein Reminder
Zwei Beispiele für die Datenbasis-Anfrage an den Server:
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
myFunction(this);
}
};
xhttp.open("GET", "Beispiel.xml", true);
xhttp.send();
Das Event onreadystatechange überprüft, ob der Server bereit ist und führt die Funktion nur dann aus.
var requestURL = 'Beispiel.json';
var request = new XMLHttpRequest();
request.open('GET', requestURL);
request.responseType = 'json';
request.send();
Der responseType ist wichtig, da die json-Datei vor der Verarbeitung in ein JavaScript-Objekt umgewandelt werden muss.
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. In Beispiel 1 ist die Datei direkt angegeben (xhttp.open("GET", "Beispiel.xml", true);), in Beispiel 2 wurde der Pfad im Vorfeld in eine Variable geschrieben (request.open('GET', requestURL);).
Die Antwort des Servers kann entweder während der Anfrage in einer Funktion aufgerufen (Beispiel 1) oder in einer Variable gespeichert werden, um sie später weiterzuverarbeiten (Beispiel 2). In beiden Fällen werden die Daten als Paramter innerhalb der Funktionen übergeben.
Weitere Infos finden Sie hier und hier.
XML
Adressierung über den DOM
function myFunction(xml) {
var xmlDoc = xml.responseXML;
document.getElementById("example").innerHTML =
xmlDoc.getElementsByTagName("title")[0].childNodes[0].nodeValue;
}
Grundsätzliches: Die Funktion wird mit dem XMLHttpRequest als Parameter aufgerufen. Zuerst müssen die Daten von diesem Request in einer Variablen gespeichert werden.
Hier werden die Daten über die DOM-Elemente der XML-Datei angesprochen. Zuerst wird nach einem Tagname gesucht (getElementsByTagName("title")[0]). Auch wenn es nur ein title-Element gibt, muss die Angabe als Array erfolgen []. Hiervon wird der (im Beispiel erste) Kindknoten angesprochen, in diesem Fall ist das der Knoten, der den Text beinhaltet (childNodes[0]). Für die Ausgabe wird der Wert des childNodes gebraucht (nodeValue), also der Text selbst.
Adressierung über XPath
function showResult(xml) {
var txt = "";
path = "/examplestore/book/title"
if (xml.evaluate) {
var nodes = xml.evaluate(path, xml, null, XPathResult.ANY_TYPE, null);
var result = nodes.iterateNext();
while (result) {
txt += result.childNodes[0].nodeValue + "<br>";
result = nodes.iterateNext();
}
document.getElementById("demo").innerHTML = txt;
}
Hier wird im Vorfeld der Pfad innerhalb der XML-Datei angegeben, der Rest der Datei wird nicht beachtet. Die evaluate-Methode wertet XPath Ausdrücke in Bezug auf ein XML basierendes Dokument (einschließlich HTML-Documente) aus und gibt ein XPath-Result-Objekt zurück, das ein Einzelknoten oder eine Zusammenstellung mehrerer Knoten sein kann. Durch die Methode iterateNext() werden die Knoten innerhalb des XPath-Result-Objektes zurückgegeben und können in einer Variablen gespeichert werden. Auf Basis dieser Variable können die verschiedenen Knoten angesprochen und ausgegeben werden.
JSON
Hinweis: Ein Beispiel für eine Ajax-Kommunikation mit JSON finden Sie auf Ilias, das ganze Projekt mit Erklärung hier relativ weit unten.
Da die json-Datei bei der Serverantwort bereits in ein Javascript-Objekt umgewandelt wird, können wir auch wie gewohnt darauf zugreifen. Hier können Sie die Basics vom JS-Objekt nachlesen.
var heroes = jsonObj['members'];
for (var i = 0; i < heroes.length; i++) {
document.getElementById("name").textContent = heroes[i].name;
document.getElementById("identity").textContent = 'Secret identity: ' + heroes[i].secretIdentity;
document.getElementById("age").textContent = 'Age: ' + heroes[i].age;
}
Das jsonObj entspricht dem XMLHttpRequest. Hierbei wird auf das Array in diesem Objekt zugegriffen und in eine Variable gespeichert. Auf die einzelnen Werte innerhalb des Arrays kann hier leicht zugegriffen werden. Die Eigenschaft textContent liest und speichert den Textinhalt eines HTML-Elements und aller Kindelemente. Sie können den Inhalt dynamisch ändern.
function populateHeader(jsonObj) {
var myH1 = document.createElement('h1');
myH1.textContent = jsonObj['squadName'];
header.appendChild(myH1);
var myPara = document.createElement('p');
myPara.textContent = 'Hometown: ' + jsonObj['homeTown'] + ' // Formed: ' + jsonObj['formed'];
header.appendChild(myPara);
}
In diesem Beispiel werden durch createElement() und appendChild() (Kind-)Elemente hinzugefügt, die nicht im Html-Dokument vorhanden sind und deswegen nicht über getElementById() gefunden werden können. Durch die Kombination beider Methoden können auch Tabellen oder Listen erstellt werden. Weitere Infos dazu auf w3schools.
Außerdem werden hier die Eigenschaften des JS-Objektes anders angesprochen. Statt jsonObj.homeTown kann auch jsonObj['homeTown'] genutzt werden. Nachzulesen ist das in den JS-Objekten auf w3schools.
Und dann muss ja auch noch gefiltert werden: https://stackoverflow.com/questions/42143031/filter-json-by-key-value
Google-Fonts
Da die Verfügbarkeit von (gerade exotischeren) Schriftarten auf PCs unterschiedlich ausfallen kann, stellt Google Schriftarten zur Verfügung, die beim designen der eigenen Webseite genutzt werden können. Sie können über einen Link in den head des Html-Dokumentes eingesetzt oder lokal in die CSS-Datei implementiert werden. Auch wenn das Einsetzen des Links schneller und einfacher erscheint, muss hier betont werden, dass die Schriftarten in diesem Fall regelmäßig nachgeladen werden, also eine ständige Verbindung zum Google-Server besteht. Genaueres können Sie hier nachlesen.
Eine ausführliche Anleitung für das Einbinden neuer Schriftarten finden Sie hier. Die Google-Fonts selbst direkt bei Google.
Wir wünschen Ihnen allen eine schöne vorlesungsfreie Zeit! Bis zum nächsten Semester :-)