Commit 8cc71e7b authored by Shadow Chrome's avatar Shadow Chrome
Browse files

Einsendeaufgabe 3

parent aa938892
# 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
{
"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
......@@ -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>
......
"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
{
"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)"
}
{
"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)"
}
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment