Ablauf RN

Praktikumsversuch AJAX

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

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!

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 den Request aus Ihrem lokalen Dateisystem auf https://www.informatik.htw-dresden.de/~jvogt/it1/ajaxdemo/ajaxdemo.txt aus. Dies sollte funktionieren.
Wenn Sie den selben Request auf die URL https://www.informatik.htw-dresden.de/~jvogt/it1/ajaxdemo.txt ausführen, wird es nicht funktionieren. Ergründen Sie warum dieser Request im Gegensatz zum vorherigen Request nicht 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.

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.

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.

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

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.

Letzte Änderung: 17. May 2024 18:15