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 >= &&
      
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 AusblendenKopierenLinkZeilen

<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">&nbsp;$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.

<details> Details

CSS - Lightbox

PHP - Farbbalken mit Farbänderung je nach Prozent

JavaScript - Ausgabe zeitlich steuern

MySQL - Datensätze über Checkbox-Auswahl suchen

Seiten besuchen - Von Webseiten lernen
Schauen Sie sich auf anderen Webseiten um, suchen sie nach Ideen für Ihre eigene Seite. Gehen Sie mit wachsamem Auge durchs Netz. Lernen Sie aus den Fehlern anderer. Sagen Sie sich: "das hätte ich anders" oder "besser gemacht". Klicken Sie auf jeden noch so kleinen Link, schauen Sie was sich dahinter verbirgt. Wenn man zukünftigen Designern eine Empfehlung geben kann, dann diese: Surfen, surfen, surfen. Je mehr man mit eigenen Augen sieht, selbst ausprobiert und erlebt, desto besser.