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 mit der ID “result” anzuzeigen:
<div id="result"></div>
<script>
setInterval(function() {
$.ajax({
type: "GET",
url: "content.php",
success: function(response) {
$("#result").html(response);
}
});
}, 1000);
</script>
In diesem Beispiel sendet die Funktion setInterval alle 1000 Millisekunden (1 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 sie folgendermassen aussehen, um die Anfrage zu bearbeiten:
<?php
echo "Dynamischer Inhalt, der zurückgegeben wird.";
?>
Dies ist ein sehr minimales Beispiel, aber es zeigt, wie einfach es ist, die Benutzeroberfläche mit Ajax dynamisch zu aktualisieren. Sie können auch Daten an den Server senden und die Antwort verarbeiten, um komplexere Funktionalität zu implementieren.
Ein Beispiel mit XMLHttpRequest
Das folgende Beispiel verwendet ein XMLHttpRequest-Objekt, um die Systemzeit und die CPU-Auslastung des Servers abzufragen und das Ergebnis in einem Div-Element mit der ID “result” anzuzeigen:
<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>
In diesem Beispiel sendet die Funktion setInterval alle 1000 Millisekunden (1 Sekunde) einen GET-Request an die Datei “serverinfo.php“. Wenn der Request erfolgreich ist, wird die Antwort des Servers in das Div-Element mit der ID “result” eingefügt.
Die serverinfo.php sollte folgendermassen aussehen um die Anfrage zu bearbeiten:
<?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 Ihnen mehr Kontrolle über den Request und die Antwort gibt. Zum Beispiel können Sie den readyState und den status des Requests überprüfen um sicherzustellen, dass die Antwort valide ist, bevor Sie sie verarbeiten. Ausserdem können Sie die Antwort direkt als Text oder sogar als ArrayBuffer erhalten und verarbeiten, anstatt sie in ein JSON-Objekt zu konvertieren.
Beispiel eines all-in-one PHP files mit einem XMLHttpRequest
Das folgende Beispiel zeigt, 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 abzufragen und die Metriken in einem Div-Element mit der ID “result” anzuzeigen.
<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();
}
?>
In diesem Beispiel sendet die setInterval Funktion alle 5 Sekunden (5000 Millisekunden) einen GET-Request mit dem Parameter “metrics=true” an die Datei “index.php“. 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 ist und berechnet dann die CPU-Auslastung, Speicher-Auslastung und die Festplatten-Auslastung des Servers. Die Ergebnisse werden dann zurückgegeben und die Ausführung der Skripts wird beendet.
Es ist zu beachten, dass dies ein sehr einfaches Beispiel ist und dass es umfangreichere Möglichkeiten gibt, Metriken aus einem Server zu sammeln und darzustellen. Es ist auch wichtig, dass die serverseitigen Anfragen sicher gestaltet werden, um unbefugten Zugriff zu vermeiden.
Fazit
Insgesamt sind sowohl Ajax als auch XMLHttpRequest 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.
Letztendlich hängt die Wahl der Technologie von den Anforderungen und Präferenzen des Entwicklers ab.
Tags:
Programming
