kostenloser Webspace werbefrei: lima-city


Suche Tutorial

lima-cityForumDie eigene HomepageHTML, CSS & Javascript

  1. Autor dieses Themas

    drogen-mafia

    drogen-mafia hat kostenlosen Webspace.

    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...
  2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

  3. 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">&nbsp;</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
  4. Autor dieses Themas

    drogen-mafia

    drogen-mafia hat kostenlosen Webspace.

    :-o Dankeschön für dieses Ausführliche Tutorial :love:

    Ich werde es gleich mal testen...



    Edit:

    Wenn ich in die Time.php jetzt ne Datanbankabfrage reinmache, aktualisiert die sich dann auch ständig? Oder muss ich da noch was beachten?

    Beitrag zuletzt geändert: 18.6.2011 10:56:53 von drogen-mafia
  5. 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 ;)
  6. Autor dieses Themas

    drogen-mafia

    drogen-mafia hat kostenlosen Webspace.

    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
  7. 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 :)
  8. 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
  9. 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">&nbsp;</span>


    und ersetzen durch:

    <a href="#" onclick="refreshdiv()">Refresh</a>
    <br /><br /><span id="ausgabe">&nbsp;</span>


    ... und fertig ist das Mondgesicht.

    Beitrag zuletzt geändert: 18.6.2011 13:17:54 von fabo
  10. 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

    ?!?

  11. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

Login zum Webhosting ohne Werbung!