Wie funktioniert Ajax?
Wenn Sie bei herkömmlicher JavaScript-Codierung Informationen aus einer Datenbank oder Datei auf dem Server abrufen oder Benutzerinformationen an einen Server senden möchten, müssen Sie ein HTML-Formular erstellen und GET- oder POST-Daten an den Server senden. Der Benutzer muss auf die Schaltfläche "Senden" klicken, um die Informationen zu senden / abzurufen, auf die Antwort des Servers zu warten, und dann wird eine neue Seite mit den Ergebnissen geladen.
Da der Server jedes Mal, wenn der Benutzer Eingaben sendet, eine neue Seite zurückgibt, können herkömmliche Webanwendungen langsam ausgeführt werden und sind tendenziell weniger benutzerfreundlich. Mit AJAX kommuniziert Ihr JavaScript direkt mit dem Server über das JavaScript XMLHttpRequest-Objekt.
Mit einer HTTP-Anfrage kann eine Webseite eine Anfrage stellen und eine Antwort von einem Webserver erhalten, ohne die Seite neu zu laden. Der Benutzer bleibt auf der gleichen Seite und er oder sie wird nicht bemerken, dass Skripts Seiten anfordern oder Daten an einen Server im Hintergrund senden.
Dieses Bild ist eine vereinfachte Einführung darüber, wie Ajax funktioniert:
Der Benutzer sendet eine Anforderung, die eine Aktion ausführt, und die Antwort der Aktion wird in einer Schicht angezeigt, identifiziert durch eine ID, ohne die gesamte Seite neu zu laden. Zum Beispiel eine Ebene mit dieser ID:
In den nächsten Schritten werden wir sehen, wie Sie eine XMLHttpRequest erstellen und eine Antwort vom Server erhalten.
1. Erstellen Sie XMLhttpRequest
Verschiedene Browser verwenden unterschiedliche Methoden zum Erstellen des XMLHttpRequest-Objekts. Internet Explorer verwendet ein ActiveXObject, während andere Browser das integrierte JavaScript-Objekt XMLHttpRequest verwenden.
Um dieses Objekt zu erstellen und mit verschiedenen Browsern zu arbeiten, verwenden wir eine "try and catch" -Anweisung.
Funktion ajaxFunction ()
{
var xmlHttp;
Versuchen
{
// Firefox, Opera 8.0+, Safari
xmlHttp = neues XMLHttpRequest ();
}
fangen (e)
{
// Internet Explorer
Versuchen
{
xmlHttp = neues ActiveXObject ("Msxml2.XMLHTTP");
}
fangen (e)
{
Versuchen
{
xmlHttp = neues ActiveXObject ("Microsoft.XMLHTTP");
}
fangen (e)
{
alert ("Ihr Browser unterstützt AJAX nicht!");
falsch zurückgeben;
}
}
}
2. Sende eine Anfrage an den Server
Um eine Anfrage an den Server zu senden, verwenden wir die open () - Methode und die send () -Methode.
Die open () -Methode benötigt drei Argumente. Das erste Argument definiert, welche Methode beim Senden der Anfrage verwendet werden soll (GET oder POST). Das zweite Argument gibt die URL des serverseitigen Skripts an. Das dritte Argument gibt an, dass die Anforderung asynchron behandelt werden soll. Die Methode send () sendet die Anfrage an den Server.
xmlHttp.open ("GET", "time.asp", true);
xmlHttp.send (null);
3. Schreibendes serverseitiges Skript
Der responseText speichert die vom Server zurückgegebenen Daten. Hier wollen wir die aktuelle Uhrzeit zurücksenden. Der Code in "time.asp" sieht folgendermaßen aus:
<%
Antwort.expires = -1
Antwort.Schreiben (Zeit)
%>
4. Die Antwort konsumieren
Jetzt müssen wir die empfangene Antwort konsumieren und sie dem Benutzer anzeigen.
xmlHttp.onreadystatechange = Funktion ()
{
if (xmlHttp.readyState == 4)
{
document.myForm.time.value = xmlHttp.responseText;
}
}
xmlHttp.open ("GET", "time.asp", true);
xmlHttp.send (null);
}
5. Vervollständigen Sie den Code
Jetzt müssen wir entscheiden, wann die AJAX-Funktion ausgeführt werden soll. Wir lassen die Funktion "hinter den Kulissen" laufen, wenn der Benutzer etwas in das Textfeld des Benutzernamens eingibt. Der vollständige Code sieht so aus: