Was ist Ajax?
In diesem Beitrag werden wir diskutieren, was Ajax ist, die schrittweise Arbeit von Ajax, und durch ein Beispiel gehen, um die Implementierung von Ajax besser zu verstehen.
Was ist Ajax?
Ajax, was für Asynchroner JavaScript und XML, ist eine Methode (keine Programmiersprache), die für Webanwendungen verwendet wird.
Die Abkürzung Xml steht für Erweiterbare Markup -Sprache Das wird verwendet, um Nachrichten so zu verschlüsseln, dass es von Menschen und Maschinen gelesen werden kann. XML ähnelt HTML, aber Sie können Ihre eigenen Tags erstellen und anpassen.
AJAX kommuniziert mit dem Server mit dem XMLHTTPrequest -Objekt, JavaScript/DOM, um Anforderungen und XML als Datenübertragungsmechanismus zu stellen. Es wurde nur populär, als Google es 2005 in Google vorschlug, vorschlägt
Um es in einfache Wörter zu setzen, ist AJAX eine Methode zur Reduzierung der Server-Klienten-Interaktionen, die durch die Aktualisierung eines Teils einer Webseite erreicht werden, anstatt die gesamte Webseite zu aktualisieren. Das Ziel von AJAX ist es, kleine Datenmengen an den Server zu senden, ohne die Seite aktualisieren zu müssen.
Schrittweise Arbeit von Ajax
- Ein Ereignis wird ausgeführt und der Browser erstellt ein XMLHTTPREquest -Objekt, wonach das httprequest an den Server gesendet wird.
- Der Server erhält das HTTPrequest und verarbeitet ihn dann. Nach der Verarbeitung generiert der Server eine Antwort und sendet die Antwort mit einigen Daten an den Browser zurück an den Browser.
- Die zurückgegebenen Daten werden dann vom Browser mit Hilfe von JavaScript verarbeitet und je nach Antwort JavaScript den Inhalt der Webseite aktualisiert.
Lassen Sie uns einige Beispiele durchgehen, um Ajax besser zu verstehen.
Beispiel 1:
In diesem Beispiel wird zeigen, wie der Inhalt eines H2 Tag mit AJAX. Erstens werden wir die Struktur unserer Webseite mit HTML implementieren.
Das XMLHTTPREquest -Objekt
Im obigen Code haben wir a definiert div Container und gab ihm das ID -Attribut, auf das wir diesen Div -Container später in unserem JavaScript -Code verweisen können. Dieser Div -Abschnitt ist so definiert, dass Informationen von einem Server angezeigt werden können. Als nächstes haben wir ein H2 -Tag und eine Taste definiert, an der wir eine bestanden haben ONCLICK Fall. Wenn ein Benutzer auf diese Schaltfläche klickt, wird ein Ereignis generiert und die Funktion änderung () ChangeContent () wird durchgeführt.
functionChangeContent ()// xmlhttprequest -Objektinitialisierung
constXhttp = newxmlHttprequest ();
// Verwenden von Onload-integrierten Funktionen
xhttp.onload = function ()
// Aktualisierung des Divelelementinhalts
dokumentieren.GetElementById ("Beispiel").Innerhtml =
Das.Responsext;
// Datei ajax_info abrufen.txt
xhttp.Öffnen ("get", "ajax_info.txt");
// Anfrage senden
xhttp.schicken();
Jetzt, da wir mit dem HTML -Seiten -Setup fertig sind, müssen wir einen Skriptcode schreiben. Für dieses Tutorial werden wir den JavaScript -Code in den einbeziehen Schild. In unserem Skriptcode müssen wir zunächst die Funktion erstellen änderung () ChangeContent () Dies wird mit dem Klick auf die Schaltfläche ausgeführt. Wir können dies mit den folgenden Codezeilen tun:
functionChangeContent ()// xmlhttprequest -Objektinitialisierung
constXhttp = newxmlHttprequest ();
// Verwenden von Onload-integrierten Funktionen
xhttp.onload = function ()
// Aktualisierung des Divelelementinhalts
dokumentieren.GetElementById ("Beispiel").Innerhtml =
Das.Responsext;
// Datei ajax_info abrufen.txt
xhttp.Öffnen ("get", "ajax_info.txt");
// Anfrage senden
xhttp.schicken();
Wie Sie im obigen Code -Snippet sehen können, generiert die Funktion eine neue XMLHTTPrequest und wartet auf die Antwort vom Server. Nach Erhalt der Antwort wird der Inhalt des DIV durch diese Funktion ersetzt.
Lassen Sie uns nun eine Datei mit dem Namen von erstellen ajax_info.txt und schreiben Sie zum Beispiel einige Dummy -Informationen in diese Datei:
Der gesamte Code ist unten angegeben:
Das XMLHTTPREquest -Objekt
Die Ausgabe des obigen Codes ist unten bereitgestellt:
Wir können sehen, dass der Text, wenn der Benutzer auf die Schaltfläche klickt.TXT -Datei.
Abschluss
JavaScript führt die Codezeile für Zeile aus, die als synchrone Ausführung bezeichnet wird und daher AJAX spielt, da es sich. In der asynchronen Ausführung muss eine Anweisung oder eine Codezeile nicht auf die Bearbeitung der vorherigen Codezeile warten, und beide können parallel ausführen. AJAX wird verwendet, um Daten asynchron zu übertragen und zu empfangen.
In diesem Beitrag haben wir gesehen, was Ajax ist, und dann haben wir festgestellt, wie Ajax den Prozess schrittweise beschreibt, und am Ende haben wir Ihnen ein Beispiel gegeben, um Ihr Konzept klarer zu machen.