JSON Requests

Genauso wie mit XML Daten, können auch JSON Daten auf eine Anfrage zurückgegeben werden. Wenn JSON möglich ist, sollte stets dieses Format gegenüber XML bevorzugt werden.

Anfrage senden

Zum Senden einer Anfrage wird zunächst das XMLHttpRequest-Object (XHR) erstellt:

// 1. XHR-Object erstellen
let xhr = new XMLHttpRequest();

Daraufhin wird ein Event-Handler erzeugt, welcher auf die Server-Antwort wartet:

// 2. Event-Handler
xhr.onload = function() {
    if (xhr.status != 200) {
        output.textContent = "Allgemeiner Verarbeitungsfehler";
        return;
    }
}

Bei modernen Browsers werden die Rückgabedaten automatisch geparst und in ein Objekt überführt. In älteren Browsern muss dies manuell durchgeführt werden.

Eine Fallunterscheidung kann dafür sorgen, dass beide Varianten unterstützt werden:

// Fähigkeitenweiche (modern <-> alt)
let jsonData;
if (xhr.responseType == "json") jsonData = xhr.response;
else (jsonData = JSON.parse(xhr.responseText));

Als nächstes muss über .open() die HTTP-Anfrage formuliert werden.

// 3. Anfrage formulieren
xhr.open("GET", "./artists.json");

Die Anfrage lässt sich weiterhin konfigurieren. Hier wird über .responseType der Rückgabetyp der Daten definiert, in diesem Fall "json", was einem JSON-Dokument entspricht.

// 4. Anfrage konfigurieren
xhr.responseType = "json";

Die Anfrage wird zuletzt mit .send() ausgeführt.

// 5. Anfrage an Server übermitteln
xhr.send();

Die Daten werden als Objekt zurückgegeben und können weiterverarbeiten werden (siehe Tag_11/JSON-Daten_mit_Ajax_laden/js/script.js)

Übungen

JSON Daten über AJAX laden

siehe Tag_11/browser-json

HTML Snippets über AJAX laden

siehe Tag_11/login-register

Vollständige HTML Seiten über AJAX laden

siehe Tag_11/login-register-html-Seiten

Über [XNLHttpRequest].responseXML erhält man ein Document Objekt mit dem geparsten HTML oder XML.

Important

Eine Konstante (const) bedeutet nicht, dass das Objekt, auf welches die Konstante verweist, unveränderlich ist, sondern lediglich, dass diese Referenzvariable nicht später auf ein anderes Objekt verweisen darf.

Important

Mit [old].replaceWith([new]) wird das bisherige Objekt elem aus dem DOM genommen und das neue Objekt new eingefügt. Eine Referenz, welches bislang auf old verwiesen hat, weißt nun auf new.

Verlaufshistorie

Über window.history oder History Objekt kann auf die Historie der anzeigten Seiten im Browser zugegriffen werden.

Hint

Beim Ausführen von AJAX-Operationen entstehen keine Einträge in der Historie erstellt. Oft soll dieser Komfort jedoch für den Nutzer möglich sein. Dann müssen diese manuell erstellt werden.

history.length:

Anzahl der History -Einträge

history.back():

Eine Seite im Verlauf zurückgehen

history.forward():

Eine Seite im Verlauf vorangehen

history.go():

Lade Seite mit einer relativen Referenz zur aktuellen Seite:

• history.go(-1): Eine Seite zurück gehen

• history.go(-5): Fünf Seiten zurück gehen

• history.go(1): Eine Seite voran gehen

• history.go(3): Drei Seiten voran gehen

Verlaufseinträge erstellen

Über history.pushState( state-object, title, relative-URL) wird ein neuer Verlaufseintrag erstellt.

Hint

Der Browser verwendet für seinen Einträge keine state-Objekte.

// Verlaufseintrag erstellen
history.pushState(
    { pageId: linkName },    // state-object
    linkContent,
    hyperRef
)

Durch Verlaufseinträge navigieren

Über popstate-Ereignis

• wird immer bei Navigation durch history ausgelöst

• gibt state-object zurück, das mit pushState übergeben wurde

Der state Objekt ist Teil des event Objekts, welches in jeder Event-Handler Funktion verfügbar ist.

window.onpopstate = function(event) {
    // Event-Objekt ist in jeder Event-Handler Funktion verfügbar

    // Das State-Objekt wird ebenfalls als Teil des Event-Objects übergeben
    // Muss ausgelesen werden
    console.log(event.state);  // gibt state zum Zeitpunkt des Events wieder

    // für ersten Aufruf einer Seite wird KEIN state Objekt in der History
    // gespeichert, da dies der erste Aufruf ist (das event.state Objekt ist 'null').
    // In diesem Fall wird die Hauptseite (index.html) geladen
    if (event.state) {
        loadContent(event.target.pageID + ".html");
    }
    else {
        loadContent("index.html");
    }
}

Hint

Zweigleisig fahren

Es bietet sich an, beide Möglichkeiten für das Laden von neuen Inhalten zu implementieren (per Ajax UND per JavaScript):

• Bei AJAX: nicht lesbar für Suchmaschinen

• Bei JavaScript: geht nicht, wenn Nutzer JavaScript deaktiviert

Die Performance-Einbußen sind in der Regel vertretbar.