Ajax und XMLHttpRequest sind Technologien, die es ermöglichen, Daten vom Server zu laden und die Benutzeroberfläche dynamisch zu aktualisieren, ohne die gesamte Seite neu zu laden.
Ajax wird hauptsächlich mit jQuery verwendet und bietet eine einfache Möglichkeit, asynchrone Anfragen durchzuführen und die Antworten zu verarbeiten. Es ist jedoch auch möglich, Ajax ohne jQuery zu verwenden, indem man das XMLHttpRequest-Objekt direkt verwendet.
XMLHttpRequest ermöglicht es Ihnen, tiefer in die Verarbeitung von Anfragen und Antworten einzusteigen und mehr Kontrolle über den Request und die Antwort zu haben. Es ermöglicht auch die Verarbeitung von Daten in verschiedenen Formaten wie Text, JSON oder ArrayBuffer.
Beide Technologien verbessern die Benutzererfahrung und ermöglichen es, komplexere Funktionalitäten in Web-Anwendungen zu implementieren.
Ein Beispiel mit Ajax
Im folgenden Beispiel verwenden wir jQuery, um einen GET-Request an die Datei «content.php» zu senden und das Ergebnis in einem Div-Element anzuzeigen:
<div id="result"></div>
<script>
setInterval(function() {
$.ajax({
type: "GET",
url: "content.php",
success: function(response) {
$("#result").html(response);
}
});
}, 1000);
</script>Die Funktion setInterval sendet alle 1000 Millisekunden (jede Sekunde) einen GET-Request an die Datei «content.php«. Wenn der Request erfolgreich ist, wird die Antwort des Servers in das Div-Element mit der ID #result eingefügt.
Damit etwas angezeigt wird, muss die «content.php» einen return value geben. Als einfaches Beispiel kann somit der nachfolgende Text in die Datei geschrieben werden, um die Antwort korrekt bearbeiten zu können:
<?php
echo "Dynamischer Inhalt, der zurückgegeben wird.";
?>Es handelt sich hier um ein sehr minimales Beispiel, aber es zeigt, wie einfach es ist, eine Benutzeroberfläche mit Ajax dynamisch zu aktualisieren. Sie können auch Daten an einen Server senden und dessen Antwort verarbeiten, um eine komplexere Funktionalität zu implementieren.
Ein Beispiel mit XMLHttpRequest
Das folgende Beispiel verwendet ein XMLHttpRequest-Objekt, um die Systemzeit und die CPU-Auslastung eines Servers abzufragen. Das Ergebnis wird dann erneut in einem Div-Element angezeigt:
<div id="result"></div>
<script>
setInterval(function() {
var xhr = new XMLHttpRequest();
xhr.open("GET", "serverinfo.php", true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var response = JSON.parse(xhr.responseText);
document.getElementById("result").innerHTML = "Systemzeit: " + response.time + "<br> CPU Auslastung: " + response.cpu + "%";
}
}
xhr.send();
}, 1000);
</script>Die Funktion setInterval sendet auch hier alle 1000 Millisekunden (jede Sekunde) einen GET-Request an die Datei «serverinfo.php«. Immer wenn der Request erfolgreich ist, wird die Antwort des Servers in das Div-Element mit der ID #result erneut eingefügt / aktualisiert.
Die serverinfo.php muss, damit alles funktioniert, wie folgt aussehen:
<?php
$response = array();
$response['time'] = date("Y-m-d H:i:s");
$response['cpu'] = sys_getloadavg()[0] * 100;
echo json_encode($response);
?>Der Vorteil von XMLHttpRequest gegenüber jQuery.ajax besteht darin, dass es mehr Kontrolle über den Request sowie die Antwort gibt. Als Beispiel kann mit einem XML-Request zusätzlich zum ajax-Request der readyState sowie der status des Requests überprüft, werden. So kann sichergestellt werden, dass die Antwort valide ist, bevor sie verarbeitet wird. Ausserdem kann die Antwort auch direkt als Text oder sogar als ArrayBuffer erhalten und verarbeiten werden, anstatt sie zuerst in ein JSON-Objekt konvertieren zu müssen.
Beispiel eines all-in-one PHP files – XMLHttpRequest
Das folgende Beispiel soll aufzeigen, wie eine einzelne «index.php» Datei sowohl die Anfrage als auch die Antwort für eine dynamische Aktualisierung von Metriken eines Linux-Servers verarbeitet. Diese Datei verwendet das XMLHttpRequest-Objekt, um sich selbst alle 5 Sekunden anhand eines GET-Requests abzufragen. Die Metriken werden dann wieder im Div-Element mit der ID #result angezeigt.
<div id="result"></div>
<script>
setInterval(function() {
var xhr = new XMLHttpRequest();
xhr.open("GET", "index.php?metrics=true", true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
document.getElementById("result").innerHTML = xhr.responseText;
}
}
xhr.send();
}, 5000);
</script>
<?php
if (isset($_GET['metrics']) && $_GET['metrics'] == 'true') {
$cpu = sys_getloadavg()[0] * 100;
$memory = round(shell_exec("free | grep Mem | awk '{print $3/$2 * 100.0}'"), 2);
$disk = round(shell_exec("df -h / | awk '{print $5}'"), 2);
echo "CPU Auslastung: " . $cpu . "%<br>";
echo "Speicher Auslastung: " . $memory . "%<br>";
echo "Festplatten Auslastung: " . $disk . "%<br>";
exit();
}
?>Die setInterval Funktion alle 5 Sekunden (5000 Millisekunden) einen GET-Request mit dem Parameter «metrics=true» an die Datei «index.php«. Nur wenn der Request erfolgreich ist, wird die Antwort des Servers in das Div-Element mit der ID #result eingefügt.
Die PHP-Abfrage prüft, ob der Parameter «metrics» mit dem Wert true gesetzt wurde und berechnet dann die CPU-Auslastung, Speicher-Auslastung und die Festplatten-Auslastung des Servers. Die Ergebnisse werden zurückgegeben und die Ausführung der Skripts wird beendet.
Auch dieses Beispiel wurde sehr trivial gehalten. Es soll ein einfaches Beispiel sein, das aufzeigt, dass es auch umfangreichere Möglichkeiten gibt, Metriken aus einem Server zu sammeln und darzustellen. Es ist dabei auch wichtig, dass die serverseitigen Anfragen stets sicher gestaltet werden, um unbefugte Zugriffe zu vermeiden.
Fazit
Ajax als sowohl auch XMLHttpRequest sind nützliche Technologien für die Entwicklung von dynamischen und interaktiven Web-Anwendungen. Während Ajax eine einfachere Möglichkeit bietet, Anfragen durchzuführen und die Antworten zu verarbeiten, bietet XMLHttpRequest mehr Kontrolle und Flexibilität über die Request / Response.
Letztendlich hängt die Wahl der Technologie von den Anforderungen und Präferenzen des Entwicklers ab.
