Webhilfe.info/board

Normale Version: AJAX - Uhrscript
Du siehst gerade eine vereinfachte Darstellung unserer Inhalte. Normale Ansicht mit richtiger Formatierung.
Moin zusammen,
ich habe hier mein erste kleines AJAX-Script zusammengebastelt.
Es stellt eine kleine Uhr da, die einmal über einen Intervall ständig aktualisiert wird, aber auch von Hand durch einen Link aktualisiert werden kann.

Ihr benötigt neben dem HTML-Quellcode auch noch eine PHP-Datei mit folgendem Inhalt ( Ich habe sie hallo.php im Code genannt - wenn ihr nichts ändern wollst, müsst ihr dies entsprechend auch tun!)

PHP-Code:
echo date("H:i:s",time()); 


Und schließlich diese valide HTML Datei:

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head><title>Script 1 - AJAX Test</title>

    <script type="text/javascript">
        function Refresh()
        {
            var req =(window.XMLHttpRequest) ?    new XMLHttpRequest() :((window.ActiveXObject)? new ActiveXObject("Microsoft.XMLHTTP"): false);
            req.open("GET","hallo.php",true);
            req.onreadystatechange = function()
            {
                if (req.readyState == 4)
                {
                    if (req.status == 200)
                    {
                        var d = document.getElementById("hallo")
                        var e = document.getElementById("button")
                        window.setTimeout("Refresh()", 5000);
                        e.innerHTML = "Uhrzeit aktualisieren";
                        d.innerHTML = req.responseText;
                        
                    }
                }
            }
            req.send(null)
        }
        window.onload = Refresh();
        
    </script>
</head>
<body>

<div id="hallo"></div>
<a href="javascript:Refresh('')" id="button"></a> <!--Achtung! Blank vor script entfernen!!! -->
</body>
</html>


Ihr könnt damit herumexperimentieren wie ihr wollt. Bei Fragen einfach hier melden. Viel Spaß damit.

Vielleicht ein Tipp am Rande: Bei mir ist der Apache bei einer Frequenz von einer Millisekunde in die Knie gegangen. Sah aber gut aus der Countup *g*

Hier mal die demo dazu Smile
http://www.web-mafia.net/uhr.htm
Aus mir unerklärlichen Gründen wird in der Ausgabe hier javascript getrennt geschrieben. daher funktioniert der link nicht!

<a href="jRefresh('')" id="button"></a>

muss eigentlich:

<a href="jRefresh('')" id="button"></a>

heißen. also ohne das blank vor script!
jo, jetzt funktioniert es ^^
Referenz-URLs