Wie Ajax funktioniert | WDD

Wenn Sie bei der herkömmlichen JavaScript-Codierung Informationen aus einer Datenbank oder einer Datei auf dem Server abrufen oder Benutzerinformationen an einen Server senden möchten, müssen Sie ein HTML-Formular erstellen und Daten per GET oder POST an den Server senden. Der Benutzer muss auf die Schaltfläche „Senden“ klicken, um die Informationen zu senden/abzurufen, auf die Antwort des Servers warten und dann wird eine neue Seite mit den Ergebnissen geladen. Da der Server jedes Mal, wenn der Benutzer eine Eingabe übermittelt, eine neue Seite zurückgibt, können herkömmliche Webanwendungen langsam laufen 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 an einen Webserver stellen und von diesem eine Antwort erhalten, ohne die Seite neu laden zu müssen. Der Benutzer bleibt auf der gleichen Seite und bemerkt nicht, dass Skripte Seiten anfordern oder im Hintergrund Daten an einen Server senden. Dieses Bild ist eine vereinfachte Einführung in die Funktionsweise von Ajax:

Der Benutzer sendet eine Anfrage, die eine Aktion ausführt, und die Antwort der Aktion wird in einer durch eine ID identifizierten Ebene angezeigt, ohne dass die gesamte Seite neu geladen werden muss. Zum Beispiel eine Ebene mit dieser ID:

In den nächsten Schritten erfahren Sie, wie Sie eine XMLHttpRequest erstellen und eine Antwort vom Server erhalten.

Lesen:  Die Phänomene des mobilen Einkaufens im Einzelhandel

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 namens XMLHttpRequest verwenden. Um dieses Objekt zu erstellen und mit verschiedenen Browsern umzugehen, verwenden wir eine „Try and Catch“-Anweisung.

Funktion ajaxFunction() { var xmlHttp; try { // Firefox, Opera 8.0+, Safari xmlHttp=new XMLHttpRequest(); } Catch (e) { // Internet Explorer try { xmlHttp=new ActiveXObject(“Msxml2.XMLHTTP”); } Catch (e) { try { xmlHttp=new ActiveXObject(“Microsoft.XMLHTTP”); } Catch (e) { Alert(“Ihr Browser unterstützt AJAX nicht!”); falsch zurückgeben; } } }

2. Senden einer Anfrage an den Server

Um eine Anfrage an den Server zu senden, verwenden wir die Methoden open() und send(). 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 Anfrage asynchron bearbeitet werden soll. Die Methode send() sendet die Anfrage an den Server.

xmlHttp.open(“GET”,”time.asp”,true); xmlHttp.send(null);

3. Schreiben eines serverseitigen Skripts

Der Antworttext speichert die vom Server zurückgegebenen Daten. Hier wollen wir die aktuelle Uhrzeit zurücksenden. Der Code in „time.asp“ sieht folgendermaßen aus:

<% Response.expires=-1 Response.write(time) %>

4. Die Antwort konsumieren

Jetzt müssen wir die erhaltene Antwort verarbeiten und dem Benutzer anzeigen.

xmlHttp.onreadystatechange=function() { 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 „Benutzername“ eingibt. Der komplette Code sieht so aus:

Name: Zeit:

Aktuelle Artikel:

Empfohlen