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.phpAusblendenKopierenZeilen

<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.

<html> HTML

CSS - Leuchtende blaue Eingabefelder

PHP - Redirect auf eine andere Seite

JavaScript - Autom. Überprüfung der Eingabe

MySQL - Datensatz Wert erhöhen