PHP Ajax-Tutorial mit Beispiel

By: Fiona Braun Fiona Braun
Hours Aktualisiert

⚡ Intelligente Zusammenfassung

Ajax in PHP ermöglicht es Webseiten, kleine Datenmengen mit dem Server auszutauschen und Teile der Seite zu aktualisieren, ohne dass ein vollständiges Neuladen erforderlich ist. Diese Anleitung erstellt eine interaktive Suchfunktion und erklärt den klassischen XMLHttpRequest-Ansatz sowie die moderne Alternative der Fetch API.

  • 🔄 Was Ajax ist: Ajax, asynchron JavaSkript und XML, aktualisiert einen Teil einer Seite durch Datenaustausch mit dem Server, ohne dass eine vollständige Neuladung erforderlich ist.
  • ⚡ Warum es verwenden: Ajax ermöglicht umfangreiche, desktopähnliche Funktionen wie Autovervollständigung, Live-Validierung und abhängige Dropdown-Menüs.
  • ️ Client und Server: JavaDas Skript läuft im Browser und ruft ein PHP-Skript auf, das genau die Daten zurückgibt, die zum Aktualisieren der Seite benötigt werden.
  • 🔍 Live-Suche: Ein onkeyup-Handler sendet jeden Tastendruck an ein PHP-Skript, das sofort die passenden Framework-Namen zurückgibt.
  • 📜 XMLHttpRequest: Der klassische Ansatz erstellt ein XMLHttpRequest-Objekt und liest responseText, wenn die Anfrage abgeschlossen ist.
  • 🆕 Fetch API: Moderner Code ersetzt XMLHttpRequest durch die Promise-basierte fetch-Funktion für sauberere, lesbare Anfragen.
  • 🤖 KI-Assistent: KI-Tools können alten XMLHttpRequest-Code in fetch oder axios konvertieren und bei der Fehlersuche bei fehlgeschlagenen Ajax-Anfragen helfen.
MEHR LESEN

PHP Ajax

Was ist Ajax?

AJAX steht für asynchron JavaSkript XML ist eine Technologie, die die Interaktionen zwischen Server und Client reduziert. Dies geschieht, indem nur ein Teil einer Webseite anstatt der gesamten Seite aktualisiert wird. Die asynchronen Interaktionen werden initiiert durch JavaSkript. Der Zweck von AJAX besteht darin, kleine Datenmengen mit dem Server auszutauschen, ohne dass die Seite neu geladen werden muss.

JavaSkript ist eine clientseitige Skriptsprache. Sie wird clientseitig von Webbrowsern ausgeführt, die unterstützen. JavaSkript. JavaSkriptcode funktioniert nur in Browsern mit JavaSkript aktiviert.

XML XML ist die Abkürzung für Extensible Markup Language. Es dient dazu, Nachrichten in sowohl für Menschen als auch für Maschinen lesbaren Formaten zu kodieren. Es ähnelt HTML, ermöglicht aber die Erstellung eigener Tags. Weitere Informationen zu XML finden Sie im Artikel zu [Link einfügen]. XML.

Warum AJAX verwenden?

  • Es ermöglicht die Entwicklungping Umfangreiche, interaktive Webanwendungen, genau wie Desktop-Anwendungen.
  • Die Validierung kann bereits während des Ausfüllens eines Formulars erfolgen, ohne es abzusenden. Dies lässt sich durch automatische Vervollständigung realisieren. Die vom Benutzer eingegebenen Wörter werden zur Verarbeitung an den Server gesendet, der anschließend passende Schlüsselwörter zurückgibt.
  • Es kann verwendet werden, um eine Dropdown-Liste abhängig vom Wert einer anderen Dropdown-Liste zu füllen.
  • Daten können vom Server abgerufen und nur ein bestimmter Teil einer Seite aktualisiert werden, ohne die gesamte Seite neu zu laden. Dies ist sehr nützlich für Webseitenbereiche, die beispielsweise folgende Elemente laden:
    • Tweets
    • Kommentare
    • Nutzer, die die Website besuchen, und ähnliche Live-Daten.

Wie man eine PHP-Ajax-Anwendung erstellt

Wir erstellen eine einfache Anwendung, mit der Benutzer nach beliebten PHP-MVC-Frameworks suchen können.

Unsere Anwendung wird ein Textfeld enthalten, in dem die Benutzer die Namen der Frameworks eingeben.

Anschließend verwenden wir AJAX, um nach einer Übereinstimmung zu suchen und zeigen dann den vollständigen Namen des Frameworks direkt unterhalb des Suchformulars an.

Schritt 1) ​​Erstellen der Indexseite

index.php

<html>

<head>

<title>PHP MVC Frameworks - Search Engine</title>

<script type="text/javascript" src="auto_complete.js"></script>

</head>

<body>

<h2>PHP MVC Frameworks - Search Engine</h2>

<p><b>Type the first letter of the PHP MVC Framework</b></p>

<form method="POST" action="index.php">

<p><input type="text" size="40" id="txtHint" onkeyup="showName(this.value)"></p>

</form>

<p>Matches: <span id="txtName"></span></p>

</body>

</html>

HIER,

  • „onkeyup=“showName(this.value)““ führt den JavaDie Skriptfunktion `showName` wird jedes Mal aufgerufen, wenn eine Taste im Textfeld eingegeben wird. Diese Funktion wird als Autovervollständigung bezeichnet.

Schritt 2) Erstellen der Frameworks-Seite

Frameworks.php

<?php

$frameworks = array("CodeIgniter","Zend Framework","Cake PHP","Kohana") ;

$name = $_GET["name"];

if (strlen($name) > 0) {

$match = "";

for ($i = 0; $i < count($frameworks); $i++) {

if (strtolower($name) == strtolower(substr($frameworks[$i], 0, strlen($name)))) {

if ($match == "") {

$match = $frameworks[$i];

} else {

$match = $match . " , " . $frameworks[$i];

}

}

}

}

echo ($match == "") ? 'no match found' : $match;

?>
Nicht verpassen:

Schritt 3) Erstellen des JS-Skripts

auto_complete.js

function showName(str){

if (str.length == 0){ // exit function if nothing has been typed in the textbox

document.getElementById("txtName").innerHTML=""; // clear previous results

return;

}

if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari

xmlhttp=new XMLHttpRequest();

} else {// code for IE6, IE5

xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

}

xmlhttp.onreadystatechange=function() {

if (xmlhttp.readyState == 4 && xmlhttp.status == 200){

document.getElementById("txtName").innerHTML=xmlhttp.responseText;

}

}

xmlhttp.open("GET","frameworks.php?name="+str,true);

xmlhttp.send();

}

HIER,

  • „if (str.length == 0)“ prüft die Länge der Zeichenkette. Ist diese 0, wird der Rest des Skripts nicht ausgeführt.
  • „if (window.XMLHttpRequest)…“ Internet Explorer Versionen 5 und 6 verwenden ActiveXObject für die AJAX-Implementierung. Andere Versionen und Browser wie Chrome und Firefox Verwenden Sie XMLHttpRequest. Dieser Code stellt sicher, dass unsere Anwendung sowohl im Internet Explorer 5 und 6 als auch in modernen Browsern funktioniert.
  • „xmlhttp.onreadystatechange=function…“ prüft, ob die AJAX-Interaktion abgeschlossen ist und der Status 200 lautet, und aktualisiert dann den txtName-Span mit den zurückgegebenen Ergebnissen.

Schritt 4) Testen unserer PHP-Ajax-Anwendung

Angenommen, Sie haben die Datei index.php in phptuts/ajax gespeichert, navigieren Sie zu URL http://localhost/phptuts/ajax/index.php

Testen unserer PHP-Ajax-Anwendung

Geben Sie den Buchstaben C in das Textfeld ein. Sie erhalten folgende Ergebnisse.

Testen unserer PHP-Ajax-Anwendung

Das obige Beispiel veranschaulicht das Konzept von AJAX und wie es uns helfen kann, interaktive Anwendungen mit hohem Funktionsumfang zu erstellen.

Modernes AJAX mit der Fetch API

Das oben genannte XMLHttpRequest-Objekt funktioniert weiterhin, aber sein ActiveXObject-Zweig für ältere Internet Explorer wird nicht mehr benötigt. Moderne Browser bieten die Promise-basierte Fetch API, die dieselbe Anfrage mit deutlich weniger Code ausführt.

function showName(str) {
    if (str.length === 0) {
        document.getElementById("txtName").innerHTML = "";
        return;
    }
    fetch("frameworks.php?name=" + encodeURIComponent(str))
        .then(response => response.text())
        .then(text => {
            document.getElementById("txtName").innerHTML = text;
        });
}

Diese Version erfüllt dieselbe Funktion: Sie sendet den eingegebenen Text an frameworks.php und fügt die Antwort in das txtName-Span ein. Außerdem verwendet sie encodeURIComponent, um die Eingabe sicher zu maskieren, und ihre Promise-Kette lässt sich mithilfe eines catch-Blocks leicht um eine Fehlerbehandlung erweitern.

Häufig gestellte Fragen

Eine synchrone Anfrage blockiert den Browser, bis der Server antwortet, wodurch die Seite einfriert. Eine asynchrone Anfrage wird im Hintergrund ausgeführt, sodass die Seite reaktionsfähig bleibt und sich aktualisiert, sobald die Daten eintreffen. Ajax verwendet das asynchrone Modell.

Bei der Verwendung von `fetch` wird ein zweites Argument übergeben, das die Methode auf `POST` und den Body festlegt. Anschließend wird `$_POST` in PHP gelesen. Bei `XMLHttpRequest` wird `open('POST', url)` aufgerufen, der Content-Type-Header gesetzt und die kodierten Daten gesendet.

CORS (Cross-Origin Resource Sharing) blockiert Browseranfragen an eine andere Domain, es sei denn, der Server sendet den korrekten Access-Control-Allow-Origin-Header. Fügen Sie den Header auf PHP-Seite hinzu oder rufen Sie eine Same-Origin-Anfrage auf. URL etwas reparieren.

Ja. Fügen Sie den XMLHttpRequest-Code ein, und AI kann ihn mithilfe der Promise-basierten Fetch-API oder Axios umschreiben, Fehlerbehandlung hinzufügen und das gleiche Verhalten beibehalten. Testen Sie das Ergebnis, da die Antwortverarbeitung geringfügig abweicht.

Ja. Teilen Sie den Anfragecode und die Browserkonsole oder den Netzwerkfehler mit, damit die KI einen Fehler erkennen kann. URLWenn es sich um eine CORS-Sperre, einen fehlenden Parameter oder einen Serverfehler handelt, schlagen Sie dann eine Lösung vor.

Fassen Sie diesen Beitrag mit folgenden Worten zusammen: