PHP und AJAX

Dieses Kapitel erklärt, wie man AJAX (im Browser) mit PHP (auf dem Server) kombiniert, damit eine Seite im Hintergrund mit dem Server kommunizieren und nur den geänderten Teil aktualisieren kann — ohne vollständigen Seitenneulade. Sie werden ein vollständiges, funktionierendes Beispiel erstellen, sehen, wie die Anfrage in PHP gelesen und JSON zurückgegeben wird, und die Sicherheits- und Fehlerbehandlungsregeln kennenlernen, die echte Anwendungen benötigen.

Was ist PHP AJAX?

AJAX steht für Asynchronous JavaScript and XML. Trotz des Namens verwendet modernes AJAX selten XML — es sendet und empfängt JSON, weil JSON direkt auf JavaScript-Objekte und PHP-Arrays abgebildet werden kann. Das Schlüsselwort ist asynchron: Der Browser sendet eine Anfrage und läuft weiter. Wenn der Server antwortet, aktualisiert ein Callback die Seite. Der Benutzer sieht nie einen leeren, neu ladenden Bildschirm.

„PHP AJAX" ist genau dieses Muster mit PHP auf der Serverseite: JavaScript sendet die Anfrage, ein PHP-Skript verarbeitet sie (oft durch Datenbankabfragen), und PHP gibt JSON zurück, das JavaScript dann darstellt.

Häufige Anwendungsfälle:

• Live-Suche / Autovervollständigung — Vorschläge erscheinen während der Eingabe.
• Inline-Formularvalidierung — Benutzernamen oder E-Mail prüfen, bevor der Benutzer abschickt.
• Like- / Abstimmungs- / Favoritenbuttons — Zähler aktualisieren, ohne die Seite zu verlassen.
• Unendliches Scrollen und „Mehr laden" — die nächste Ergebnisseite bei Bedarf abrufen.

Wie eine AJAX-Anfrage abläuft

Eine einzelne Anfrage-Antwort-Runde folgt immer denselben vier Schritten:

1. Ereignis — der Benutzer tippt, klickt oder sendet ab. JavaScript fängt das Ereignis ab.
2. Anfrage — JavaScript sendet eine HTTP-Anfrage an einen PHP-Endpunkt (mit fetch oder XMLHttpRequest).
3. Serverarbeit — PHP liest die Eingabe aus $_GET, $_POST oder dem rohen Anfrage-Body, erledigt seine Arbeit (z. B. eine Datenbankabfrage) und gibt eine JSON-Antwort per echo aus.
4. Aktualisierung — JavaScript empfängt das JSON, parst es und aktualisiert den DOM.

Der Browser ist der Client; das PHP-Skript ist der Server. Sie tauschen nur kleine Datenmenge aus, weshalb AJAX im Vergleich zum Neuladen einer ganzen Seite sofort wirkt.

Die Anfrage senden: fetch vs. XMLHttpRequest

XMLHttpRequest (XHR) ist die ursprüngliche AJAX-API. fetch ist der moderne, Promise-basierte Ersatz — kürzer, leichter lesbar und in jedem aktuellen Browser integriert. Verwenden Sie fetch für neuen Code; XHR benötigen Sie nur, wenn sehr alte Browser unterstützt werden müssen.

// Modern: fetch returns a Promise
fetch('endpoint.php')
  .then(res => res.json())   // parse the JSON body
  .then(data => console.log(data));

// Legacy: the equivalent with XMLHttpRequest
const xhr = new XMLHttpRequest();
xhr.open('GET', 'endpoint.php');
xhr.onload = () => console.log(JSON.parse(xhr.responseText));
xhr.send();

Die Anfrage lesen und mit JSON in PHP antworten

Wie PHP die eingehenden Daten liest, hängt davon ab, wie JavaScript sie gesendet hat:

Was auch immer die Eingabe ist, die Antwort sollte JSON mit dem richtigen Header sein, damit der Browser sie korrekt parst:

<?php
header('Content-Type: application/json');
echo json_encode(['status' => 'success', 'value' => 42]);

Die header()-Zeile teilt dem Browser mit, dass der Body JSON ist. json_encode() wandelt das PHP-Array in einen JSON-String um. Siehe PHP JSON und json_encode() für die vollständige Referenz.

Ein vollständiges Beispiel: Live-Suchvorschläge

Dies ist eine vollständige, funktionsfähige Autovervollständigung: Tippen Sie in das Feld, JavaScript fragt search.php ab, und PHP gibt passende Elemente als JSON zurück.

HTML + JavaScript (die Seite):

<input id="searchInput" type="text" placeholder="Search fruit…" autocomplete="off">
<ul id="results"></ul>

<script>
const input = document.getElementById('searchInput');
const list = document.getElementById('results');
let timer;

input.addEventListener('input', () => {
  // Debounce: wait until the user pauses typing (avoids a request per keystroke)
  clearTimeout(timer);
  timer = setTimeout(() => {
    const query = input.value.trim();
    if (!query) { list.innerHTML = ''; return; }

    fetch(`search.php?q=${encodeURIComponent(query)}`)
      .then(res => res.json())
      .then(data => {
        list.innerHTML = data.suggestions
          .map(item => `<li>${item}</li>`)
          .join('');
      })
      .catch(() => { list.innerHTML = '<li>Search failed</li>'; });
  }, 250);
});
</script>

PHP (search.php):

<?php
header('Content-Type: application/json');

// 1. Read and sanitise the input
$query = trim($_GET['q'] ?? '');

// 2. Do the work. In real code this is a *prepared* SQL query — see the note below.
$fruits = ['apple', 'apricot', 'banana', 'cherry', 'grape', 'mango'];
$matches = array_values(array_filter(
    $fruits,
    fn($fruit) => str_contains($fruit, strtolower($query))
));

// 3. Reply with JSON
echo json_encode(['suggestions' => $matches]);

Tippen Sie ap und die Liste zeigt jede Frucht, die diese Buchstaben enthält — apple, apricot und grape — und die Seite wird nie neu geladen. Um Vorschläge aus einer Datenbank statt aus dem speicherinternen Array zu laden, verwenden Sie ein Prepared Statement wie in AJAX und MySQL-Datenbank gezeigt.

Verwenden Sie immer Prepared Statements. Fügen Sie $_GET['q'] niemals direkt in einen SQL-String ein — das ist eine SQL-Injection-Lücke. Verwenden Sie gebundene Parameter (siehe PHP MySQLi).

Inline-Formularvalidierung

Validieren Sie ein Feld auf dem Server, bevor der Benutzer das gesamte Formular abschickt. Dieselben PHP-Regeln, die die Übermittlung schützen, können für die AJAX-Prüfung wiederverwendet werden.

const form = document.getElementById('myForm');
form.addEventListener('submit', (e) => {
  e.preventDefault();              // stop the normal page reload
  fetch('validate.php', {
    method: 'POST',
    body: new FormData(form)       // sends fields as $_POST
  })
    .then(res => res.json())
    .then(data => {
      if (data.valid) form.submit();
      else console.log(data.errors);
    });
});

<?php
header('Content-Type: application/json');

$errors = [];
$email  = trim($_POST['email'] ?? '');

if ($email === '') {
    $errors[] = 'Email is required';
} elseif (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
    $errors[] = 'Invalid email format';
}

echo json_encode(['valid' => empty($errors), 'errors' => $errors]);

new FormData(form) sammelt jedes Feld, sodass PHP sie aus $_POST liest. Für eine tiefergehende Behandlung von Formularen siehe PHP-Formularvalidierung und PHP $_GET / $_POST Superglobals.

Häufige Fallstricke

• CORS. Eine Anfrage an einen anderen Ursprung (Domain, Port oder Schema) wird blockiert, es sei denn, der PHP-Server sendet Access-Control-Allow-Origin. Anfragen vom gleichen Ursprung benötigen nichts.
• Den JSON-Header setzen. Das Vergessen von header('Content-Type: application/json') funktioniert zwar noch mit res.json(), bricht aber Tools, die sich auf den Content-Type verlassen. Setzen Sie ihn immer.
• Fehler behandeln. Netzwerkfehler und 500-Antworten müssen abgefangen werden — fügen Sie ein .catch() hinzu und prüfen Sie res.ok, sonst tut die Benutzeroberfläche stillschweigend nichts.
• Live-Anfragen entprellen. Ohne das setTimeout-Debounce oben wird bei jedem Tastendruck eine Anfrage gesendet und der Server überlastet.
• Ausgaben, die Sie in den DOM einfügen, escapen. Das Einfügen von rohem Servertext mit innerHTML kann XSS einführen; escapen Sie die Daten oder verwenden Sie textContent für nicht vertrauenswürdige Daten.

Zusammenfassung

PHP AJAX ermöglicht es einer Seite, im Hintergrund kleine Datenmengen mit dem Server auszutauschen und sich an Ort und Stelle zu aktualisieren. JavaScript sendet die Anfrage mit fetch, PHP liest sie aus $_GET/$_POST/php://input, erledigt seine Arbeit und gibt JSON über json_encode() zurück. Nutzen Sie Prepared Statements für Eingaben, setzen Sie den JSON-Header und behandeln Sie immer den Fehlerpfad.

Nächste Schritte: Verbinden Sie AJAX mit einer echten Datenbank in AJAX und MySQL, und lernen Sie das Antwortformat ausführlich in PHP JSON.

Übungen