LF 10a: Benutzerschnittstellen: Aufgabe: JS lädt JSON-Daten in die Webseite

Schreiben Sie eine Webseite, die folgende JSON-Daten in die Webseite lädt und anzeigt:

user.json

{
	"users": [{
			"id": 1,
			"firstName": "Maria",
			"lastName": "Sandros"
		},
		{
			"id": 2,
			"firstName": "Jan Philipp",
			"lastName": "Müller"
		}
	]
}

Wichtiger Hinweis: Webserver benutzen

Alle modernen Browser verbieten inzwischen JavaScript den Zugriff auf das lokale Dateisystem (außer bei Cookies). Denn wenn JavaScript einer HTML-Seite auf das Dateisystem zugreifen könnte, wäre es relativ leicht möglich private Dateien auf einen fremden Webserver hoch zu laden.

Die sogenannte Cors-Policy verbietet dies u.a.:

CORS Policy moderner Browser verbieten Cross Origin-Aufrufe

Die Lösung ist die Webseite durch einen Webserver ausliefern zu lassen. Hierfür kann ein beliebiger Webserver genutzt werden. Zwei einfache Beispielen werden im Folgenden beschrieben:

Live Server von Visual Studio Code

Eine einfache Möglichkeit besteht z.B. darin, hierfür den sog. Live Server, eine Visual Studio Code Extention zu installieren:

Installation des Live Server Plugin von Visual Studio Code

So wird im Moment die relativ aufwendige Installation eines Webserver wie z.B. Nginx, Apache o.ä. vermieden.

Ein Rechter-Maus-Klick auf die HTML-Datei öffnet den Systembrowser:

Start des Live Servers mit Rechtem-Maus-Klick

Die untere Adresszeile zeigt die URL der Datei auf dem localhost (IP-Adresse 127.0.0.1). Der vom Live Server standardmäßig genutzte Port ist 5500, damit es nicht zu Konflikten mit anderen Webservern auf dem Rechner kommen kann, die normalerweise z.B. Port 80, 8080, 443 nutzten.

Vergleich der URL im Browser (unteres Bild zeigt den Aufruf mit dem Live Server)

Einfacher Python Webserver

Statische Dateien kann auch der einfache Webserver der als Standardfunktionalität mit Python installiert wird. Hierfür wird auf der Kommandozeile in das Wurzelverzeichnis des Webprojekts navigiert und dort mit

python -m http.server

der Webserver gestartet.

Sie Seite wird mit http://localhost:8000<seitenname> oder mit http://127.0.0.1::8000<seitenname> mit dem Browser aufgerufen.

(Dieser Webserver lauscht standardmäßig auf Port 8000. Der Name der HTML-Datei kann bei der Standardkonfiguration auch hier weggelassen werden, wenn er index.html oder index.htm ist.)