Eine moderne Web-Anwendung kommt heutzutage kaum noch ohne die Möglichkeit aus, Inhalte dynamisch nachzuladen. Die bekannten JavaScript-Frameworks berücksichtigen dies natürlich, aber für eine nachzuladene Kleinigkeit sind solche umfangreiche Lösungen natürlich wie die sprichwörtlichen Kanonen, um auf Spatzen zu schießen. Mittels XMLHttpRequest ist eine dynamische Abfrage aus JavaScript heraus keine Zauberei. Im folgenden Code-Snippet ist eine ganz einfache Beispielanwendung zu sehen.
Der Nutzer kann in diesem Beispiel einfach ein beliebiges Datumsformat eingeben, das dann via XMLHttpRequest an die ajax.php gesendet wird. Nun benutzt das PHP-Skript das Format als Parameter für die date()-Funktion und gibt ein entsprechend formatiertes Datum zurück. Die für onreadystatechange definierte Funktion schreibt nun nur noch den Rückgabewert in das span mit der ID dynamic. Wichtig ist, dass ihr immer auf die passende Encodierung achtet… aber das sollte bei der Verarbeitung von Nutzereingaben ja hoffentlich selbstverständlich sein.
Ausprobieren könnt ihr das Beispiel im Testlabor.
Hier nun die index.html:
[cce lang=“javascript“]
<!DOCTYPE HTML PUBLIC „-//W3C//DTD HTML 4.01 Transitional//EN“
„http://www.w3.org/TR/html4/loose.dtd“>
<html>
<head>
<title>Ajax-Demo</title>
</head>
<body>
<div>
<h1>Serverzeit via XMLHttpRequest</h1>
<p>
<strong>Format:</strong>
<input id=“reqval“ type=“text“ value=“d.m.Y H:i:s“>
</p>
<p>
<input type=“button“ value=“Abfragen“
onclick=“javascript:doRequest();“>
</p>
<p>
<strong>Ergebnis:</strong>
<span id=“dynamic“><em>Noch keine Abfrage durchgeführt.</em></span>
</p>
</div>
<script type=“text/javascript“>
function doRequest() {
// Für Request Objekt
var xmlHttp = null;
// Ergebnisfeld
var e = document.getElementById(‚dynamic‘);
// Parameter
var p = document.getElementById(‚reqval‘).value;
try {
// XMLHttpRequest Objekt erstellen
xmlHttp = new XMLHttpRequest();
} catch(e) {
// Alter Browser, insbesondere IE<7
e.innerHTML = „Bitte aktualisieren Sie Ihren Browser!“;
}
// Wenn der Browser XMLHttpRequest unterstützt…
if (xmlHttp) {
// Anfrage via GET definieren, Parameter escapen!
xmlHttp.open(‚GET‘, ‚ajax.php?format=‘ + escape(p), true);
// Funktion definieren für Statusänderung
// z.B. Abfrage abgeschlossen (4)
xmlHttp.onreadystatechange = function () {
// Anfrage abgeschlossen
if (xmlHttp.readyState == 4) {
e.innerHTML = xmlHttp.responseText;
}
}
// Anfrage senden
xmlHttp.send(null);
};
}
</script>
</body>
</html>
[/cce]
Und der zugehörige PHP-Code aus der ajax.php im gleichen Verzeichnis:
[cce lang=“php“]
<?php
if (isset($_GET[‚format‘])) $strFormat = htmlentities($_GET[‚format‘]);
else $strFormat = ‚d.m.Y H:i:s‘;
echo date($strFormat);
[/cce]