Praktikumsversuch JS + AJAX

Dieses Praktikum dient der praktischen Erprobung eines Javascript-Eventhandlers im Zusammenspiel mit einem Ajax-Request.

Vorbereitung

• Nutzen Sie ein HTML5-Gerüst.
• Definieren Sie einen leeren Absatz und darunter einen Button.
• Programmieren Sie einen Handler, welcher beim Druck auf den Button einen Text in den Absatz einfügt!
• Integrieren Sie ein Feld, welches periodisch die aktuelle Zeit anzeigt. Tipp: newDate() und setTimeout(function, delay).

Ajax-Request

• Programmieren Sie einen Handler, welcher beim Druck auf den Button einen Ajax-GET-Request auf die nachfolgend angegebene Adresse ausführt und das Ergebnis in dem Absatz anzeigt. Sie können dazu das Codefragment ’Demo 1: JavaScript’ aus den Vorlesungsfolien nutzen.
• Führen Sie folgende Requests aus Ihrem lokalen Dateisystem aus:
  • https://www.informatik.htw-dresden.de/~jvogt/it1/ajaxdemo/ajaxdemo.txt
  • https://www.informatik.htw-dresden.de/~jvogt/it1/ajaxdemo-cors/ajaxdemo.txt
• Ergründen Sie warum dieses Requests unterschiedlich funktioniert. Nutzen Sie dazu die Konsole des Browsers für beide Requests.
• Hinweis: Anstatt der Nutzung des XMLHttpRequest-Objekts können Sie auch alternativ die Fetch-Methode in Verbindung mit den Schlüsselwörtern async und await nutzen.

Sicherheitskonzepte beim Zugriff mittels Javascript

• Machen Sie sich mit den Sicherheitskonzepten ’Same-Origin-Policy’ und ’Cross-Origin Resource Sharing’ vertraut!
• Nutzen Sie einen Webserver der HTW um dort in Ihrem Nutzerverzeichnis die Datei ajaxdemo.txt abzulegen und den Request mit dieser URL auszuführen, siehe Anleitung zu den Webservern der HTW.
• Sie werden eine Datei .htaccess in diesem Verzeichnis mit den korrekten CORS-Einstellungen für den Webserver Apache benötigen. Ermitteln Sie diese und legen Sie diese Datei in dem verwendeten Verzeichnis an. Achtung: Die CORS-Einstellungen in der .htaccess-Datei werden beim Apache-Webserver von höhergelegenen Ordnern vererbt.

Nutzung eines externen Webservers

• Konfigurieren Sie Ihr Homeverzeichnis so, dass es vom Webserver der HTW-Dresden gehostet werden kann, siehe Nutzung der Webserver
• Machen Sie Ihre Webanwendung auf dem HTW-Server verfügbar.

Literatur

• https://selfhtml.org
• https://w3schools.com
• XMLHttpRequest
• Promise
• Async

Ergebnisse

• Ajaxdemo mit CORS
• CORS-Einstellung in .htaccess

<IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
</IfModule>

Fakultativ

Parsen von JSON-Daten

Holen Sie sich die JSON-Datei noten-aufgaben.js vom Server http://idefix.informatik.htw-dresden.de/it1/beleg/ und parsen Sie diese.

Parsen von XML-Daten

• Entwerfen Sie eine XML-Datei mit einer Struktur entsprechend einer HTML-Liste und speichern Sie diese Datei auf dem Webserver.
• Laden Sie die Datei mittel Ajax und werten Sie die Daten mittels responseXML aus.