|
Serverzeit
| Mit diesem Ajax-Tutorial bekommen Sie einen Schnelleinstieg
in das neue Trendthema.
Das Grundprinzip von Ajax ist einfach: Eine bereits fertig im Browser
angezeigte Seite lädt Daten vom Server nach. In diesem Beispiel handelt
es sich dabei um die Zeiteinstellung des Servers, die auf der Seite
angezeigt wird und jederzeit aktualisiert werden kann. Der Unterschied zu
einer herkömmlichen Anwendung liegt nun darin, dass dank Ajax nicht bei
jedem Aktualisierungsvorgang die komplette Seite neu geladen werden muss,
sondern lediglich der gewünschte Teil: die Serverzeit.
Beim nun folgenden Code handelt es sich um das PHP-Skript, auf das die
Ajax-Anwendung später zugreifen wird, um die jeweils aktuelle Serverzeit
zu erhalten.
|
| Script: |
<?php
// -----------------------
// --- Datei: time.php ---
// -----------------------
// Seite soll nicht aus dem Cache geladen werden.
header('Cache-Control: no-cache');
// Unix-Zeitstempel ausgeben.
echo time();
?>
<script type="text/javascript">
//<![CDATA[
// -----------------------
// --- Datei: ajax.php ---
// -----------------------
// Wir wollen mit JavaScript eine Anfrage an den Server tätigen.
// Dafür steht eine vordefinierte Klasse zur Verfügung.
// Eine Instanz dieser Klasse soll in dieser Variablen gespeichert werden.
var ajax=false;
// Beim Firefox nennt sich die Klasse XMLHttpRequest.
if (window.XMLHttpRequest)
{
ajax=new XMLHttpRequest;
}
// Beim Internet Explorer handelt es sich um ein ActiveX-Objekt.
else if (window.ActiveXObject)
{
ajax=new ActiveXObject('Microsoft.XMLHTTP');
}
// Wir brauchen nun eine Funktion für den Abruf der Daten.
function load()
{
// Die Anfrage soll mittels GET stattfinden.
// Die angegebene URL muss vom selben Server stammen.
ajax.open('GET', 'time.php');
// Wir müssen festlegen, wie Antworten des Servers verarbeitet werden.
// Dazu behalten wir stets den aktuellen Status der Anfrage im Auge.
// Das Ereignis onreadystatechange tritt ein, wenn sich dieser ändert.
ajax.onreadystatechange=function()
{
// Diese Eigenschaft enthält einen Code für den aktuellen Status.
// Der Wert 4 steht dabei für complete.
if (ajax.readyState==4)
{
// Die Eigenschaft responseText enthält die Antwort.
window.document.getElementById('time').innerHTML=
ajax.responseText;
}
}
// Die Anfrage wird gesendet.
ajax.send(null);
}
// Konnte zu Beginn kein Objekt erzeugt werden, wird das Skript nicht gestartet.
if (ajax)
{
window.document.writeln('<p>');
window.document.writeln('Serverzeit');
window.document.writeln('[<a href="#" id="refresh">aktualisieren</a>]:');
window.document.writeln('<span id="time">...</span>');
window.document.writeln('</p>');
// Beim Klicken auf den Link wird über eine neue Anfrage aktualisiert.
window.document.getElementById('refresh').onclick=load;
// Die erste Serveranfrage findet gleich nach dem Laden der Seite statt.
window.onload=load;
}
//]]>
</script>
|
|
Tutorials