Einsendeaufgabe 3

README.md

 # Internettechnologie EA
 
+Einsendeaufgabe 3 - Webserver Konfiguration
+
+Verwendetes Webserver-Paket: Apache24
+Betriebssystem: Windows 10
+Verzeichnis vom Internetauftritt: C:/Uni/Git/internettechnologie-ea
+
+Folgende Änderungen wurden in der httpd.conf Datei vorgenommen:
+DocumentRoot "c:/Uni/Git/internettechnologie-ea"
+<Directory "c:/Uni/Git/internettechnologie-ea">
+
+Beim Einbinden des Ajax-Beispiels in die Webseite auf dem Server wird eine folgende Fehlermeldung ausgeworfen:
+Quellübergreifende (Cross-Origin) Anfrage blockiert: Die Gleiche-Quelle-Regel verbietet das Lesen der externen Ressource auf file:///C:/Uni/Git/internettechnologie-ea/husky.json. (Grund: CORS-Anfrage war nicht http).
+
+Um das zu beheben muss bei Apache eine htaccess Regel angelegt werden mit
+
+Header add Access-Control-Allow-Origin "*"
+
+Header add Access-Control-Allow-Headers "origin, x-requested-with, content-type"
+
+Header add Access-Control-Allow-Methods "PUT, GET, POST, DELETE, OPTIONS"
\ No newline at end of file

husky.json

+{
+  "title": "Siberian Husky
+  "ref": "https://de.wikipedia.org/wiki/Siberian_Husky",
+  "description": "Der Husky ist ein freundlicher, intelligenter Hund mit eigenem Kopf. In Deutschland ist vor allem der sibirische Husky sowie der Alaskan Husky zu finden. Dieser besondere Hund ist sehr arbeitswillig, bewegungsfreudig und sanftmütig. Der Husky Charakter ist zuverlässig und verspielt. Aufgrund seiner Freundlichkeit eignet er sich nicht als Wachhund. Die Beißschwelle bei einem Husky ist sehr hoch. Am wohlsten fühlt sich das Tier im Rudel, sodass er nicht allein gehalten werden sollte.(Quelle Wikipedia)"
+}
\ No newline at end of file

index.html

@@ -16,7 +16,7 @@
             <ul>
                 <li><a href="#facts">Fakten</a></li>
                 <li><a href="#comment" onclick="toggleCommentSection()">Gästebuch</a></li>
-                <li><a href="#about">Über</a></li>
+                <li><a href="#other">Andere</a></li>
             </ul>
         </nav>
     </div>
@@ -94,7 +94,35 @@ Das Fell muss bestimmt jeden Tag gepflegt werden...
             </div>
         </div>
     </div>
-    <div id="about"></div>
+    <div id="other">
+		<div class="wrapper">
+				<div class="left">
+					<img id="img" src="images/hunderassen.jpg" alt="user" width="150">
+					<h4>Nordische Hunderassen</h4>
+				</div>
+				<div class="right">
+					<div class="info">
+						<h3>INFOS</h3>
+					</div>
+					<section id="dog-selector">
+        <span>Hunderasse: </span>
+        <select>
+          <option value="" disabled selected>Bitte auswählen...</option>
+          <option value="samojede.json">Samojede</option>
+          <option value="husky.json">Siberian Husky</option>
+          <option value="malamute.json">Alaskan Malamute</option>
+        </select>
+      </section>
+      <section id="dog-panel">
+        <h2 class="title">Keine Hunderasse ausgewählt.</h2>
+        <a class="ref" target="_blank" href="#">
+          <span class="label"></span>
+        </a>
+        <p class="description"></p>
+      </section>
+				</div>
+			</div>
+		</div>
 </div>
 <script src="./js/main.js"></script>
 </body>

js/main.js

+"use strict"; // ältere JavaScript Systax verbieten
+
+
 var images = [], x = -1;
 images[0] = "images/shiro_fakten_1.jpg";
 images[1] = "images/shiro_fakten_2.jpg";
@@ -33,4 +36,51 @@ function countCharInTextArea(val, id) {
         val.value = val.value.substring(0, 500);
     }
     $(id).text(500 - len);
-}
\ No newline at end of file
+}
+
+// select-Element zur Hundauswahl im DOM finden
+      var dogSelector = document.querySelector("#dog-selector select");
+
+      // Auf Änderungen des select-Elements reagieren
+      dogSelector.addEventListener("change", function(event) {
+        // Referenz auf select-Elements
+        var select = this;
+        // Ausgewählten Wert auslesen
+        var dogFileName = select.value;
+
+        // Informationen zum Hund per AJAX laden.
+        var xhttp = new XMLHttpRequest();
+        xhttp.onreadystatechange = function() {
+          if (this.readyState == 4 && this.status == 200) {
+
+            // Inhalt der Daten von JSON in JavaScript-Objekt wandeln
+            var dogData = JSON.parse(this.responseText);
+
+            // Anzeige für den Hund mit geladeden Daten aktualisieren
+            updateDogPanel(dogData);
+
+          }
+        };
+        xhttp.open("GET", "./" + dogFileName, true);
+        xhttp.send();
+      });
+
+      var updateDogPanel = function(dogData) {
+
+        // Anzeigebereich für Hundinformationen im DOM finden
+        var dogPanel = document.querySelector("#dog-panel");
+
+        // Titel setzen
+        var title = dogPanel.querySelector(".title");
+        title.innerHTML = dogData.title;
+
+        // Quellenangabe setzen
+        var ref = dogPanel.querySelector(".ref");
+        var label = ref.querySelector(".label");
+        ref.href = dogData.ref;
+        label.innerHTML = dogData.ref;
+
+        // Beschreibung setzten
+        var description = dogPanel.querySelector(".description");
+        description.innerHTML = dogData.description;
+      }
\ No newline at end of file

malamute.json

+{
+  "title": "Alaskan Malamute",
+  "ref": "https://de.wikipedia.org/wiki/Alaskan_Malamute",
+  "description": "Alaskan Malamutes sind Arbeitshunde. Sie sind es gewohnt, sich viel zu bewegen und benötigen den Auslauf auch. Als Begleiter bei der Jagd möchten sie selbstständig denken. Sie sind keine reinen Befehlsempfänger mit uneingeschränkter Gehorsamkeit, sie wollen verstehen, warum sie einen Befehl ausführen sollen. Alaskan Malamutes sind es zudem gewohnt, im Rudel zu leben. Auch wenn sie ihrem Menschen treu ergeben sind, so sind sie in der Regel kein Hund für eine Person. Sie sind zu allen Menschen freundlich. Als Wachhund wären sie daher eine völlige Fehlbesetzung, denn auch über den Besuch des Einbrechers würden sie sich freuen. Mit Kindern kommen sie gut klar. In ihrer arktischen Heimat haben sie oft mit den Kindern gekuschelt und nachts haben sich Kind und Hund oft gegenseitig gewärmt. Trotzdem sollte man natürlich einen solch kräftigen Hund nie mit einem Kind alleine lassen. (Quelle Mein-Haustier)"
+}

samojede.json

+{
+  "title": "Samojede",
+  "ref": "https://de.wikipedia.org/wiki/Samojede_(Hunderasse)",
+  "description": "Der Samojede ist ein aufgeschlossener und herzlicher Familienhund, der eine enge Bindung zur gesamten Familie aufbaut. Er ist sehr menschenbezogen, sanft und anhänglich. Hektik und Aggression sind ihm fremd und er besitzt eine beruhigende Ausstrahlung. Die plüschigen Hunde lieben es gestreichelt und gekrault zu werden und sind nicht gerne alleine. Mit fremden Hunden oder anderen Haustieren haben die intelligenten Hunde in der Regel kein Problem. Die Arbeit mit ihren Menschen bereitet ihnen große Freude, wobei sie jedoch gerne ihren eigenen Kopf durchsetzen. Unterwürfigkeit und blinder Gehorsam sind den mutigen Hunden fremd. (Quelle Mein-Haustier)"
+}