PHP Ajax Tutorial mit Beispiel

Inhaltsverzeichnis:

Anonim

Was ist Ajax?

Die vollständige AJAX- Form ist asynchrones JavaScript und XML. Es ist eine Technologie, die die Interaktionen zwischen Server und Client reduziert. Dazu wird nur ein Teil einer Webseite und nicht die gesamte Seite aktualisiert. Die asynchronen Interaktionen werden von JavaScript initiiert. Der Zweck von AJAX besteht darin, kleine Datenmengen ohne Seitenaktualisierung mit dem Server auszutauschen.

JavaScript ist eine clientseitige Skriptsprache. Es wird auf der Clientseite von den Webbrowsern ausgeführt, die JavaScript unterstützen. JavaScript-Code funktioniert nur in Browsern, in denen JavaScript aktiviert ist.

XML ist die Abkürzung für Extensible Markup Language. Es wird verwendet, um Nachrichten sowohl in für Menschen als auch für Maschinen lesbaren Formaten zu codieren. Es ist wie HTML, ermöglicht es Ihnen jedoch, Ihre benutzerdefinierten Tags zu erstellen. Weitere Informationen zu XML finden Sie im Artikel zu XML

Warum AJAX verwenden?

  • Es ermöglicht die Entwicklung umfangreicher interaktiver Webanwendungen wie Desktopanwendungen.
  • Die Validierung kann durchgeführt werden, wenn der Benutzer ein Formular ausfüllt, ohne es zu senden. Dies kann durch automatische Vervollständigung erreicht werden. Die vom Benutzer eingegebenen Wörter werden zur Verarbeitung an den Server gesendet. Der Server antwortet mit Schlüsselwörtern, die mit den vom Benutzer eingegebenen ü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 werden muss. Dies ist sehr nützlich für Webseiten-Teile, die Dinge wie laden
    • Tweets
    • Kommt
    • Benutzer, die die Website besuchen usw.

So erstellen Sie eine PHP Ajax-Anwendung

Wir werden eine einfache Anwendung erstellen, mit der Benutzer nach gängigen PHP MVC-Frameworks suchen können.

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

Wir werden dann mvc AJAX verwenden, um nach einer Übereinstimmung zu suchen, und dann den vollständigen Namen des Frameworks direkt unter dem Suchformular anzeigen.

Schritt 1) ​​Erstellen der Indexseite

Index.php

PHP MVC Frameworks - Search Engine

PHP MVC Frameworks - Search Engine


Type the first letter of the PHP MVC Framework








Matches:

HIER,

  • "Onkeyup =" showName (this.value) "" führt die JavaScript-Funktion showName jedes Mal aus, wenn ein Schlüssel in das Textfeld eingegeben wird.

    Diese Funktion wird als automatische Vervollständigung bezeichnet

Schritt 2) Erstellen der Frameworks-Seite

Frameworks.php

 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 textboxdocument.getElementById("txtName").innerHTML; //clear previous resultsreturn;}if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safarixmlhttp=new XMLHttpRequest();} else {// code for IE6, IE5xmlhttp=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)" Überprüfen Sie die Länge der Zeichenfolge. Wenn es 0 ist, 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 XMLHttpRequest. Dieser Code stellt sicher, dass unsere Anwendung sowohl in IE 5 und 6 als auch in anderen Hochversionen von IE und Browsern funktioniert.
  • "Xmlhttp.onreadystatechange = function ..." prüft, ob die AJAX-Interaktion abgeschlossen ist und der Status 200 lautet, und aktualisiert dann die txtName-Spanne 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 helfen kann, umfangreiche Interaktionsanwendungen zu erstellen.

Zusammenfassung

  • AJAX ist die Abkürzung für Asynchronous JavaScript and XML
  • AJAX ist eine Technologie, mit der umfangreiche Interaktionsanwendungen erstellt werden, die die Interaktionen zwischen Client und Server reduzieren, indem nur Teile der Webseite aktualisiert werden.
  • Internet Explorer Version 5 und 6 verwenden ActiveXObject, um AJAX-Vorgänge zu implementieren.
  • Internet Explorer Version 7 und höher sowie die Browser Chrome, Firefox, Opera und Safari verwenden XMLHttpRequest.