jQuery: AJAX-Lösungen

AJAX mit Vanilla-JavaScript

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Sehen Sie am praktischen Beispiel, wie man AJAX-Abfragen mit JavaScript "pur" durchführt.

Transkript

Sehen wir uns einmal an, wie Ajax mit JavaScript Pure funktioniert. Beginnen wir dabei aber mit der nicht Ajax-Variante. Ich habe ein kleines Formular und da kann ich eine Sprache auswählen, und erhalte dann auf einer anderen Seite diese Grußkarte mit dem Text in der gewählten Sprache angezeigt. Sehen wir uns einmal an, wie man das realisiert. Erst einmal brauche ich dafür natürlich ein Formular. Hier ist mein Formular. Und in dem Formular stehen die Option-Elemente, wo man auswählen kann, welche Sprache man haben möchte. Und außerdem, ganz wichtig, gibt es in dem "form"-Starttag das "action"-Attribut, und in diesem ist ein PHP-Script angegeben. Sehen wir uns mal dieses PHP-Script an. Das ist eine vollständige HTML-Seite, und die hat an dieser Stelle ein PHP-Teil. Was geschieht innerhalb dieses PHP-Teils? Es wird überprüft, ob die Sprache gesetzt ist. Und wenn das der Fall ist, wird überprüft, was für ein Wert angegeben ist. Und je nach Wert, werden dann die unterschiedlichen Begrüßungen mit "echo" ausgegeben. Und diese Seite wird aufgerufen, wenn man das Formular abschickt. Das war jetzt die klassische Methode, ohne Ajax. Und jetzt schauen wir uns an, wie das Ganze mit Ajax funktioniert. Hier kann ich direkt die Sprache wählen, und das wird darunter angezeigt. Sehen wir uns zuerst den HTML-Code an, was sich hier geändert hat. Sie sehen, wenn ich das jetzt hier per Ajax mache, brauche ich nicht unbedingt das Formelement. Und deswegen habe ich es einmal weggelassen. Ich habe mein "select"-Element. Dem habe ich eine "id" gegeben, und ich habe auf der selben Seite ein "div"-Element mit der id="gruss". Hier soll dann die Begrüßung angezeigt werden. Wie funktioniert das jetzt? Okay. Erst einmal frage ich dieses Sprachelement ab. Das ist dieses Feld hier. Wenn das geändert wird, dann rufe ich eine Funktion auf, die habe ich "ajaxanfrage" genannt, und der übergebe ich die ausgewählte Sprache. So. Jetzt kommen wir zu den eigentlichen Ajax-Geschichten. Ich definiere eine Variable "xhr". Das gleich, das "XMLHttpRequest"-Objekt enthalten soll. Und ich setze es zuerst einmal auf Null. Das heißt auf "null". Dann erzeuge ich dieses neue "XMLHttpRequest()"-Objekt. Diese Objekt ist für Ajax zuständig. Und bevor ich das mache überprüfe ich, ob der aktuelle Browser das unterstützt. Und wenn das klappt, speichere ich eine Referenz in der Variable "xhr". Okay. Kommen wir zur Funktion "ajaxanfrage", die ich ja hier aufrufe. Und das alles soll nur stattfinden, wenn es geklappt hat, dieses Objekt zu erstellen. Dieses Objekt bietet jetzt nützliche Methoden und Eigenschaften für die Kommunikation mit dem Server. Zuerst einmal, ganz wichtig, gibt es "open". Damit erstelle ich eine Verbindung und öffne sie. "open" erwartet mehrere Parameter. Zuerst einmal, die Übertragungsart. Dann die URL, das heißt die Adresse, die aufgerufen werden soll. Und als drittes, muss man einen booleschen Wert angeben, der sagt, wie die Verarbeitung statt finden soll. Und "true" ist für asynchronen, also für Ajax. Die URL habe ich hier definiert, und außerdem habe ich an die URL noch die aktuelle Sprache, die gewählt wurde, heran gehängt, und damit meine URL zusammengebaut. Jetzt habe ich natürlich folgendes Problem. Ich sende im Hintergrund, die Anfrage an den Server. Ich muss natürlich jetzt aber auch wissen: Hat das geklappt? Gibt es Ergebnisse? Und das kann ich erfahren über eine nützliche Eigenschaft, die heißt "readyState". "readyState" kann jetzt verschiedene Werte annehmen. Den Wert "Null" "Eins" "Zwei" "Drei" "Vier". "Null" bedeutet: "open()" wurde noch nicht aufgerufen. "Eins" bedeutet: "send()" wurde noch nicht aufgerufen. All die Daten, noch nicht gesendet. "Zwei": "HEADERS RECEIVED". Headers und Status sind verfügbar. "LOADING" ist der Wert "Drei". Download ist im Gange. Und wichtig, "Vier": Der Vorgang ist abgeschlossen. Und das ist das, was mich eigentlich interessiert. Deswegen frage ich auf diesen Status ab. Ich muss aber natürlich vorher immer wissen, wann gibt es denn eine Änderung an diesem Status? Und das kann ich abfragen mit "onreadystatechange". Und wenn es da eine Änderung am Status gibt, dann rufe ich die Funktion "grussausgeben" auf, und außerdem muss ich die Daten noch senden. In "grussausgeben" überprüfe ich den "readyState", ob das eben abgeschlossen ist. Das interessiert mich. Jetzt kann es aber natürlich auch sein, dass der Server, beispielsweise mit der Meldung 404 antwortet. Das bedeutet, das Dokument wird nicht gefunden. Dieser Fall interessiert mich nicht, sondern ich möchte nur abfragen, ob das wirklich funktioniert hat. Und das ist dann die Meldung, die Statusmeldung vom Server "200". Und wenn das der Fall ist, dann erhalte ich auch ein Ergebnis. Das ist in "responseText" gespeichert. Und dieses Ergebnis schreibe ich mit "innerHTML" in das Element mit der id="gruss". Was jetzt natürlich noch fehlt, ist dass wir uns anschauen, wie denn das PHP-Dokument ausschaut. Sie erinnern sich, bei der klassischen Verwendung war das PHP-Dokument, ein vollständiges HTML-Dokument mit Grundgerüst und einem PHP-Teil. Jetzt hingegen besteht dieses PHP-Dokument nur aus diesem PHP-Teil, wo es uns nämlich hier den jeweiligen Text zurückgibt. Und dieser Text steht dann in "responseText", und ich kann ihn in das Element schreiben. In diesem Film haben Sie gesehen, wie man mit Ajax, mit JavaScript Pure arbeitet. Man erstellt dieses "XMLHttpRequest"-Objekt, und dieses bietet verschiedene Methoden und Eigenschaften für die Kommunikation mit dem Server. Man muss also die Verbindung öffnen. Man muss abfragen, ob es eine Änderung gibt. Man muss die Daten senden, und wenn der richtige Status da ist, dann muss man noch überprüfen, ob auch die Datei wirklich gefunden wurde. Kann dann den Text entgegen nehmen, und per JavaScript beispielsweise, in ein Element schreiben.

jQuery: AJAX-Lösungen

Lernen Sie die Vorteile von Ajax bei der Webseitenerstellung kennen und nutzen Sie die verschiedenen Austauschformate in Ihren Projekten.

1 Std. 34 min (20 Videos)
Derzeit sind keine Feedbacks vorhanden...

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!