JavaScript [gelöst]Alle 60 Sekunden Wert vom Server laden

MBGucky

Der Mausbiber
ID: 170456
L
21 Februar 2007
214
3
Hi,

ich beschränke mich bei Javascript immer nur auf das nötigste und kenne mich da auch kaum aus.

Ich habe derzeit eine Seite, die ich immer wieder neu lade, nur weil ein bestimmter Wert immer wieder abgefragt werden soll. Das mache ich derzeit sogar mit einem Meta-Refresh. Zusätzlich habe ich mir ein kleines Javascript irgendwo mal kopiert und setze es ein, um die verbleibenden Sekunden bis zum Neuladen herunterzuzählen:

Code:
<html>
<head>
<title>Heute zählen wir rückwärts</title>
<meta http-equiv="Refresh" content="17; URL=https://www.example.com/zaehlwerk.php">
<script type="text/javascript">
var countDownInterval=17;
var countDownTime=countDownInterval;
function countDown() {
  if (--countDownTime < 0) {
    countDownTime=0; //countDownInterval;
  }
  if (document.getElementById&&document.getElementById("countDownText")!=null) {
    document.getElementById("countDownText").innerHTML = countDownTime;
  }
  if (document.getElementById&&document.getElementById("countDownNext")!=null) {
    document.getElementById("countDownNext").innerHTML = countDownTime;
  }
  window.setTimeout("countDown()", 1000);
}

function start() {
	setTimeout("countDown()", 1000);
}
start();
</script>
</head>
<body>
 <p> Sekunden bis zum Reload;</p>
 <p id="countDownNext">...</p>
 <p id="zahl"> Und die aktuelle Zahl lautet: 64738 </p>
</body>

Der Code scheint mir auch etwas umfangreich für ein einfaches Rückwärtszählen. Geht das nicht einfacher?

Dabei setze ich die Reload-Zahl (also im Beispiel die 17) bereits per PHP-Script fest und die Ausgabe der aktuellen Zahl findet natürlich ebenfalls in PHP statt.

Jetzt möchte ich mir gerne stattdessen ein PHP-Script erstellen, welches ausschließlich die aktuelle Zahl ausgibt. Das schaffe ich gerade noch ohne Hilfe ;)

Aber ich möchte diese Zahl alle 60 Sekunden vom Javascript laden und in das Element mit der ID "zahl" schreiben.
Letzteres geht natürlich mit:
Code:
document.getElementById("zahl").innerHTML = wertvomserver;
(Den Text lassen wir mal weg)

Aber wie bekomme ich den Wert vom Server alle 60 Sekunden in die Variable wertvomserver ?
 
Zuletzt bearbeitet:
AJAX is das Zauberwort. Ich empfehle jQuery, um dir das Leben möglichst leicht zu machen und gleichzeitig dieses komsiche getElementById()-Zeugs loszuwerden.
 
ich finde mit jqeury bläht er das nur unnötig auf
simpleAJAX reicht da doch aus.
nen get und nen response
und den inhalt im div neu setzen, wäre einfach und ohne getelement id
 
Super!

Das Stichwort Ajax war genau das richtige.

Hier noch der Code, wie ich es nun eingestellt habe:

Code:
<html>
<head>
<title>Heute zählen wir rückwärts</title>
<script type="text/javascript">
var countDownInterval=17;
var countDownTime=countDownInterval;
function countDown() {
  if (--countDownTime < 0) {
    countDownTime=60; //countDownInterval;
	xmlhttp=new XMLHttpRequest();
	xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("zahl").innerHTML=xmlhttp.responseText;
    document.title="Zahl: " + xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","zaehlwerk.php?action=recount",true);
xmlhttp.send();

  }
  if (document.getElementById&&document.getElementById("countDownText")!=null) {
    document.getElementById("countDownText").innerHTML = countDownTime;
  }
  if (document.getElementById&&document.getElementById("countDownNext")!=null) {
    document.getElementById("countDownNext").innerHTML = countDownTime;
  }
  window.setTimeout("countDown()", 1000);
}

function start() {
	setTimeout("countDown()", 1000);
}
start();
</script>
</head>
<body>
 <p> Sekunden bis zum Reload;</p>
 <p id="countDownNext">...</p>
 <p> Und die aktuelle Zahl lautet: <span id="zahl">64738</span> </p>
</body>

Klappt wunderbar und ich hab mir die aktuelle Zahl gleich noch in den Titel geschrieben, damit ich im Firefox nicht mal den Tab aufrufen muss, um die Zahl zu sehen.

Vielen Dank!
Das ging ja wirklich blitzschnell!
 
jQuery hat javascript eigentlich komplett ersetzt ist nicht schlimm wen man alles in jQuery schreibt. (es gibt natürlich noch andere sehr gute JS-Frameworks).