AJAX Tutorial: Was AJAX ist und wie man es benutzt

Was ist AJAX?

AJAX steht für Asynchronous JavaScript And XML . Es ist keine Programmiersprache. Es ist eine Technologie zur Entwicklung besserer, schnellerer und interaktiver Webanwendungen mit HTML, CSS, JavaScript und XML.

  1. HTML: Hypertext Markup Language (HTML) wird zum Definieren der Struktur einer Webanwendung verwendet.
  2. CSS: Cascading Style Sheet (CSS) wird verwendet, um einer Webanwendung Aussehen und Stil zu verleihen.
  3. JavaScript: JavaScript wird verwendet, um eine Webanwendung interaktiv, interessant und benutzerfreundlich zu gestalten.
  4. XML: Extensible Markup Language (XML) ist ein Format zum Speichern und Transportieren von Daten vom Webserver.

Was bedeutet Asynchron in AJAX?

Asynchron bedeutet, dass die Webanwendung Daten vom Webserver senden und empfangen kann, ohne die Seite zu aktualisieren. Dieser Hintergrundprozess zum Senden und Empfangen von Daten vom Server sowie zum Aktualisieren verschiedener Abschnitte einer Webseite definiert die asynchrone Eigenschaft / Funktion von AJAX.

Wie AJAX funktioniert

AJAX verwendet ein im Browser integriertes XMLHttpRequest-Objekt , um Daten von einem Webserver anzufordern, und ein HTML-DOM , um die Daten anzuzeigen oder zu verwenden.

XMLHttpRequest-Objekt : Es handelt sich um eine API in Form eines Objekts, dessen Methoden bei der Datenübertragung zwischen einem Webbrowser und einem Webserver helfen.

HTML-DOM : Wenn eine Webseite geladen wird, erstellt der Browser ein Dokumentobjektmodell der Seite.

Erstellen Sie ein XMLHttpRequest-Objekt:

var xhttp = new XMLHttpRequest();

Eigenschaften des XMLHttpRequest-Objekts:

readystate ist eine Eigenschaft des XMLHttpRequest-Objekts, die den Status des XMLHttpRequest enthält.

  • 0: Anfrage nicht initialisiert
  • 1: Serververbindung hergestellt
  • 2: Anfrage erhalten
  • 3: Verarbeitungsanforderung
  • 4: Anfrage beendet und Antwort ist bereit

`` `onreadystatechange``` ist eine Eigenschaft des XMLHttpRequest-Objekts, die eine Funktion definiert, die aufgerufen werden soll, wenn sich die readyState-Eigenschaft ändert.

`` `status``` ist eine Eigenschaft des XMLHttpRequest-Objekts, die die Statusnummer einer Anforderung zurückgibt

  • 200: "OK"
  • 403 Verboten"
  • 404 Nicht gefunden"

XMLHttpRequest-Objektmethoden: Um eine Anforderung an einen Webserver zu senden, verwenden wir die Methoden open () und send () des XMLHttpRequest-Objekts.

xhttp.open("GET", "content.txt", true); xhttp.send();

Erstellen Sie eine Funktion changeContent () mit JavaScript:

function changeContent() { var xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { document.getElementById("foo").innerHTML = this.responseText; } }; xhttp.open("GET", "content.txt", true); xhttp.send(); }

AJAX-Beispiel zum Ändern des Inhalts einer Webseite:

The XMLHttpRequest Object

Change Content function changeContent() { var xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { document.getElementById("foo").innerHTML = this.responseText; } }; xhttp.open("GET", "content.txt", true); xhttp.send(); }

Die Datei content.txtsollte im Stammverzeichnis der Webanwendung vorhanden sein.