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 Grundkurs

Eine Textdatei mit AJAX nachfordern

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Anhand einer AJAX-Anforderung, als reine Klartextdatei, sehen Sie im praktischen Beispiel, wie man grundsätzlich Daten anfordern und anzeigen kann.
06:14

Transkript

In diesem Film sehen Sie nun anhand der Nachforderung von reinem Klartext, wie man grundsatzlich mit Ajaxdaten Webserver anfordern und in die Webseite einbauen kann. Selbst, wenn Sie später Json oder xml oder mit HTML durchsetzen Text anfordern, ist die grundsätzliche Vorgehensweise weitgehend gleich. In dieser Webseite sehen Sie nun einen Button, auf den ich nicht klicken möchte und wenn ich darauf klicke bekomme ich hier in einem DIV eine Antwort angezeigt, die ich per Ajax vom Server anfordern. Beachten Sie hier oben die beiden Referenzen. Das ist einmal die Referenz auf meine JavaScript Datei, in der ist das XHR Objekt erzeuge. Das macht man mittels Ausnahmebehandlung universell für alle Browser und das resultierende XHR Objekt funktioniert obwhol es unterschiedlich erzeugt werden muss für alle Browser gleich. Es hat die gleichen Methoden für die gleichen Eigenschaften, egal wie es erzeugt wurde. Und das ist nun die zweite JavaScript-Datei, in der wir dei Ajax Anforderung durchführen werden. Das hier ist der Aufruf der Funktion, die das xHR Objekt erzeugt, die Referenz darauf speichern der Variable. Ich habe hier zwei Skriptbefehle, aber Sie wissen, dass alle JavaScript in einer Webseite in einem gemeinsamen Namensraum arbeiten und deswegen kann man das modularisieren. Diese Funktion send request wird bei einem Klick auf den Button aufgerufen und in der Funktion init, die ich beim Laden der Webseite, nach dem Laden der Webseite aufrufe, wird eine Funktionsreferenz an das Klick gebunden und die verweist eben auf diese Funktion und die macht die gesamte Ajax Anfrage. Das hier, die Openmethode ist die Iinitialisierung der Verbindung. Ich lege die Methode fest Get oder Post, wird das in der Praxis sein, ich gebe den URL an, der Resource, ich nachfordere, also der reinen Textdatei, der XML-Datei, der Json Datei. In einen dritten Parameter kann ich bei Bedarf angeben, ob ich Ajax Anfragen synchronisieren möchte. True steht für asynchron und auch das wird in 99,99 Prozent alle Fäller gemacht. Man will ja bewusst eine gewisse Asynchronität der Datenanforderung erreichen, aber wenn Sie beispielsweise eine Ajax Anfrage wegschicken und in einer zweiten auf das Resultat der ersten warten wollen, dann könnte man hier eine Synchronisation vornehmen. Das hier ist ein neuer Eventhandler, der von dem XHR Objekt zur Verfügung gestellt wird. Onreadystatechange gibt es nicht als HTML Eventhandler. Er gehört explizit nur zu diesem XHR Objekt und kann nur als JavaScript Eventhandler benutzt werden. Ich weise diesen über eine Funktionsreferenz auf eine Funktion handleresponse zu. Hier könnten Sie auch mit einer anonymen Funktion arbeiten selbstverständlich. Und jetzt schicke ich die Anfrage weg, dazu dient die Methode send. Betrachten wir diese Funktion hier handleresponse, die hier deklariert ist. Das ist die Funktion, die aufgerufen wird, wenn die Antwort des Servers eintrifft. Nun kann der Server verschiedene Statusmeldungen von sich geben, er kann verschiedene Zustände der Gesamtkommunikation beschreiben, zum Beispiel bitte warten, bitte warten oder die Resource ist nicht da oder sonst irgendwas. Das heißt im Inneren dieser Funktion verwerte ich eine Information, die in einer Eigenschaft von den XHR Objekt steckt, die readyState heißt. ReadyState =4 ist die Information, dass die Antwort des Servers vollständig da ist und auch korrekt da ist, deswegen schreibe ich hier hin if resOB oder wie auch immer ich das XHR- Objekt nenne. Ready = 4 und nur dann zeige ich die Antwort an und die schreibe ich per innerHTML in deinem Bereich der Webseite, in diesem Fall einen DIV-Container. Die Antwort selbst, steckt in einer weiteren Eigenschaft des resOB, sprich des XRE Objektes und die heißt response Text und das war alles. Das ist das gesamte Geheimnis einer Ajax Datenanforderung, zumindestens für Klartext. Schauen wir uns das Beispiel an und damit auch gleich bewiesen wird, dass es mit Ajax nachgefordert wird, habe ich mal wieder den Sniffer von Firebug angeschaltet und auch gleich hier auf XHR Register geschaltet. Der Anwender hat seine Webseite vor sich, er klickt auf den Button und wir sehen hier, da ist ein Antwort eingetroffen und die kam in der Tat mit Ajax. Beachten Sie, dass die Webseite nicht ausgetauscht wurde. Es ist immer noch die gleiche Webseite, wie vorher. Es wurde nur die Antwort vom Server genommen und in deiner Webseite angezeigt. Diese Datei, die ich hier anfordere, muss übrigens in Ajax zwingend von der gleichen Domain kommen, von der sie auch die Webseite, bezieungsweise die JavaScript-Datei angefordert haben. Das ist ein sogenanntes Sentbox-prinzip, ein Sicherheitskonzept, dass nicht von irgendwelchen Quellendaten hinzugezogen werden können, was der Anwender überhaupt nicht mehr beobachten kann. Natürlich schränkt, dass die universelle Nutzbarkeit ein wenig ein, aber der Sicherheitskonzept ist wirklich elementar wichtig, von daher ist das eine relative URL und man muss um dieses Beispiel auszuprobieren, auch unbedingt über einen Server gehen. Zwar können einige Bowser dass mittlerweile auch, wenn Sie die HTML-Seite einfach so in den Browser ziehen, aber eigentlich braucht man zwingend einen Webserver. Fassen wir also noch mal zusammen, was Sie jetzt über AJAX wissen. Sie erzeugen ein XHR Objekt, Sie Initialisieren irgendwie eine Verbindung über die Methode open, Sie binden über den Eventhandler onreadystatechange eine Reaktionsfunktion an die Antwort oder genauer genommen immer dann, wenn der Server irgendetwas sendet, Sie senden die Daten und sobald eine Antwort des Servers eintrifft, schauen Sie nach, ob das auch die Kennzeichnung hat, das die Antwort vollständig ist und wenn ja, zeigen Sie über eine Eigenschaft response Text, die Antwort des Servers in der Webseite an.

JavaScript Grundkurs

Lernen Sie die Möglichkeiten der universellen Sprache JavaScript kennen und machen Sie sich mit der Syntax vertraut, um Ihre Web-Applikationen durch effektive Skripts zu ergänzen.

8 Std. 20 min (134 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!