PHP - AJAX und PHP

AJAX (Asynchrones JavaScript und XML) ist eine Technologie, die verwendet wird, um Daten mit dem Server auszutauschen, ohne die gesamte Seite neu zu laden.

AJAX ist eine Technologie, die Teile einer Webseite aktualisieren kann, ohne die gesamte Seite neu laden zu müssen. Sie tauscht Daten mit dem Server im Hintergrund aus und kann einen Teil des Inhalts der Webseite aktualisieren.

AJAX ermöglicht es Webseiten, Teile des Inhalts dynamisch zu aktualisieren, was eine schnellere Benutzererfahrung bietet.

AJAX verwendet normalerweise das XMLHttpRequest-Objekt, um im Hintergrund mit dem Server zu kommunizieren, obwohl es auch moderne Methoden wie die fetch-API verwenden kann.

Weitere Inhalte finden Sie unter:AJAX-Tutorial

Wie AJAX funktioniert

  • Anfrage senden: Der Benutzer löst auf irgendeine Weise eine AJAX-Anfrage aus (z. B. durch Klicken auf eine Schaltfläche).
  • Anfrage erstellen: JavaScript erstellt ein XMLHttpRequest-Objekt, um mit dem Server zu kommunizieren.
  • Anfrage senden: Senden Sie eine Anfrage an den Server über das XMLHttpRequest-Objekt.
  • Serververarbeitung: Nach dem Empfang der Anfrage verarbeitet der Server die Daten.
  • Antwort zurücksenden: Der Server gibt das Verarbeitungsergebnis an den Client zurück.
  • Seite aktualisieren: Nachdem JavaScript die Antwort des Servers empfangen hat, aktualisiert es den entsprechenden Teil der Webseite.

Schritte zur Verwendung von AJAX in PHP

1. Frontend:JavaScript initiiert die AJAX-Anfrage.

Verwenden Sie XMLHttpRequest oder fetch, um eine Anfrage an den PHP-Server zu senden.

2. Backend:PHP empfängt und verarbeitet die Anfrage.

PHP ruft die Daten aus der AJAX-Anfrage ab und gibt das Ergebnis zurück.

3. Frontend:Verarbeiten Sie die von PHP zurückgegebenen Daten.

Verwenden Sie JavaScript, um die von PHP empfangenen Antwortdaten zu parsen und anzuzeigen.

AJAX in PHP verwenden

1. HTML und JavaScript erstellen: Zuerst benötigen Sie eine HTML-Seite und JavaScript-Code, um AJAX-Anfragen zu senden.

Beispiel

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>AJAX-Beispiel</title>
    <script>
        function sendRequest() {
            var xhr = new XMLHttpRequest();
            xhr.onreadystatechange = function() {
                if (xhr.readyState == 4 && xhr.status == 200) {
                   document.getElementById("result").innerHTML = xhr.responseText;
                }
            };
            xhr.open("GET", "your_php_file.php?param=value", true);
            xhr.send();
        }
    </script>
</head>
<body>
    <button onclick="sendRequest()">AJAX-Anfrage senden</button>
    <div id="result"></div>
</body>
</html>

2. Schreiben Sie das PHP-Skript:Auf der Serverseite benötigen Sie eine PHP-Datei, um die Anfrage zu verarbeiten und Daten zurückzugeben.

Beispiel

<?php
if (isset($_GET['param'])) {
    // Anfrageparameter verarbeiten
    $param = $_GET['param'];
    // Einige Operationen ausführen...
    // Antwort zurückgeben
    echo "Empfangener Parameter: " . $param;
}
?>

3. Die Anfrage senden:Wenn der Benutzer auf die Schaltfläche klickt, wird die JavaScript-Funktion sendRequest aufgerufen. Sie erstellt ein XMLHttpRequest-Objekt und sendet die Anfrage an den Server.

4. Die Antwort verarbeiten:Nachdem der Server die Anfrage verarbeitet hat, gibt er das Ergebnis an den Client zurück. Der clientseitige JavaScript-Code prüft den Antwortstatus und aktualisiert den Seiteninhalt, wenn der Status 200 ist (d. h. die Anfrage war erfolgreich).

AJAX-PHP-Beispiel

Das folgende Beispiel zeigt, wie eine Webseite mit einem Webserver kommuniziert, wenn der Benutzer Zeichen in ein Eingabefeld eingibt:

Beispiel

Versuchen Sie, einen Namen in das Eingabefeld einzugeben, zum Beispiel: Anna:

Name:

Rückgabewert:



Erklärung des Beispiels - HTML-Seite

Wenn der Benutzer Zeichen in das obige Eingabefeld eingibt, wird die Funktion "showHint()" ausgeführt. Diese Funktion wird durch das Ereignis "onkeyup" ausgelöst:

Beispiel

<html>
<head>
<script>
function showHint(str)
{
        if (str.length==0)
        {
                document.getElementById("txtHint").innerHTML="";
                return;
        }
        if (window.XMLHttpRequest)
        {
// Code, der von IE7+, Firefox, Chrome, Opera, Safari-Browsern ausgeführt wird
                xmlhttp=new XMLHttpRequest();
        }
        else
        {      
// Code, der von IE6, IE5-Browsern ausgeführt wird
                xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange=function()
        {
                if (xmlhttp.readyState==4 && xmlhttp.status==200)
                {
                        document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
                }
        }
        xmlhttp.open("GET","gethint.php?q="+str,true);
        xmlhttp.send();
}
</script>
</head>
<body>

<p><b>Geben Sie einen Namen in das Eingabefeld ein:</b></p>
<Form>
Name:<input type="text" onkeyup="showHint(this.value)">
</Form>
<p>Rückgabewert:<span id="txtHint"></span></p>

</body>
</html>

Erklärung des Quellcodes:

Wenn das Eingabefeld leer ist (str.length==0), löscht die Funktion den Inhalt des txtHint-Platzhalters und beendet die Funktion.

Wenn das Eingabefeld nicht leer ist, führt showHint() die folgenden Schritte aus:

  • Erstellen Sie ein XMLHttpRequest-Objekt
  • Erstellen einer Funktion, die ausgeführt wird, wenn die Serverantwort bereit ist
  • Senden einer Anfrage an die Datei auf dem Server
  • Beachten Sie den Parameter (q), der am Ende der URL hinzugefügt wird (der den Inhalt des Eingabefelds enthält)

Die oben über JavaScript aufgerufene Serverseite ist eine PHP-Datei namens "gethint.php".

Der Quellcode in "gethint.php" überprüft das Namensarray und gibt dann den/die entsprechenden Namen an den Browser zurück:

Beispiel

<?php
// Die Namen in ein Array einfügen
$a[]="Anna";
$a[]="Brittany";
$a[]="Cinderella";
$a[]="Diana";
$a[]="Eva";
$a[]="Fiona";
$a[]="Gunda";
$a[]="Hege";
$a[]="Inga";
$a[]="Johanna";
$a[]="Kitty";
$a[]="Linda";
$a[]="Nina";
$a[]="Ophelia";
$a[]="Petunia";
$a[]="Amanda";
$a[]="Raquel";
$a[]="Cindy";
$a[]="Doris";
$a[]="Eve";
$a[]="Evita";
$a[]="Sunniva";
$a[]="Tove";
$a[]="Unni";
$a[]="Violet";
$a[]="Liza";
$a[]="Elizabeth";
$a[]="Ellen";
$a[]="Wenche";
$a[]="Vicky";

// Den q-Parameter aus der URL-Adresse der Anfrage abrufen
$q=$_GET["q"];

// Prüfen, ob ein übereinstimmender Wert vorhanden ist, wenn q>0
if (strlen($q) > 0)
{
        $hint="";
        for($i=0; $i<count($a); $i++)
        {
                if (strtolower($q)==strtolower(substr($a[$i],0,strlen($q))))
                {
                        if ($hint=="")
                        {
                                $hint=$a[$i];
                        }
                        else
                        {
                                $hint=$hint." , ".$a[$i];
                        }
                }
        }
}

// Wenn es keinen passenden Wert gibt, setze die Ausgabe auf "no suggestion"
if ($hint == "")
{
        $response="no suggestion";
}
else
{
        $response=$hint;
}

// Rückgabewert ausgeben
echo $response;
?>

Erklärung: Wenn JavaScript irgendeinen Text sendet (d. h. strlen($q) > 0), dann geschieht Folgendes:

  1. Suche nach Namen, die mit den von JavaScript gesendeten Zeichen übereinstimmen
  2. Wenn keine Übereinstimmung gefunden wird, wird die Antwortzeichenfolge auf "no suggestion" gesetzt
  3. Wenn ein oder mehrere übereinstimmende Namen gefunden werden, wird die Antwortzeichenfolge mit allen Namen gefüllt
  4. Senden Sie die Antwort an den Platzhalter "txtHint"

AJAX mit fetch und PHP implementieren

HTML + JavaScript:

Beispiel

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AJAX mit PHP Beispiel</title>
</head>
<body>

<h1>AJAX-Beispiel</h1>
<button id="ajaxButton">Daten von PHP abrufen</button>
<div id="result"></div>

<script>
    document.getElementById('ajaxButton').addEventListener('click', function() {
// AJAX-Anfrage senden
        fetch('server.php', {
method: 'POST', // POST-Anfrage verwenden
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({ message: "Hallo vom Client" })
        })
.then(response => response.json()) // Als JSON parsen
        .then(data => {
document.getElementById('result').innerHTML = data.response; // Seite aktualisieren
        })
        .catch(error => console.error('Fehler:', error));
    });
</script>

</body>
</html>

PHP-Server (server.php):

Beispiel

<?php
// Antwort-Header festlegen, um JSON zu unterstützen
header('Content-Type: application/json');

// Eingabedaten aus der AJAX-Anfrage abrufen
$request = json_decode(file_get_contents("php://input"), wahr);

// Daten verarbeiten und eine Antwort zurückgeben
if ($request['message'] === "Hallo vom Client") {
    $response = array('response' => 'Hallo vom PHP-Server!');
} else {
    $response = array('response' => 'Ungültige Nachricht');
}

// Gib das Ergebnis an den Client zurück
echo json_encode($response);
?>

Erklärung:

  1. Frontend: Wenn der Benutzer auf die Schaltfläche klickt, verwendet JavaScriptfetch()eine POST-Anfrage senden anserver.php, und sendet einen JSON-Datensatz.
  2. Backend: Der PHP-Server liest die vom Client gesendete Anfrage, verarbeitet sie und gibt eine JSON-Antwort zurück.
  3. Antwortverarbeitung: Nachdem JavaScript die Antwort vom PHP-Server empfangen hat, aktualisiert es den Seiteninhalt.

PHP Ajax Cross-Domain-Problemlösungen

Wenn Ihre asynchronen Anfragen domänenübergreifend sein müssen, können Sie Folgendes prüfen:PHP Ajax Cross-Domain-Problemlösungen。

Weitere Erweiterungen