Suche Tutorial
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
anzeigen
ausgabe
beachten
besucher
code
container
dank
datei
datenbank
einzelne daten
element
file
inhalt
parameter
sekunde
teil
test
testweise folgendem inhalt
url
verwenden
-
Huhu
Ich bin auf der Suche nach einem Tutorial, das zeigt wie ich nen Wert aus der Datenbank anzeigen lasse... Und die Ausgabe soll sich einmal pro Sekunde aktualisieren, ohne das der Besucher die Seite neuladen muss!
Habe vor ne Onlinezeit zu erstellen, die anzeigt wie lange man von einem Bestimmten Zeitpunkt entfernt ist!
Wäre toll wenn jemand nen nettes tut hätte... -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Was du brauchst, sind 3 Dinge:
Eine Priese Ajax
Damit das Ganze ohne Interaktion seitens des Besuchers statt finden kann, benötigst du Ajax. Damit kannst du in einem festgelegten Abstand automatisch eine Datei aufrufen und deren Inhalt beispielsweise irgendwo anzeigen lassen:
var seconds = 1; // Sekunden bis zum Refresh var divid = "ausgabe"; // ID des Elements, in dem der Inhalt verändert werden soll var url = "time.php"; // Datei, die aufgerufen werden soll function refreshdiv() { var xmlHttp; try { xmlHttp = new XMLHttpRequest(); } catch (e) { try { xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { alert("Your browser does not support AJAX."); return false; } } } fetch_unix_timestamp = function () { return parseInt(new Date().getTime().toString().substring(0, 10)) } var timestamp = fetch_unix_timestamp(); var nocacheurl = url + "?t=" + timestamp; xmlHttp.onreadystatechange = function () { if (xmlHttp.readyState == 4) { document.getElementById(divid).innerHTML = xmlHttp.responseText; setTimeout('refreshdiv()', seconds * 1000); } } xmlHttp.open("GET", nocacheurl, true); xmlHttp.send(null); } var seconds; window.onload = function startrefresh() { setTimeout('refreshdiv()', seconds * 1000); }
Die ersten 3 Zeilen des Scripts musst du nach Belieben anpassen.
Ein Löffel PHP
Als nächstes benötigst du die "time.php", welche den Inhalt des Elements liefern soll. Wie man eine SQL-Verbindung aufbaut und einzelne Daten aus der Datenbank liest, solltest du ja wissen. Dementsprechend gehe ich darauf nicht weiter ein.
Du erstellst dir also die "time.php" mit testweise folgendem Inhalt:
<?php echo $_GET['t']; ?>
Den Parameter t übergeben wir in dem o.g. Ajax-Script an die "time.php". Dies zeigt uns den aktuellen Timestamp (den man nun noch schön formatieren könnte, usw...).
Eine Packung HTML
Zu guter letzt fehlt uns der eigentliche HTML-Code. Dieser HTML-Code muss unter Anderem das o.g. Javascript und auch das definierte Element "ausgabe" beinhalten, da wir dieses Element mit der Ausgabe der "time.php" füllen wollen:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Test</title> <meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" /> <script type="text/javascript"> var seconds = 1; // Sekunden bis zum Refresh var divid = "ausgabe"; // ID des Elements, in dem der Inhalt verändert werden soll var url = "time.php"; // Datei, die aufgerufen werden soll function refreshdiv() { var xmlHttp; try { xmlHttp = new XMLHttpRequest(); } catch (e) { try { xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { alert("Your browser does not support AJAX."); return false; } } } fetch_unix_timestamp = function () { return parseInt(new Date().getTime().toString().substring(0, 10)) } var timestamp = fetch_unix_timestamp(); var nocacheurl = url + "?t=" + timestamp; xmlHttp.onreadystatechange = function () { if (xmlHttp.readyState == 4) { document.getElementById(divid).innerHTML = xmlHttp.responseText; setTimeout('refreshdiv()', seconds * 1000); } } xmlHttp.open("GET", nocacheurl, true); xmlHttp.send(null); } var seconds; window.onload = function startrefresh() { setTimeout('refreshdiv()', seconds * 1000); } </script> </head> <body> <span id="ausgabe"> </span> </body> </html>
Ich habe bewusst den Ajax-Teil mit dem HTML-Teil kombiniert. Wem das zu viel ist, der kann den Ajax-Teil auch in einer .js-Datei unterbringen und diese Datei dann inkludieren.
Im o,g, HTML-Code haben wir das Element "ausgabe" in Form eines span-Containers. Man könnte auch andere HTML-Elemente verwenden und mit der ID "ausgabe" ausstatten. Dieser Container wird nun mit dem Inhalt der Datei "time.php" gefüllt.
Das war ein Crashkurs in Sachen Ajax. Ich hoffe, du verstehst das Ganze und kannst es für dein Vorhaben verwenden.
Beitrag zuletzt geändert: 17.6.2011 21:43:33 von fabo -
Wenn ich in die Time.php jetzt ne Datanbankabfrage reinmache, aktualisiert die sich dann auch ständig? Oder muss ich da noch was beachten?
Probieren geht über studieren ;) -
Habe das jetzt mal eingebaut...
Funktioniert Prima, Inhalte werden auch geladen, nur die Seite flackert Weiß.
Kann es sein das mein Script zu anspruchsvoll ist?
Hups,.. fehler gefunden... Mein selbstversuch war noch drinn...
Funktioniert perfekt.. Danke :D
Beitrag zuletzt geändert: 18.6.2011 11:31:39 von drogen-mafia -
Vielleicht etwas am Rande...
Wenn ich in die Time.php jetzt ne Datanbankabfrage reinmache, aktualisiert die sich dann auch ständig? Oder muss ich da noch was beachten?
Solche Tutorials sind eigentlich eher dazu gedacht, dass der Leser etwas daraus lernt und nicht, dass er es 1:1 kopiert und nicht versteht, was er da tut. Vielleicht für die Zukunft merken :) -
Hallo
is ja ein super Beispiel-Code, DANKE
sorry wenn ich mich hier reinmisch'
aber wie kann ich sowas machen, dass nicht alle x Sekunden die time.php neu geladen wird
sondern nur bei Click-Event (auf ein bestimmten Tag ?
also ganz einfach, bei Klick auf Link (oder <span> Tag) die Datei time.php neu laden
so dass das Script in der time.php erst nach Klick ausgeführt wird ?
für Beispiel wäre ich Dankbar.
Beitrag zuletzt geändert: 18.6.2011 12:10:59 von promohit -
Im Javascript-Teil suchen nach:
var seconds; window.onload = function startrefresh() { setTimeout('refreshdiv()', seconds * 1000); }
und entfernen. Bei Bedarf auch
var seconds = 1; // Sekunden bis zum Refresh
Im Html-Teil suchen nach:
<span id="ausgabe"> </span>
und ersetzen durch:
<a href="#" onclick="refreshdiv()">Refresh</a> <br /><br /><span id="ausgabe"> </span>
... und fertig ist das Mondgesicht.
Beitrag zuletzt geändert: 18.6.2011 13:17:54 von fabo -
Danke
habe noch was anderes ausprobiert, aber ich bekomme es nicht hin Parameter zu übergeben
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>test</title> <script src="http://code.jquery.com/jquery-latest.js"></script> </head> <body> <div id="myLink">Click to load file</div> <script type="text/javascript"> $.ajaxSetup ({ // Disable caching of AJAX responses cache: false }); $('#myLink').click(function() { if($('#myContent').html() == '') { $('#myContent').load('path-to-file.php?myNum=12'); } }); </script> <div id="myContent"></div> </body> </html>
und path-to-file.php
<?php echo "test ... test ... ".$myNum." .... test .... balbla"; ?>
der text wird ausgegeben, aber ohne die Variable, die scheint nicht anzukommen
leider ist die Variable aus dem Aufruf path-to-file.php?myNum=12 nicht verfügbar
?!?
-
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
