ClientServer: GET und Ajax - JirkaDellOro/EIA2 GitHub Wiki

Der Code aus der Vorlesung wurde wie angekündigt vervollständig und noch etwas erweitert. Bevor Sie ihn nutzen, um eine Datenübertragung zwischen dem Weihnachtskonfigurator-Formular und ihrem Server zu implementieren, sollten Sie ihn sorgfältig studieren. Ziehen Sie sich hierzu den jüngsten Code aus den EIA2-Repositories zur Vorlesung EIA2-W17_Code und EIA2-W17_Node. Verändern sie den Code wie unten angegeben und beantworten sie dabei die gestellten Fragen. Nutzen Sie hierzu ausgiebig die in der Mindmap referenzierten Dokumentationen. Kern dieser Aufgabe ist die eigene Recherche mit Hilfe der Quellen, der Nachweis ist ein Dokument mit den Antworten und Beschreibungen, welches statt des Konzeptes bis Sonntag zu erstellen und über den Steckbrief zu verlinken ist.

1. Vorbereitung

  1. Das Interface AssocStringString beschreibt ein homogenes assoziatives Array. Was bedeutet dies und was ist der Unterschied zu den heterogenen, die Sie bereits kennen?
  2. Was geschieht in Zeile 47 von ServerTest.ts?
    let query: AssocStringString = Url.parse(_request.url, true).query;
  3. Die for-in-Schleife in Zeile 49 ist ein Ihnen wahrscheinlich unbekanntes Konstrukt, wie arbeitet sie?
  4. Was bewirkt die Header-Information "Access-Control-Allow-Origin"?

2. Lokale Implementation

  1. Übertragen Sie den Code von EIA2-W17_Node und L10_Node aus EIA2-W17_Code in Ihre Projekte und lassen Sie ihn lokal auf Ihrem Rechner laufen. Experimentieren Sie mit der Datenübertragung zum Localhost und beobachten Sie die Terminalausgaben. Verschicken Sie Daten mit dem Formular in SendData.html
  2. Passen Sie den Request-Handler so an, dass die Query-Daten nicht nur im Terminal, sondern auch in der Response erscheinen. Prüfen Sie das Ergebnis.

3. Externe Implementation

  1. Implementieren Sie den Code auf Heroku und Github-Pages. Prüfen Sie die Lauffähigkeit auf diesen Remotesystemen. Beachten Sie, dass hierzu die Eigenschaft action des Formulars angepasst werden muss. Am einfachsten halten Sie - wie schon vorgesehen - zwei Versionen, die sie wechselseitig auskommentieren.

4. Ajax

  1. Zurück auf Ihrem lokalen Rechner, aktivieren Sie das Skript und das untere Fieldset in SendData.html und beobachten Sie, was nun passiert, wenn Sie auf die Farbfelder klicken.
  2. Untersuchen Sie den Code in SendData.ts und beschreiben Sie die einzelnen Funktionen.
  3. Was macht die Klasse XMLHttpRequest bzw. deren Objekte?
  4. Was bedeutet Ajax?
  5. Bringen Sie auch diesen Code wieder auf den Remotesystemen zum Laufen. Achten Sie auf den URL-Parameter in der open-Methode des XMLHttpRequest-Objektes.

5. Remote-Weihnachtsbaumkonfigurator

  1. Erweitern Sie schließlich Ihr Weihnachtsbaumkonfigurator-Formular um einen entsprechenden Form-Tag und erstellen Sie eine App auf Heroku, welche die Daten des Formulars entgegen nimmt, und eine wohlformulierte Antwort als Bestätigung an den User zurück schickt. Darin werden die wichtigsten Bestellinformationen wiederholt.
  2. Stellen Sie Ihr Bestellformular über einen Steckbrieflink zur Verfügung und verlinken Sie auch das Repository mit der Heroku-App
  3. Wer möchte, kann sich gerne an einer Ajax-Variante versuchen!