Einführung in PHP - AJAX
Hallo, ambitionierte Web-Entwickler! Heute tauchen wir in die aufregende Welt von AJAX mit PHP ein. Als dein freundlicher Nachbarschafts-Computerlehrer bin ich hier, um dich durch diese Reise zu führen, selbst wenn du noch nie eine Zeile Code geschrieben hast. Also, hol dir eine Tasse Kaffee (oder Tee, wenn das dein Ding ist) und lassen wir loslegen!
Was ist AJAX?
AJAX steht für Asynchrones JavaScript und XML. Lass dich von diesem komplizierten Wort nicht abschrecken! Es ist eigentlich eine ziemlich coole Technologie, die Webseiten interaktiver und benutzerfreundlicher macht.
Stell dir vor, du bist in einem Restaurant. Ohne AJAX müsstest du jedes Mal, wenn du die Karte sehen willst, deinen Platz verlassen, zum.Counter gehen, die Karte anfordern und dann zurückkommen. Mit AJAX ist es so, als hättest du einen Kellner, der dir nur die Informationen bringen kann, die du benötigst, ohne dein整个餐体验 zu unterbrechen.
In Webterminologie ermöglicht AJAX deiner Webseite, Daten von einem Server anzufordern und zu empfangen, ohne die gesamte Seite neu zu laden. Es ist wie Magie, aber besser, weil wir verstehen können, wie es funktioniert!
Wie AJAX funktioniert
- Ein Ereignis tritt auf einer Webseite auf (z.B. das Klicken einer Schaltfläche)
- JavaScript erstellt ein XMLHttpRequest-Objekt
- Das XMLHttpRequest-Objekt sendet eine Anfrage an einen Webserver
- Der Server verarbeitet die Anfrage
- Der Server sendet eine Antwort zurück an die Webseite
- JavaScript liest die Antwort
- JavaScript führt eine geeignete Aktion basierend auf der Antwort aus
Was wird für den Betrieb von AJAX benötigt?
Um AJAX zu betreiben, benötigst du drei Hauptzutaten:
- Ein Webbrowser, der JavaScript und das XMLHttpRequest-Objekt unterstützt
- Ein Webserver (wie Apache), der AJAX-Anfragen verarbeiten kann
- Eine serverseitige Programmiersprache (in unserem Fall PHP)
Gute Nachrichten! Die meisten modernen Webbrowser unterstützen AJAX,also sind wir bereits zu einem Drittel fertig!
Einrichten deiner Umgebung
Bevor wir mit dem Coden beginnen, lassen wir uns sicherstellen, dass alles eingerichtet ist:
- Installiere XAMPP (es enthält den Apache Webserver und PHP)
- Erstelle einen neuen Ordner im
htdocs-Verzeichnis deiner XAMPP-Installation - Öffne deinen bevorzugten Texteditor (ich liebe Visual Studio Code persönlich)
Jetzt, wo wir alles eingerichtet haben, lassen wir uns ans Coden!
Dein erster AJAX-Aufruf
Lassen wir mit einem einfachen Beispiel beginnen. Wir erstellen eine Schaltfläche, die, wenn sie angeklickt wird, eine Begrüßung vom Server abruft, ohne die Seite neu zu laden.
Erstelle zuerst eine HTML-Datei namens index.html:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mein erster AJAX-Aufruf</title>
</head>
<body>
<h1>Willkommen bei AJAX!</h1>
<button onclick="getGreeting()">Begrüßung abrufen</button>
<p id="greetingText"></p>
<script>
function getGreeting() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("greetingText").innerHTML = this.responseText;
}
};
xhttp.open("GET", "greeting.php", true);
xhttp.send();
}
</script>
</body>
</html>Lassen wir das einmal auseinandernehmen:
- Wir haben eine Schaltfläche mit einem
onclick- Ereignis, das die FunktiongetGreeting()aufruft. - In der Funktion
getGreeting()erstellen wir einXMLHttpRequest-Objekt. - Wir richten eine Funktion ein, um die Antwort vom Server zu verarbeiten.
- Wir öffnen eine Verbindung zu
greeting.phpund senden die Anfrage.
Als nächstes erstellen wir eine PHP-Datei namens greeting.php:
<?php
$greetings = array("Hallo!", "Bonjour!", "Hola!", "Ciao!", "Konnichiwa!");
echo $greetings[array_rand($greetings)];
?>Dieses PHP-Skript gibt eine zufällige Begrüßung aus einem Array zurück.
Wenn du auf die Schaltfläche klickst, sendet JavaScript eine Anfrage an greeting.php, das mit einer zufälligen Begrüßung antwortet. JavaScript aktualisiert dann die Seite mit dieser Begrüßung, ohne die Seite neu zu laden!
Daten an den Server senden
Jetzt, wo wir das Abrufen von Daten gemeistert haben, lassen wir uns an das Senden von Daten an den Server wagen. Wir erstellen ein einfaches Formular, das einen Namen an den Server sendet und eine personalisierte Begrüßung zurückbekommt.
Aktualisiere deine index.html:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AJAX Formularbeispiel</title>
</head>
<body>
<h1>Personalisierte Begrüßung</h1>
<input type="text" id="nameInput" placeholder="Deinen Namen eingeben">
<button onclick="getPersonalizedGreeting()">Begrüßung abrufen</button>
<p id="greetingText"></p>
<script>
function getPersonalizedGreeting() {
var name = document.getElementById("nameInput").value;
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("greetingText").innerHTML = this.responseText;
}
};
xhttp.open("POST", "personalized_greeting.php", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("name=" + name);
}
</script>
</body>
</html>Und erstelle eine neue personalized_greeting.php:
<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$name = $_POST["name"];
$greetings = array("Hallo", "Bonjour", "Hola", "Ciao", "Konnichiwa");
$greeting = $greetings[array_rand($greetings)];
echo "$greeting, $name!";
}
?>In diesem Beispiel verwenden wir eine POST-Anfrage, um den Namen an den Server zu senden. Das PHP-Skript verwendet diesen Namen, um eine personalisierte Begrüßung zu erstellen.
Häufig verwendete AJAX-Methoden
Hier ist eine Tabelle der häufig verwendeten AJAX-Methoden:
| Methode | Beschreibung |
|---|---|
| open() | Gibt den Typ der Anfrage und die URL an |
| send() | Sendet die Anfrage an den Server |
| setRequestHeader() | Fügt ein Label/Wert-Paar zur zu sendenden Kopfzeile hinzu |
Fazit
Glückwunsch! Du hast gerade deine ersten Schritte in die Welt von AJAX mit PHP gewagt. Wir haben die Grundlagen des asynchronen Sendens und Empfangens von Daten behandelt, was die Grundlage für viele moderne Webanwendungen ist.
Denke daran, dass das Lernen von Code wie das Lernen einer neuen Sprache ist. Es erfordert Zeit und Übung, aber mit jeder Zeile Code, die du schreibst, wirst du besser. Habe keine Angst, zu experimentieren, Fehler zu machen und daraus zu lernen.
In meinen Jahren des Unterrichtens habe ich unzählige Schüler von kompletten Anfängern zu versierten Entwicklern werden sehen. Der Schlüssel ist Beharrlichkeit und Neugier. Also weiter codieren, weiter lernen, und bevor du es weißt, wirst du erstaunliche interaktive Webanwendungen erstellen!
beim nächsten Mal werden wir fortgeschrittene AJAX-Techniken erkunden und verschiedene Datenarten behandeln. Bis dahin, viel Spaß beim Coden!
Credits: Image by storyset