Frage stellen

Teil Abschnitt einer Seite neu laden

7.3k Aufrufe
Gefragt in Webseiten HTML von
Moin,
Ich habe mich entschieden meine Webseite statt wie sonst immer mit Frames diesmal auf css Basis aufzubauen. Das klappt auch ganz gut, doch leider wird nun immer die gesamte Seite neu geladen wodurch das Radio bzw. noch Mp3-Player immer in den ausgangs Zustand versetzt wird. Nach einigem Googlen habe ich herausbekommen das es mit Ajax möglich ist nur die veränderten Objekte nachzuladen. Dies schein das zu sein wonach ich gesucht hatte den ich möchte eigentlich immer nur den rechen Teil der Seite verändern. Ich hatte versucht das unten angegebene Tutorial nach zubauen, leider verstehe ich nicht ganz wie das funktionieren soll.

http://www.admin-wissen.de/tutorials/eigene-tutorials/webentwicklung/ajax-tutorial

Ich habe meine Test Seite mal für euch online gestellt

http://fettlangeweile.fe.ohost.de/test/index.html

Und auch noch mal alles was momentan auf dem Server liegt in ein Zip Archiv gepackt.

http://fettlangeweile.fe.ohost.de/test/test.zip

12 Antworten

0 Punkte
Beantwortet von katy Mitglied (787 Punkte)
Ich finde auf deiner Seite kein AJAX, nur störende ohost-Werbung.

katy
0 Punkte
Beantwortet von
Hi, ich hab noch kein Ajax eingebaut da ich nicht weiß wie ich das bewerkstelligen soll. Wenn ich alles richtig verstanden habe muss ich einen code beim clienten (meine seiten Index.html und link.html) und einen teil (z.B. ajax_loading.js) auf dem server einfügen aber ich habe keine vorstellung davon was ich wo reinschreiben muss.

lg Alex
0 Punkte
Beantwortet von katy Mitglied (787 Punkte)
Hi Alex,

AJAX ist JavaScript und wird deswegen ausschließlich beim Clienten ausgeführt. Auf deinem Server müssen nur die Dateien liegen, die per AJAX nachgeladen werden sollen. Das können einfachte Textdateien oder aber auch XML-Dateien sein.

Bei Galileo Computing findest du dazu Beispiele.

katy
0 Punkte
Beantwortet von
Menno das ist aber alles ziemlich kompliziert -.- ich werde mich leider auch erst am Freitag weiter damit beschäftigen können. Am besten währe es wenn ich eine Beispiel Seite zum angucken hätte.
Ich habe mir den Bericht vom Link durchgelesen kann jedoch nicht nachvollziehen wohin die einzelnen Code Schnipsel geschrieben/gespeichert werden. Wenn ich mir den Quellcode von www.google.com ansehe erkenne ich dort leider auch keine Spur von Ajax.

trotzdem vielen dank für deine Bemühung mich aufzuklären katy

lg Alex
0 Punkte
Beantwortet von katy Mitglied (787 Punkte)
Hi Alex,

das JavaScript eghört immer komplett in die Seite. Auf der Galileo Computing-Seite befindet sich dies Beispiel:

<html>
<head>
<title>AJAX</title>
<script type="text/javascript"><!--
var http = null;
if (window.XMLHttpRequest) {
http = new XMLHttpRequest();
} else if (window.ActiveXObject) {
http = new ActiveXObject("Microsoft.XMLHTTP");
}
if (http != null) {
http.open("GET", "datei.html", true);
http.onreadystatechange = ausgeben;
http.send(null);
}

function ausgeben() {
if (http.readyState == 4) {
document.getElementById("Ausgabe").innerHTML =
http.responseText;
}
}
//--></script>
</head>
<body>
HTML vom Server:
<div id="Ausgabe"></div>
</body>
</html>

Das entspricht der Seite, in die du etwas hinein laden willst (hier in den bislang leeren Bereich mit der ID Ausgabe), also deine index.html, in der auch der Player stehen soll.

Und was nachgeladen werden soll steht in der Datei datei.html:

<p>AJAX erm&ouml;glicht <i>spannende</i> Effekte</p>


Da könnte auch was anderes stehen, das erscheint dann im Bereich ID=Ausgabe.

katy
0 Punkte
Beantwortet von
Hi, so ich hab nun wieder ein bisschen rum gesurft und eine wie ich finde fast anständige Ajax Applikation zusammen geschustert doch leider kann ich nur Bilder laden den ich finde keinen Befehl um Text oder besser Html einzubinden.

Momentan sieht meine index.php so aus:

if ($_REQUEST['link'] == 1) {
echo "<img src='images/1.gif' />";
}

Was müsste ich hier statt <img src='images/*.*gif' /> eingeben um html einfügen zu können?

Ich habe die neue Seite in das alte Verzeichnis gelegt
hier der Link
Und auch wieder alles in einem Zip-Verzeichnis zusammen gefasst
hier
0 Punkte
Beantwortet von
Ups ich hatte ein unvollständiges Zip-Verzeichnis hochgeladen. Dies ist jetzt behoben. Außerdem habe ich eine test.html bereitgestellt die beim ausführen eines der Links im antwort div angezeigt werden soll. Währe schön wenn mir jemand möglichst einfach erklären könnte ich das zu realisieren ist ;-).

lg Alex
0 Punkte
Beantwortet von katy Mitglied (787 Punkte)
Hallo Die_Alex,

offensichtlich nutzt du ein Skript, dass du irgendwo im Netz gefunden hast. Stimmts? Bitte sei mir nicht böse, aber das ist mir zur Analyse zu mühselig. Ich verstehe auch nicht, was an obiger Lösung (Antwort 5) dein Problem ist, du schreibst dazu aber auch nichts.

katy
0 Punkte
Beantwortet von
Hi,

ich kann die Lösung aus Antwort 5 nicht verwenden, da ich nicht verstehe wie ich es schaffe das der Inhalt aus der "test.html" erst dann in dem div antwort angezeigt wird nach dem auf den entsprechenden Link geklickt wurde. Ich vermutte es hat etwas mit dem Befehl

if (http != null) {
http.open("GET", "datei.html", true);
http.onreadystatechange = ausgeben;
http.send(null);
}

zu tun. Weiss aber nicht wie ich diesen in mit dem Link verbinde und zusätzlich dann noch andere Links mit anderem Inhalt einbinde. Das Skript das ich verwende funktioniert eigentlich super aber halt nur mit Bildern.

mfg Alex
0 Punkte
Beantwortet von supermax Experte (4.8k Punkte)
Die Funktion "ausgeben()" ersetzt einfach den Inhalt des angegebenen Elements (im Beispiel ist das das <div id="Ausgabe"></div>) mit dem, was das mit http.open() angeforderte Dokument zurückliefert. Das kann ein einfacher Text sein oder auch komplexer HTML-Code mit weiteren DIVs, IMGs oder sogar Multimedia-Objekte mittels <object> bzw. <embed>.
Seite:
...