Am 14. September 2017 haben wir eine überarbeitete Fassung unserer Datenschutzrichtlinie veröffentlicht. Wenn Sie video2brain.com weiterhin nutzen, erklären Sie sich mit diesem überarbeiteten Dokument einverstanden. Bitte lesen Sie es deshalb sorgfältig durch.

JavaScript lernen

AJAX und das Web 2.0

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Per AJAX kommunizieren Sie asynchron mit dem Webserver und tauschen Inhalte der Webseite laufend durch nachgeladene Informationen aus - meist unbemerkt vom Anwender und ohne kompletten Neuaufbau der Webseite.
08:19

Transkript

In diesem Video werden wir uns mit einem Schlagwort beschäftigen, das etwa um das Jahr 2005 herum das Web revolutioniert hat. Es geht um "AJAX". AJAX ist die Basis dessen, was man als "Web 2.0" bezeichnet. Zumindest aus technischer Hinsicht. Es geht schlicht und einfach darum, dass mit JavaScript Daten vom Server nachgefordert werden, die dann mit DHTML in die Website eingebaut werden, und dabei bleibt die bereits geladene Seite erhalten. Schauen wir uns ein Beispiel an. Wir haben hier eine banale Webseite mit einem Button. Und wenn ich hier auf den Button klicke, dann taucht hier ein Text auf. Und dieser Text war vorher nicht in der Seite vorhanden. Er ist nicht irgendwie unsichtbar gewesen, schon vorgeladen, sondern der wurde dynamisch nachgeladen per AJAX. Das kann ich beweisen. Ich lasse einfach mal einen "Sniffer" mitlaufen. Ein Sniffer ist ein Tool, mit dem man den Netzwerkverkehr protokollieren kann, und in Firefox gibt es ein Add-on "Firebug", womit man einen Sniffer gleich dabei hat, der den Datenverkehr zwischen dem Browser und dem Webserver protokolliert. Wenn ich hier mit der rechten Maustaste in die Webseite klicke und Firebug ist installiert, dann kann ich hier Firebug öffnen. Dort gibt es eine Kategorie "Netzwerk", und wenn ich diese aktiviere und dann hier auf den Button klicke, dann sehen Sie, dass hier eine Datenanfrage zum Server geschickt wurde, und diese hat diese Antwort enthalten, die wir hier sehen. Und ganz entscheidend ist: Die bisher bereits geladene Seite ist erhalten geblieben. Was ist nun die Basis? Sie sehen hier, dass zwei JavaScript Dateien in diese Webseite eingebunden wurden. Und die eine JavaScript Datei heißt "XHR-Object". Und das ist das, was dort als Quelltext zu finden ist. "XHR" ist eine Abkürzung für "XMLHttpRequest". Da sehen Sie es auch ausgeschrieben. Und tatsächlich basiert AJAX darauf, dass es ein neues Objekt gibt, das quasi als eine Art Browser ohne Fenster zu sehen ist. Dass es ein neues Objekt gibt, über das eine Kommunikation am eigentlichen Browser vorbei mit dem Server erfolgen kann. Dieses XHR-Objekt fordert im Auftrag des Browsers Daten vom Server an, und stellt dann diese Daten dem Browser zur Verfügung. Erfunden hat dieses XHR-Objekt übrigens Microsoft schon in den 90er Jahren des letzten Jahrtausends. Aber erst um das Jahr 2005 herum wurde diese Technologie wirklich populär. Interessanterweise haben die Konkurrenten von Microsoft diese Technik im Web populär gemacht, und Microsoft musste sozusagen seine eigene Erfindung erst nach und nach gescheit in den Browser implementieren. Tatsächlich sehen Sie hier eine Funktion, die so ein XHR-Objekt erzeugt. Und das ist nicht ganz trivial. Sie sehen hier einen Mechanismus, den man "ExceptionHandling" nennt — Ausnahmebehandlung. Und tatsächlich ist es notwendig, diese Erzeugung von diesem XHR-Objekt auf drei verschiedene Weisen zu probieren, um alle relevanten Browser zu unterstützen. Die ersten beiden Techniken dienen dazu, alte Internet Explorer zu unterstützen, denn diese können dieses Objekt nicht standardkonform erzeugen, während die dritte Variante dafür da ist, den standardkonformen Weg der Erzeugung zu gewährleisten. Und "Ausnahmebehandlung", was in JavaScript in der Version 1.5 eingeführt wurde, basiert darauf, dass man versuchen kann, Dinge durchzuführen. Wenn sie klappen, ist es gut, und wenn es nicht klappt, dann wird das Programm nicht beendet, das Script wird nicht beendet, sondern man kann an einer anderen Stelle weitermachen und dann einen zweiten Schritt probieren und gegebenenfalls noch einen dritten. Ohne jetzt diese Technik bis ins Detail auszuarbeiten, der entscheidende Punkt ist dieses "TryCatch", das Sie hier sehen. Wir versuchen hier, einen XHR-Objekt zu erzeugen. "Try", das ist mit einem Block umgeben, der mit "try" eingeleitet wird; und wenn ein Fehler auftritt, wird dieser Fehler "geworfen". "Throw" ist ein Schlüsselwort in JavaScript. Und was man hochwirft, kann man auch auffangen: "Catch", das heißt, im Fehlerfall, im Ausnahmefall, springt man in diesen "Catch"-Block, und dann versucht man es nochmal neu. Geht es gut: OK. Ansonsten fängt man es auf und versucht es nochmal neu. Mit diesen drei Mal versuchen, wird man hundertprozentig sicher ein XHR-Objekt bei allen modernen Browsern erzeugen. Im Erfolgsfall wird diese gesamte "TryCatch"-Konstruktion sowieso beendet, man kommt zu "Return" und diese Funktion liefert dieses XHR-Objekt dem Aufrufer zurück. Hier sehen Sie nun die eigentliche AJAX-Applikation, und die ist gar nicht so aufwendig. Ich erzeuge so ein XHR-Objekt, ich initialisiere es mit einer Methode "Open". Die Methode "Get" ist ein Standardverfahren, um Daten im Web anzufordern. Im Wesentlichen gibt es "Get and Post". Das ist die Datei, die ich anfordere. Das ist eine Textdatei, Sie können aber auch "JSON" oder "XML" anfordern. Wir beschränken uns hier auf "TEXT". Diese kann übrigens auch HTML-Elemente enthalten, und das sagt, dass die Daten asynchron angefordert werden, dass also die Anforderung weggeschickt wird und die Applikation läuft weiter. Daher kommen auch die Namen AJAX, "Asynchrones JavaScript and XML". Das hier ist eine neuer EventHandler, der mit AJAX eingeführt wurde. Das ist die Funktion, die aufgerufen werden soll, wenn sich der Status von diesem Kommunikationsobjekt ändert, und jetzt wird die Anfrage weggeschickt. Und wenn die Antwort eintritt, überwache ich, ob die Antwort vollständig ist. Das macht man über "readyState = 4". Und wenn die Antwort vollständig ist, dann nehme ich die Antwort des Servers — es steht ein "responseText" zur Verfügung — und schreibe sie in einen Bereich der Webseite. Und das war es. Und hier lege ich fest, dass bei einem Klick auf den Button diese Anfrage weggeschickt wird. Die konkrete Textdatei ist banal. Da steht irgendwas drin und man kann, wie gesagt, auch tatsächlich hier HTML-Text reinschreiben, und das wird dann auch interpretiert. Wie Sie sehen, ist das "NullToNull" jetzt kursiv. Nun haben wir hier noch eine zweite AJAX-Applikation, und je nachdem, auf welchen Button ich hier klicke, bekomme ich unterschiedliche Daten per AJAX nachgeladen, das heißt, man kann natürlich auch eine Logik programmieren, dass unterschiedliche Informationen kommen. Das kann man serverseitig implementieren, aber man kann die Logik auch in JavaScript einbauen. Das will ich Ihnen nochmal zeigen: Das hier ist der JavaScript-Code, der hinter dieser ganzen Aktion liegt. Lassen Sie sich nicht abschrecken, es ist nicht so viel, wie es im ersten Moment erscheint. Ich habe bei drei Buttons einen "onClick" EventHandler registriert und rufe eine Funktion "sendRequest" mit einem Parameter auf, einem numerischen Parameter, also "0", "1" oder "2". Und in dieser "sendRequest" verwerte ich einfach den Parameter, und wenn er "0" ist, rufe ich die eine, wenn er "1" ist, die andere und ansonsten, die dritte Textdatei auf. Das ist alles. Ich benutze hier, beim "AlreadyStateChanged", dieses Mal eine anonyme Funktion, um die Sache noch mehr zu kapseln, aber im Grunde ist das Beispiel identisch zu dem, was Sie vorher gesehen haben. Sie haben also in diesem Video die Technik von AJAX kennengelernt, und diese beinhaltet enorm Potenzial, vor allen Dingen dann, wenn man sie mit Logik koppelt und gegebenenfalls "JSON" oder auch "XML" fordert, was allerdings vom Level her schon etwas anspruchsvoller wird. Und wenn man dann die Antwort auf dem Server auch noch dynamisch generiert, dann hat man die Basis jeder modernen Rich Internet Application, die Sie derzeit im Web finden.

JavaScript lernen

Legen Sie los mit der Programmierung von beeindruckenden Webseiten und machen Sie sich mit den Grundstrukturen von JavaScript, Objekten und insbesondere dem DOM-Konzept vertraut.

3 Std. 6 min (36 Videos)
Derzeit sind keine Feedbacks vorhanden...
 

DVD oder Online-Training: Was ist der Unterschied?

 

Inhaltlich sind beide Trainings absolut gleich. Der Unterschied liegt bei den Nutzungsmöglichkeiten und im Vertriebsweg.

 

Beim Training auf DVD erhalten Sie eine Box mit allen Inhalten und einem gedruckten Bonusmagazin.

Die Bezahlung erfolgt bequem per Rechnung.

 

Das Online-Training ist sofort nach dem Kauf verfügbar, jederzeit und an jedem Ort. Sie brauchen nur eine Online-Verbindung und einen gängigen Webbrowser. Wenn Sie das Training herunterladen, steht es Ihnen auf Ihrem Computer auch offline zur Verfügung.

Die Bezahlung erfolgt per Kreditkarte, Paypal oder sofortüberweisung.de (nicht in allen Ländern verfügbar).

 

Wir wünschen Ihnen viel Freude mit dem Video-Training Ihrer Wahl – ob Online oder auf DVD.

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!