Einführung in Ajax Calls

Veröffentlicht: 2021-11-01

Willkommen zu unserer Einführung in Ajax! In diesem Artikel werden wir die Grundlagen von Ajax durchgehen und wie es in einem realen Beispiel verwendet wird. Wir sehen uns auch ein Beispiel für einen Ajax-PHP-Aufruf an. Obwohl wir unser Bestes getan haben, um dieses Tutorial zu vereinfachen, sind Grundkenntnisse in Javascript, PHP und WordPress sehr wichtig, um das Folgende vollständig zu verstehen. In diesem Sinne fangen wir an!

Was ist Ajax?

Ajax steht für Asynchronous JavaScript and XML.

Ajax ist keine Programmiersprache, sondern eine Reihe von Techniken, die vorhandene Webtechnologien kombinieren, um bessere Webanwendungen zu erstellen.

Verbesserung von Websites mit Ajax

Ajax hat eine Vielzahl von Verwendungsmöglichkeiten. Eine der Top-Funktionen unter diesen sind Ajax-Aufrufe. Ajax-Aufrufe ermöglichen es einer Website, einen Teil ihres Inhalts bei einer Benutzeraktion zu aktualisieren, ohne dass die Seite neu geladen werden muss. Im Gegensatz zu einer normalen HTTP-Anfrage müssen wir daher nicht auf die Antwort des Servers warten, um die Interaktion mit der Website fortzusetzen.

Herkömmlicherweise werden HTTP-Anforderungen an einen Webserver gesendet, und nachdem sie verarbeitet wurden, gibt der Server die aktualisierte Ausgabe beim Laden einer neuen Seite zurück. In einer Ajax-Anfrage geschieht diese Aktionsfolge hinter den Kulissen asynchron, sodass der Benutzer nicht unterbrochen wird. Das verbessert die Interaktivität und Reaktionsfähigkeit und macht die Website dynamischer.

Wie funktioniert ein Ajax Call?

Ein Ajax-Aufruf beginnt damit, dass der Endbenutzer eine Aktion am Frontend einer Website ausführt (z. B. das Klicken auf eine Schaltfläche). Wenn diese Aktion ausgeführt wird, wird ein Javascript-Ereignis ausgelöst und sein Listener ruft eine Funktion auf.

Innerhalb der Funktion wird der Ajax-Aufruf ausgelöst und mit Hilfe von XML die Informationen verpackt und die Anfrage an ein Serverskript gesendet.

H INWEIS : Heutzutage wird JSON in fast allen Fällen gegenüber XML bevorzugt, da es schneller, einfacher zu lesen und zu programmieren ist und vieles mehr.

Innerhalb des Skripts wird die Anfrage mit Hilfe einer serverseitigen Skriptsprache wie PHP, Java, Ruby, Python usw. verarbeitet.

Die Antwort wird an den Client zurückgesendet und eine Callback-Funktion aktualisiert den entsprechenden Inhaltsteil mit den empfangenen Daten.

Schauen wir uns an einem Beispiel an, wie das funktioniert

Ein einfaches Beispiel für einen Ajax-Aufruf

Lassen Sie uns eine Suchanwendung erstellen, mit der Sie die Suchergebnisse in Echtzeit anzeigen können, wenn Sie eine Liste mit Artikeltiteln durchsuchen.

Wir werden PHP als serverseitige Skriptsprache verwenden und Sie aus der Sicht des Endbenutzers durch diese führen.

Schritt 1: Das HTML-Formular

Zuerst brauchen wir ein Textfeld, das der Benutzer mit Text füllt und an dem das Ergebnis angezeigt wird. Lassen Sie uns also ein einfaches HTML-Formular und ein Element erstellen, das die Ergebnisse anzeigt.

 <html> <body> <p><b>Search in articles:</b></p> <form> <input type="text" onkeyup="foundArticles(this.value)"> </form> <p>Articles available: <span></span></p> </body> </html>

Schritt 2: Javascript-Funktion

Wenn ein Benutzer Text eingibt, möchten wir Ergebnisse in Echtzeit sehen, sofern verfügbar. Wir verwenden das Javascript-Ereignis onkeyup, das eine Funktion auslöst, wenn der Benutzer eine Taste auf der Tastatur loslässt.

Die Funktion muss den aktuellen Text als Parameter erhalten, um den Vorgang fortzusetzen.

 <html> <body> <p><b>Search in articles:</b></p> <form> <input type="text" onkeyup="foundArticles(this.value)"> </form> <p>Articles available: <span></span></p> <script type="text/javascript"> function foundArticles(str) { } </script> </body> </html>

Lassen Sie uns die Funktion ausfüllen.

Schritt 3: Die Anfrage

Innerhalb der Funktion müssen wir zunächst ein XMLHttpRequest -Objekt erstellen, um mit dem Server zu interagieren, und dann eine andere Funktion aufrufen, die etwas mit dem in unserer Funktion foundArticles() übergebenen Wert macht.

In dem oben beschriebenen Prozess wird die Interaktion mit dem Server unter Verwendung eines Javascript XMLHttpRequest.onready Statechange-Ereignishandlers erreicht, der aufgerufen wird, wenn die readyState Eigenschaft geändert wird. Lassen Sie uns diese Schritte weiter verdeutlichen:.

  • Die readyState Eigenschaft gibt den Zustand einer XMLHttpRequest zurück, in dem sich ein Client befindet.
  • Immer wenn sich der readyState ändert, wird das readystatechange Ereignis ausgelöst.
  • Die Eigenschaft onreadystatechange enthält den Ereignishandler, der aufgerufen werden soll, wenn das Ereignis readystatechange ausgelöst wird.

Schritt 4: Was ist mit der Anfrage zu tun?

Jetzt müssen wir etwas tun, wenn die Operation abgeschlossen ist, und nachdem wir nachgesehen haben, welche Status verfügbar sind, setzen wir dies auf Status 4.

Wenn die Operation abgeschlossen ist, sollte also der Text im HTML-Element mit der ID txtHint durch die Antwort des Servers ersetzt werden. In diesem Fall müssen wir die Eigenschaft responseText verwenden, die den vom Server empfangenen Text zurückgibt, nachdem die Anfrage gesendet wurde.

Lassen Sie uns nun den Code in die Funktion foundArticles() , der dem entspricht, was wir gerade oben beschrieben haben.

 function foundArticles(str) { var xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange = function() { if ( this.readyState == 4 ) { document.getElementById("txtHint").innerHTML = this.responseText; } } }

HINWEIS: Wir müssen hier darauf hinweisen, dass das Rendern von HTML auf diese Weise, ohne es zu maskieren, aus Sicherheitsgründen eine schlechte Praxis ist, und wir tun dies nur für dieses Tutorial, damit der Code so einfach wie möglich gehalten wird. Verwenden Sie sicherheitshalber keinen der in diesem Artikel bereitgestellten Codes für den realen Gebrauch!

Als nächstes müssen wir die Anfrage an den Server senden und die zurückgegebenen Daten verwenden.

Schritt 5: Die Daten

In diesem Beispiel werden die Daten in einer PHP-Datei gespeichert. Wir erstellen eine data.php -Datei im selben Ordner und fügen den folgenden Code ein:

 <?php // We fill in the posts array with the data to look up to $posts = array( "C Language course", "C++ course", "About Bootstrap", "Learn to write HTML", "All about SS", "CSS3 course", "JAVA course", "JavaScript tutorials", "Learn PHP", "MySQL examples", "Learn Python", "AngularJS", "Photoshop Tutorials", "C#", "ASP.NET", "SAP", "ORACLE", "Wordpress CMS for beginners", "Build your own Android app", "All about SEO", "Illustrator", "Flash", "Action Script" ); // We get the requested value from the URL and store it in a variable $req = $_REQUEST["req"]; $autocomplete = ""; // Iterate $posts if $req is not empty if ($req !== "") { $req = strtolower($req); foreach($posts as $name) { $lowname = strtolower($name); if ( strpos( $lowname , $req ) !== false ) { $autocomplete = $name; } } } // Output echo $autocomplete === "" ? "no suggestion" : $autocomplete;

Lassen Sie sich nicht verwirren von $req = $_REQUEST["req"]; Linie. Auf diese Weise ruft das Skript die Abfrage in der Datei custom.js , die wir uns gleich ansehen werden.

Schritt 6: Methoden anfordern

Wir werden die open()-Methode unseres XMLHttpRequest -Objekts verwenden, um die Anfrage zu initialisieren, und die send()-Methode, um Daten mit dem Server auszutauschen.

Die Parameter, die wir für die Methode open() verwenden, sind:

  • Die Methode. Gemeint ist die HTTP-Anfragemethode („GET“, „POST“, „PUT“, „DELETE“ usw.).
  • Die URL, an die die Anfrage gesendet werden soll.
 function foundArticles(str) { var xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange = function() { if ( this.readyState == 4 ) { document.getElementById("txtHint").innerHTML = this.responseText; } } xmlhttp.open("GET", "data.php?req=" + str, true); xmlhttp.send(); }

Wie Sie sehen können, initialisiert die Methode open() eine GET-Anforderung an die URL „data.php?req=“ + str.

Die URL wird dann von $req = $_REQUEST[„req“]; Variable in der Datei data.php , um den Wert abzurufen.

Sehen wir uns ein Bild der Beispielanfrage an:

An dieser Stelle sollte das Formular ordnungsgemäß funktionieren. Wenn Sie das Wort „Kurs“ eingeben, sollte das Ergebnis lauten:

„C-Sprachkurs“,
„C++-Kurs“,
„CSS3-Kurs“,
„JAVA-Kurs“.

Fazit

Dies war ein Beispiel für ein sehr einfaches Beispiel für eine Ajax-Anfrage, die eine sehr beliebte Technik zum Erstellen von Websites ist. Obwohl es einfach ist, haben wir Sie hoffentlich dem Verständnis des Routings in solchen Anfragen näher gebracht, und dies könnte Ihnen helfen, mit dem Codieren Ihrer eigenen zu beginnen. In einem nächsten Artikel werden wir Ajax in einer WordPress-Umgebung erneut besuchen, also bleiben Sie dran!