JavaScript - Externe Datei per AJAX zeitabhängig aktualisieren
Im folgenden Beispiel wir die Weltzeit
-Tabelle alle 10 Sekunden aktualisiert
ohne dass die Seite neu geladen wird.
Die Angabe der Zeit erfolgt dabei in Millisekunden.
1 Sekunde = 1000 Millisekunden
60 Sekunden = 60000 Millisekunden (1 Minute)
300 Sekunden = 300000 Millisekunden (5 Minuten)
<script>
// Externe Datei per AJAX zeitabhängig aktualisieren
window.addEventListener("DOMContentLoaded", function() {
dateiLaden();
window.setInterval('dateiLaden()', 10000); // 10000 Millisekunden = 10 Sekunden
});
const xhr = new XMLHttpRequest();
function dateiLaden() {
xhr.open("GET", "weltzeit_ausgabe.php", true); // Anfrage zur Datei: weltzeit_ausgabe.php
xhr.send(null);
xhr.onreadystatechange = function() {
if (xhr.readyState >= 4 &&
xhr.status == 200) {
document.getElementById("ausgabe").innerHTML = xhr.responseText;
}
}
}
</script>
<div id="ausgabe"></div>
Anstatt wie hier die Uhrzeit auszugeben, könnte auch eine Anfrage an eine Datenbank erfolgen um zum Beispiel die neusten Einträge abzurufen.
Quelltext: weltzeit_ausgabe.php Ausblenden ❘ Kopieren ❘ Link ❘ Zeilen ❘
<table class="weltzeittabelle">
<?php
$timezones = [
"Berlin" => "Europe/Berlin",
"London" => "Europe/London",
"Madrid" => "Europe/Madrid",
"Moskau" => "Europe/Moscow",
"Anchorage" => "America/Anchorage",
"Buenos Aires" => "America/Buenos_Aires",
"Chicago" => "America/Chicago",
"Los Angeles" => "America/Los_Angeles",
"New York" => "America/New_York",
"Hong Kong" => "Asia/Hong_Kong",
"Seoul" => "Asia/Seoul",
"Shanghai" => "Asia/Shanghai",
"Tokyo" => "Asia/Tokyo",
"Casablanca" => "Africa/Casablanca",
"Dakar" => "Africa/Dakar",
"Johannesburg" => "Africa/Johannesburg",
"Nairobi" => "Africa/Nairobi",
"Antananarivo" => "Indian/Antananarivo",
"Chagos" => "Indian/Chagos",
"Cocos" => "Indian/Cocos",
"Mauritius" => "Indian/Mauritius",
"Brisbane" => "Australia/Brisbane",
"Darwin" => "Australia/Darwin",
"Perth" => "Australia/Perth",
"Sydney" => "Australia/Sydney",
"Auckland" => "Pacific/Auckland",
"Funafuti" => "Pacific/Funafuti",
"Tahiti" => "Pacific/Tahiti",
"Tonga" => "Pacific/Tongatapu",
];
$ar = [];
foreach ($timezones as $land => $timezone) {
$part = explode("/", $timezone);
if (!in_array($part[0], $ar)) {
$ar[] = $part[0];
echo '<tr><td colspan="5"> ' . $part[0] . '</td></tr>';
}
$date = date_create("now", timezone_open($timezone));
echo '<tr><th>' . $land .'</th><td>' . date_format($date, "d.m.Y") . '</td>
<td>' . date_format($date, "H:i") . ' Uhr</td>' .
(date_format($date, "Ymd") < date("Ymd") ? '<td>- 1 Tag</td>' : '') .
(date_format($date, "Ymd") > date("Ymd") ? '<td>+1 Tag</td>' : '') .
(date_format($date, "d.m") == "01.01" ? '<td>Neujahr!</td>' : '') .
'</tr>';
}
?>
</table>
Bausteine Alle Anzeigen
Eine zufällige Auswahl von Codeschnipseln
aus den Bereichen
HTML, CSS,
PHP, JavaScript und
MySQL.
<i> Kursiv (Physische Auszeichnung)
CSS - Aufzählungslisten einfärben
PHP - Zufallstext einer externen Datei ausgeben