PHP Ajax-Tutorial mit Beispiel

Was ist Ajax?

AJAX vollständige Form ist Asynchron JavaSkript & XML. Es handelt sich um eine Technologie, die die Interaktionen zwischen Server und Client reduziert. Dies geschieht, indem nur ein Teil einer Webseite aktualisiert wird und nicht die ganze Seite. Die asynchronen Interaktionen werden initiiert durch JavaSkript. Der Zweck von AJAX besteht darin, kleine Datenmengen mit dem Server auszutauschen, ohne die Seite zu aktualisieren.

JavaSkript ist eine clientseitige Skriptsprache. Sie wird auf der Clientseite von den Webbrowsern ausgeführt, die JavaSkript.JavaSkriptcode funktioniert nur in Browsern mit JavaSkript aktiviert.

XML ist die Abkürzung für Extensible Markup Language. Sie wird verwendet, um Nachrichten in sowohl menschen- als auch maschinenlesbaren Formaten zu kodieren. Sie ist wie HTML, ermöglicht Ihnen aber die Erstellung eigener Tags. Weitere Einzelheiten zu XML finden Sie im Artikel über XML

Warum AJAX verwenden?

Es ermöglicht die Entwicklung umfangreicher interaktiver Webanwendungen genau wie Desktop-Anwendungen.
Die Validierung kann durchgeführt werden, während der Benutzer ein Formular ausfüllt, ohne es abzusenden. Dies kann durch die automatische Vervollständigung erreicht werden. Die vom Benutzer eingegebenen Wörter werden zur Verarbeitung an den Server übermittelt. Der Server antwortet mit Schlüsselwörtern, die mit der Eingabe des Benutzers übereinstimmen.
Es kann verwendet werden, um ein Dropdown-Feld abhängig vom Wert eines anderen Dropdown-Felds zu füllen
Daten können vom Server abgerufen und nur ein bestimmter Teil einer Seite aktualisiert werden, ohne dass die gesamte Seite geladen wird. Dies ist sehr nützlich für Webseitenteile, die Dinge wie laden
Tweets
Komment
Benutzer, die die Website besuchen usw.

So erstellen Sie eine PHP-Ajax-Anwendung

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

Unsere Anwendung verfügt über ein Textfeld, in das Benutzer die Namen des Frameworks eingeben.

Anschließend suchen wir mit mvc AJAX nach einer Übereinstimmung und zeigen dann den vollständigen Namen des Frameworks direkt unter dem Suchformular 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 JavaSkriptfunktion „showName“ bei jeder Eingabe einer Taste in das Textfeld. 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;

?>

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 Zeichenfolge. Wenn es 0 ist, wird der Rest des Skripts nicht ausgeführt.
„if (window.XMLHttpRequest)…“ Internet Explorer Version 5 und 6 verwenden ActiveXObject für die AJAX-Implementierung. Andere Versionen und Browser wie Chrome, FireFox Verwenden Sie XMLHttpRequest. Dieser Code stellt sicher, dass unsere Anwendung sowohl in IE 5 und 6 als auch in anderen höheren Versionen von IE und Browsern funktioniert.
„xmlhttp.onreadystatechange=function…“ prüft, ob die AJAX-Interaktion abgeschlossen ist und der Status 200 ist, und aktualisiert dann den txtName-Bereich mit den zurückgegebenen Ergebnissen.

Schritt 4) Testen unserer PHP-Ajax-Anwendung

Angenommen, Sie haben die Datei index.php gespeichert. Navigieren Sie in phututs/ajax zur URL http://localhost/phptuts/ajax/index.php

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

Das obige Beispiel zeigt das Konzept von AJAX und wie es uns bei der Erstellung umfassender Interaktionsanwendungen helfen kann.

Zusammenfassung

AJAX ist die Abkürzung für Asynchronous JavaSkript und XML
AJAX ist eine Technologie zur Erstellung umfangreicher Interaktionsanwendungen, die die Interaktionen zwischen dem Client und dem Server reduzieren, indem nur Teile der Webseite aktualisiert werden.
Internet Explorer Version 5 und 6 verwenden ActiveXObject, um AJAX-Operationen zu implementieren.
Internet Explorer Version 7 und höher und Browser Chrome, Firefox, Operaund Safari verwenden XMLHttpRequest.