Unsere Datenschutzrichtlinie wird in Kürze aktualisiert. Bitte sehen Sie sich die Vorschau an.

Java EE 7: Web Services

RESTful Services per JavaScript konsumieren

Testen Sie unsere 2017 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Um einen per JAX-RS definierten RESTful Service per JavaScript konsumieren zu können, benötigt man eigentlich nur ein geeignetes Framework wie jQuery oder AngularJS. Außerdem geht es um die Annotation @FormParam im Verbund mit der @Consumes-Annotation.

Transkript

RESTful Services dienen sehr häufig als Grundlage für mobile Applikationen oder für per JavaScript getriebene Web-Applikationen. Es ist, wenn wir auf Ebene der JAX-RS arbeiten, sehr einfach möglich, derartige Web-Services auch so anzupassen, dass sie für mobile beziehungsweise JavaScript-getriebene Web-Applikationen sinnvoll nutzbar sind. In diesem Video werden wir uns damit auseinandersetzen, was wir dabei zu beachten haben. Wir werden auch die Anbindung aus Sicht einer Web-Applikation im JavaScript-Umfeld begutachten, und zwar zum einen mit jQuery Framework und zum anderen mit dem sehr bekannten AngularJS Framework. Normalerweise ist es für einen RestService nicht ohne Weiteres möglich, HTML-Formulareingaben, auch wenn sie per HTTP-Request geschickt werden, zu verarbeiten. Das Ganze lässt sich aber übersteuern, indem wir auf Ebene der jeweiligen Methode, wo auch eine HTML-Formulareingabe verarbeitet werden soll, die @Consumes-Annotation hinterlegen. Diese @Consumes-Annotation nimmt potenziell eine Liste von verschiedenen Inhaltstypen entgegen, die sie verarbeiten kann. Standardmäßig erwartet sie den Inhaltstyp application/json. Wenn wir nun zum Beispiel eine HTML-Formulareingabe entgegennehmen und verarbeiten wollen, können wir sagen, dass diese Methode auch den Inhaltstyp application/x-www-form-urlencoded entgegennehmen kann. Und wie gesagt, das machen wir mit der @Consumes-Annotation. Die verschiedenen HTML-Formularelemente, die geschickt werden, müssen dann noch an unsere Felder gebunden werden. Das machen wir mit der @FormParam-Annotation. Die wird auf Ebene jedes Felds gesetzt und erlaubt es dann, ein HTML-Element mit einem bestimmten Namen an einen Parameter der Methode, die aufgerufen wird, zu binden. Analog funktioniert die @PathParam-Annotation, die es uns erlaubt, in der URL hinterlegte Pfade beziehungsweise Platzhalter, die wir definieren an entsprechende Methodenparameter zu binden. Weiterhin sollten Sie die @HeaderParam-Annotation kennen. Diese @HeaderParam-Annotation erlaubt es uns, uns an Header-Werte zu binden, die mit dem HTTP-Request übergeben werden. Zu guter Letzt sollten Sie auch die @CookieParam-Annotation kennen, die es uns erlaubt, dass die Applikation auf Werte von Cookies, die der Client sendet, zugreifen kann. Mit diesem Wissen können wir uns nun der Implementierung eines RESTful Service zuwenden, der von einer Web-basierten Lösung in JavaScript angesprochen und genutzt werden kann. Auf JavaScript-Ebene verwenden wir dafür die Frameworks jQuery und AngularJS. Bevor wir uns jedoch der eigentlichen JavaScript-Ebene zuwenden, sollten wir zuerst auf den RESTful Service schauen. Hier gibt es bereits zwei Methoden. Zum einen die Methode sayHello, die per @POST erreichbar ist und über den Pfad single angesprochen wird. Und zum anderen die Methode sayHelloMultipleTimes, die auch per @POST erreichbar und über den Pfad multiple samt dahinter liegender zusätzlicher Angabe angesprochen wird. Diese zusätzliche Angabe ist mit einem Platzhalter angegeben und wird über eine @PathParam-Annotation an einen entsprechenden Parameter der Methode übergeben. Auf diese Art kann ein aufrufender Client in der Adresse bereits eine Information hinterlegen und kann dann im eigentlichen Body seiner Anforderung die Daten, die zu verarbeiten sind, transportieren. Diese Daten werden hier in Form von JSON-Objekten erwartet beziehungsweise in Form eines JSON-Objektes. Dieses JSON-Objekt wird dann konvertiert in eine MessageModel-Instanz. Diese MessageModel-Instanz dient dann wieder als Rückgabe der entsprechenden Methoden, einmal als einzelne Instanz, einmal in Form einer Liste. Das Objekt hat selbst einen sehr einfachen Aufbau. Es verfügt nur über eine Eigenschaft message, die dann entsprechend in JSON als ein Feld ausgeführt ist, und, sollte sie nach XML konvertiert werden, in XML als ein Element ausgeführt wird. Lassen Sie uns nun eine Methode implementieren, die von einem Client genutzt werden kann, der nicht eine Anfrage mit dem Content Type application/json, sondern eine Anfrage mit dem Content Type x-www-form-urlencoded sendet. Zu diesem Zweck legen wir eine neue Methode an, deren Rückgabe ist wieder eine MessageModel-Instanz. Die soll auch wieder nach JSON konvertiert werden. Das müssen wir auch definieren. Der übergebene Parameter ist diesmal aber eine Zeichenkette. Die Methode selbst verfügt nicht über sonderlich einfallsreiche Logik. Wir geben einfach eine neue MessageModel-Instanz zurück und hängen dort die eingegebene Zeichenkette einfach mit dran. Nun definieren, dass diese Methode über ein HTTP-POST-Request aufrufbar ist. Der Pfad, der erwartet wird, ist form. Die Methode konsumiert, ausgedrückt über die @Consumes-Annotation, Anfragen mit MediaType. APPLICATION_FORM_URLENCODED. Sie produziert, ausgedrückt über die @Produces-Annotation; achten Sie darauf, dass Sie wirklich immer die aus dem javax.ws.rs-Package nehmen; sie produziert Elemente oder Rückgaben vom Typ JSON. APPLICATION_JSON ist dann der Wert der Konstante. Damit haben wir diese Methode fertig definiert. Wir können sie nun aus JavaScript heraus ansprechen. Das JavaScript wird aus einer Website heraus ausgeführt. In dieser Website befindet sich ein HTML-Formularelement. Dieses HTML-Formularelement verfügt über die ID simpleForm. Die werden wir gleich, wenn wir per jQuery eine Funktionalität implementieren, benutzen. Auch verfügt es über ein Eingabefeld mit dem Namen message und der ID message. Auch auf dieses Feld werden wir zugreifen. Und es ist ein HTML-Button definiert mit der ID callSimple. Wenn auf den geklickt wird, soll unser RESTful Service aufgerufen werden. Die Rückgabe, die wir vom RESTful Service bekommen, soll als HTML an diese Unordered List, die ich gerade markiert habe, mit der ID result angefügt werden. Diese ganze Funktionalität setzen wir per jQuery um. Ich habe aus diesem Grund schonmal etwas jQuery-Code vorbereitet, sodass wir uns mit einigen Komplexitäten nicht mehr auseinandersetzen müssen. Was wir jetzt machen, ist, wir binden uns an den Button mit der ID callSimple und reagieren auf dessen click-Ereignis. Dabei wird eine Funktion aufgerufen. In dieser Funktion serialisieren wir zuerst den Inhalt des HTML-Formulars. Dessen ID lautete simpleForm. Dafür verwenden wir die jQuery-Methode serialize. Jetzt haben wir dieses Formular oder den Inhalt dieses Formulars in einem Format vorliegen, wie es von der eben implementierten Methode des RESTful Service verarbeitet werden kann. Nun müssen wir es rüberschicken zum RESTful Service. Dazu verwenden wir die $.post-Methode aus jQuery. Die nimmt mehrere Parameter entgegen. Der erste Parameter ist der Pfad zum RESTful Service. Den schreiben wir hier als relativen Pfad, denn diese Web-Applikation dient gleichzeitig als Container für den RESTful Service, sodass wir hier keinen absoluten Pfad angeben müssen. Der zweite Parameter ist der Content, den wir übertragen wollen. Der dritte Parameter ist eine Funktion, die aufgerufen wird, wenn wir vom Server die Rückgabe erhalten. Dieser Funktion wird in den Parameter data das JSON, was vom Server zurückgegeben wurde, reinübergeben. Dieses JSON ist ja nichts anderes als eine Repräsentation der eben gesehenen MessageModel-Klasse. Das heißt, dieses JSON verfügt über ein Feld message. Das machen wir uns zunutze und erzeugen hier das HTML, was an die Unordered List angehängt werden soll. Und greifen auf die Eigenschaft message des übergebenen JSON-Objekts zurück. Das hängen wir dann an die Unordered List an. Die sprechen wir über ihre ID an und benutzen die Methode append unter Angabe des html. Jetzt müssen wir noch die Klammern, die wir geöffnet haben, wieder schließen, die Semikolons richtig setzen. Dann ist die Funktionalität in jQuery implementiert. Nun können Sie die Applikation auf dem Server deployen und sie dann im Browser aufrufen. Ich habe die Applikation hier im Internet Explorer geöffnet. Wir sehen das eben gezeigte Formular. Wenn ich in dieses Feld eine Nachricht eingebe und auf Absenden klicke, bekomme ich die entsprechende Rückgabe von der Methode die wir eben angesprochen haben, in der Seite ausgegeben. Es ist also nicht sonderlich schwierig, über jQuery so eine Funktionalität anzubinden. Allerdings kommt jQuery relativ bald an Grenzen, wenn es darum geht, auf eine einfache Art JSON zum Server zu schicken. Das geht zwar auch, und zwar gibt es in jQuery die $.ajax-Methode, nur ist die um einiges aufwendiger zu implementieren als der Ansatz, den ich Ihnen jetzt zeigen möchte, nämlich der Ansatz von AngularJS. AngularJS ist ein Framework, das von Google ursprünglich entwickelt worden ist. Dieses Framework versucht, eine Website nicht mehr nur als eine Seite, in der per JavaScript auf irgendwelche Events irgendwelcher Elemente reagiert wird, zu betrachten, sondern es versucht diese Website mit einem MVC-Ansatz zu betrachten. Dazu definiert man in AngularJS immer Apps und in diesen Apps befinden sich dann ein oder mehrere Controller. So ein Controller verfügt über Felder, Variablen. Die binden wir an Elemente über die ng-model-Attribute. Der Wert ist der Name der Variablen im Controller. Das haben wir hier für das Eingabefeld. Hier haben wir es für ein select, also für eine Auswahl. Und wir haben das Ganze nochmal auf eine andere Art beim button. Beim Button binden wir uns nämlich über das ng-click-Attribut an die Methode loadData des Buttons. Die Ausgabe dessen, was vom WebService zurückgeladen worden ist, erfolgt über eine Unordered List. Hier befindet sich ein li-Element, wenn Sie so wollen, als Template drin. Dieses li-Element ist mit einem ng-repeat-Attribut versehen. Dieses ng-repeat-Attribut zeigt auf die Eigenschaft messages und wird dann durchlaufen. Für jeden Durchlauf wird das aktuelle Element der Eigenschaft messages des Controllers, das ist ein Array aus JSON-Objekten, in die Variable message übertragen. Dann wird es per AngularJS-Datenbindungssyntax direkt hier ausgegeben, und zwar wird hier die Eigenschaft message der aktuellen message-Instanz ausgegeben. Das ist das, was man im Vorfeld wissen sollte, um mit AngularJS arbeiten zu können. Ich habe bereits einen controller angelegt. Dieser Controller verfügt auch schon über drei Variablen, nämlich die Variable message, die ist an das Eingabefeld gebunden, die Variable count, die ist an das select-Feld zur Auswahl der Durchläufe gebunden, und die Variable messages, das ist am Anfang ein leeres Array. Nun implementieren wir die Methode, die beim Klick des Buttons aufgerufen wird. Die ist erreichbar über loadData als Funktion. Da ist zugewiesen eine Funktion, die jetzt hingeht und zuerst ein JSON-Objekt erzeugt. Das machen wir inline. Und hier geben wir Name, Doppelpunkt, Wertparameter an und binden das Feld message, das wir gerade definiert haben, an die Eigenschaft message des Controllers, ausgedrückt über $scope.message. Nun definieren eine Variable, die die Adresse, die anzuspringen ist, beinhalten wird. Das ist wieder nur eine relative Adresse, weil sich der Service in derselben Web-Applikation befindet wie die HTML-Seite. Wir springen da die Methode multiple an und übergeben da als letzten Parameter den Wert der Variable count aus dem Controller. Nun können wir die eigentliche Funktionalität aufrufen. Das machen wir mit $http.post. Dieses post-Objekt verfügt über zwei Parameter, nämlich url und data, und erlaubt es uns, eine Callback-Funktion zu definieren, die aufgerufen wird, wenn die Rückgabe vom Server kommt. Diese Rückgabe lesen wir in die Variable response ein. Das ist jetzt ein Array aus JSON-Objekten. Das binden wir an die Eigenschaft messages des Controllers. Da bei AngularJS eine Zweiwegedatenbindung existiert, wird sofort das Frontend aktualisiert, wenn ich im Code die entsprechende Datenbindung herstelle beziehungsweise der entsprechenden Variable neue Werte zuweise. Das alles vorausgesetzt können wir nun unsere Applikation mit AngularJS und der Methode multiple unseres RESTful Service arbeiten lassen. Ich wechsle nun in den Browser zurück, wechsle in den Reiter, über den ich AngularJS ansprechen kann, und kann nun eine Nachricht eingeben. Diese Nachricht wird entsprechend meine Auswahl hier an den Server übergeben und dann entsprechend häufig zurückgegeben. Wir haben uns in diesem Video damit auseinandergesetzt, wie wir RESTful Services aus einer JavaScript-Applikation heraus anbinden können und welche Vorarbeiten dazu im Zweifelsfall auf Ebene unseres RESTful Service noch nötig sind. Wir haben auch geklärt, was die FormParam-, PathParam-, HeaderParam-, und CookieParam-Attribute machen. Und wir haben per jQuery und AngularJS die eigentliche Anbindung an unseren JAX-RS RESTful Service bereitgestellt.

Java EE 7: Web Services

Steigen Sie ein in die Java-Enterprise-Welt und lernen Sie, wie Nachrichten ausgetauscht und Dienste definiert werden.

5 Std. 13 min (30 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!