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

Daten senden

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Das Verschicken von Daten zum Server per AJAX kann über GET und POST erfolgen. Sehen Sie, wie das geht, was die Unterschiede sind und auf was man achten muss.
05:19

Transkript

Sie sehen nun, wie Sie Daten per Ajax zum Server senden können. Dabei unterscheidet man wie beim klassischen Versenden von Daten im Wesentlichen zwischen get und post. Sie sehen hier eine einfache Seite mit zwei Schaltflächen und über diese möchte ich das Versenden auslösen. Die Antwort wird hier in diesem Div Bereich angezeigt. Das ist meine JavaScript Datei mit der wir das Versenden vornehmen und Sie sehen hier eine Methode send request get , das heißt bei dieser Methode versende ich die Datenpacket zum Server. Im Wesentlichen bedeutet get, dass die Daten an den URL in Form eines sogenannten Querys angehängt werden und dieser wird in der Regel durch ein Fragezeichen vom URL abgetrennt. Ich habe das bei der open-methode vorbereitet du Sie sehen hier, dass ich mit Plus eine Stringverkettung mache, der Wert dieser Variable wird hier oben zusammengesetzt in Form einer klassischen Query Struktur. Das heißt also immer Wertepaare. Schlüssel ist gleich Wert. Das kaufmännische und trennt das nächste Wertepaar. Schlüssel ist gleich Wert und das ist eigentlich alles. Sie setzen bei Get diesen Query zusammen, so wie Sie es auch in Adresszeile eines Browsers machen könnten und schicken diese Daten dann zum Server. Schauen wir uns das mal an. Ich lasse gleich einen Sniffer mitlaufen und dann sehen Sie was passiert. Das ist die Antwort vom Server. Das macht ein einfaches PHP Script, was nicht mehr tut, als die entgegengenomenen Daten wieder zurückschicken. So sieht das aus. Bitte achten Sie darauf, dass Sie auch auf einem Server arbeiten der gegebenenfalls PHP kann, sowie Apache unter XAMPP. JT, der Testserver von Aptana kann in der Grundeinstellung kein PHP und nun können Sie hier auch erkennen, wie die die Daten hier tatsächlich verschickt wurden, nähmilch als normaler URL mit einem Query dran, so wie Sie es aus dem Web her kennen, wenn Sie beispielsweise in Google eine suche ausführen. Das Verschicken per Post funktioniert fast gleichwertig, das wäre eine Methode, die jetzt per Post die Daten verschickt. Auch hier wird ein String zusammengesetzt mit den Werten, die zum Server geschickt werden sollen, entsprechend wieder als Schlüsselpaare übliche Struktur. Sie sehen allerdings hier, dass an dem URL kein Fragezeichen dranhängt, sondern das dieser Stream bei der Send Methode als Parameter eingetragen wird. Vielleicht haben Sie sich schon mal gefragt, warum hier bisher immer Null stand, bei get steht da immer Null. Das bedeutet dort werden die Daten eben nicht über send Methode als Parameter verschickt, sondern immer als Qeury am URL. Natürlich können Sie nur zur gleichen Domain schicken von der auch die Webseiterespektive oder Skript kommt. Das ist dieses Sandbox Prinzip, als Sicherheit in Ajax. Bei post sollte Ihnen auchber auffallen, dass ich hier mit einer Methode setRequestHeader, die jedes XHR Objekt besitzt. Die Headerfelder für den Content Type und die Länge des Inhaltes setze, damit vermeiden Sie Probleme die in gewissen Konstelationen auftreten. In vielen Situationen muss man das machen, in einigen geht das auch ohne, aber zur Sicherheit sollte man das immer setzen und zwar dieses Application und der zweite Teil von dem Mimetyp sagt, dass das, wie Formulardaten zu behandeln ist. Damit kommt der Server dann mit den Daten zu recht, so fern er per post überhaupt entgegen nimmt. Und die Länge von den Daten, die kann man einfach um die Eigenschaft lenghts bestimmen, weil das hier ein String ist und der hat immer die Eigenschaft lengths. So sieht das jetzt mit Post aus. Sie können hier erkennen, die Daten wurden per Post geschickt und Sie können auch erkennen, dass sie nicht an den URL drngehängt wurden, aber Sie können hier sehen, dass diese Daten eben in den Headern drinstehen. Wenn Sie sich jetzt die Frage stellen, was besser zum Versenden von Daten unter Ajax ist, dann würde ich sagen, das kommt drauf an. Für post spricht, dass man größere Datenmengen übermitteln kann. Normalerweise spricht für post auch, dass man eben nicht in der Adresszeile des Browsers die übergebenen Daten sieht, aber das entfällt bei Ajax, weil man dort auch bei get nichts in der Adresszeile sieht. Da wird ja nichts verändert, trotzdem bei Post müssen Sie eben sich hier selbst um die Header kümmern, bei get nicht. Etwas mehr Aufwand, nicht viel, aber immerhin etwas und normalerweise im Fall von Ajax schickt man ja immer sehr oft sehr wenig Daten hin und her, von daher entfällt das Argument mit der Datenmenge bei Ajax fast immer. Es hängt im wesetlichen davon ab, ob Sie get oder post nehmen, was auf Ihrem Server entgegengenommen wird. Ansonsten, wenn ich freie Wahl habe, entscheide ich persönlich mich moistens für get. Sie wissen jetzt sowieso, wie beides geht und können sich dann eben selbst entscheiden. Achten Sie bei get, wie gesagt drauf, dass Sie den Query an den URL hängen und hier Null stehen haben und bei post der Query hier in der Sent Methode als Parameter vergeben wird.

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!