Service Computing

1. Service Computing Prof. Dr. Ramin YahyapourIT & Medien Centrum24. November 2009

2. SOAP vs REST • <?xml version="1.0"?> • <soap:Envelope • xmlns:soap="http://www.w3.org/2001/12/soap-envelope" • soap:encodingStyle="http://www.w3.org/2001/12/soap-encoding"> • <soap:bodypb="http://www.acme.com/phonebook"> • <pb:GetUserDetails> • <pb:UserID>12345</pb:UserID> • </pb:GetUserDetails> • </soap:Body> • </soap:Envelope>} In REST: • http://www.acme.com/phonebook/UserDetails/12345

3. Beyond static text and forms • The current trend in Web applications (Web X.0) • more interactivity on the client side (rich applications) • "standard GUI behavior", drag & drop, as for stand-alone applications • the browser as the central front-end for various types of applications • pro: no installation or roll-out costs for new applications • con: limitations of browser environment, browser-specifics • Different technical approaches covered herein • AJAX (as a new paradigm of developing rich browser-based clients) • Java Applets and Java WebStart • Others: ActiveX objects, Flash (overview) Source. Dietmar Jannach, WT

4. AJAX ? • AJAX: • stands for Asynchronous JavaScript and XML • although XML is not mandatory (see later) • Main idea: • use asynchronous calls from JavaScript to the Web server • dynamically adapt the content on the current page • Basic advantages • no full reload (submit) of Web page required – individually contents can be "re-loaded" • Users can continue to interact while reload takes place (asynchronous calls) • Technically: Relies on long-known JavaScript methods • Various libraries ('AJAX engines') available that hide the few details of asynchronous data transfer Source. Dietmar Jannach, WT

5. http://rajshekhar.net/blog/archives/85-Rasmus-30-second-AJAX-Tutorial.htmlhttp://rajshekhar.net/blog/archives/85-Rasmus-30-second-AJAX-Tutorial.html Ajax in 10 seconds function sndReq(action) { http.open('get', 'rpc.php?action='+action); http.onreadystatechange = handleResponse; http.send(null); } function handleResponse() { if(http.readyState == 4){ var response = http.responseText; var update = new Array(); if(response.indexOf('|' != -1)) { update = response.split('|'); document.getElementById(update[0]) .innerHTML = update[1]; } } } function createRequestObject() { varro; var browser = navigator.appName; if(browser == "Microsoft Internet Explorer"){ ro = new ActiveXObject("Microsoft.XMLHTTP"); } else { ro = new XMLHttpRequest(); } return ro; } var http = createRequestObject(); <a href="javascript:sndReq('foo')">[foo]</a> Source. Dietmar Jannach, WT

6. AJAX in 10 seconds – continued • The <div> in the HTML page • <div id="foo"> </div> • will become • <div id="foo"> foo done </div> Some PHP script (rpc.php) … switch($_REQUEST['action']) { case 'foo': / do something / echo "foo|foo done"; break; ... }

7. Data transfer formats • Free choice of server-side technology • Proprietary formats can be chosen (see example) • Design alternatives • Create full HTML at server-side • only create the content on the server • use XML as a data transfer format? • Recent format: JSON • lightweight format (compared with XML) • notation is compatible with different languages like JavaScript • Not yet officially standardized (RFC status) • Supported in Web services by Yahoo or Google

8. JSON example (json.org) {"addressbook": {"name": "Mary Lebow", "address": { "street": "5 Main Street" "city": "San Diego, CA", "zip": 91912, }, "phoneNumbers": [ "619 332-3452", "664 223-4667" ] } }

9. … same in XML <addressbook> <name>Mary Lebow</name> <address> <street>5 Main Street</street> <city zip="91912"> San Diego, CA </city> <phoneNumbers> <phone>619 332-3452</phone> <phone>664 223-4667</phone> </phoneNumbers> </address> </addressbook>

10. The advantage in JavaScript // Remember AJAX call varjsonRaw = http.responseText; varjsonContent = eval ( "(" + jsonRaw + ")" ); document.write("No of Elements: " + jsonContent.addressbook.length); var response = ""; for (i = 0; i< jsonContent.addressbook.length;i++) { response += jsoncontent.addressbook[i].name + " <br>"; response += jsoncontent.addressbook[i].address.city + " <br>"; response += jsoncontent.addressbook[i].address.zip + " br>"; } document.getElementById("addressBookResults").innerHTML = response;

11. Pro and con • Constraints: • JSON does not support namespaces like XML • There are no XML - CDATA sections in JSON, there are also no XML attributes • Validation cannot be easily done at client side • Optimized for client-side consumption in browser (compare Web Services) • Advantages • No XML parser or complex XML reading required at client side, easy consumption of content • Server-side generation of JSON records with libraries possible • The syntax is less verbose, thus reducing data transfer

12. Potential problems with AJAX • Of course, the browser must support JavaScript • What about mobile browsers? • Bookmarks • Allowing the user to set bookmarks on pages is not trivial • Back/Forward • AJAX calls are not registered in the browser's history • Search engine optimization • Search engine robots cannot easily index your dynamically constructed page • Web page analytics • It is a bit more complicated as there are lots of small HTTP requests • Finally, the programming model • danger of putting business logic to the presentation layer

13. Other AJAX techniques • Using XMLHttp is not the only option • Pro XMLHttp: Easy • Potential problem: Accessing content from other sites than the original one • Other option: Using frames or (hidden) iFrames • No need for XMLHttp method (if not supported by browser) • Problems and different behaviour with browser history • Different JavaScript API in different browsers to access IFrame content https://www6.software.ibm.com/developerworks/education/x-ajaxtrans/x-ajaxtrans-a4.pdf

14. IFRAME example – the client <script type="text/javascript"> function handleResponse(msg) { if (msg == 'server1') document.getElementById("RSIFrame").contentDocument.location.replace("html1.php") ; else document.getElementById("RSIFrame").contentDocument.location.replace("html2.php") ; } </script> <iframe id="RSIFrame" name="RSIFrame" style="width:100px; height:100px; border: 1px solid black" </iframe> <p> <a href="server1.html" target="RSIFrame">HTML 1</a> <a href="server2.html" target="RSIFrame">HTML 2</a>

15. A "server" (server1.html) <script type="text/javascript"> window.parent.handleResponse("server1"); </script> • Of course … • you would use dynamic HTML pages … • form data can also be passed, or JavaScript returned … • or create frames dynamically with JavaScript … • and react on onLoad events

16. Using the <script> tag • Tag can be used to download any type of information from the server • Server can be anywhere! • Idea : The "src" attribute of the <script> tag is changed dynamically • Potential problems • Some encoding required for non-JavaScript code • Only GetMethod support for forms • Can you trust the code of the service?

17. Basic idea • Write a web service that returns a JavaScript function • http://www.test.com/test.php?functionname=myfunction&param1=a&param2=bb • returning for instance • "myfunction({'Value1': 'foo1', 'Value2': 'foo2'}) " • Get the code and place it into a script tag <script> function myfunction(params) { alert (params['Value1']); } </script> <script> myfunction(({'Value1': 'foo1', 'Value2': 'foo2'}); </script> • API snippet functionembedScript(url){ varscriptTag = document.createElement("script"); scriptTag.setAttribute("type", "text/javascript"); scriptTag.setAttribute("src", url); document.getElementsByTagName("head")[0]. appendChild(scriptTag); } http://www.redmountainsw.com/wordpress/archives/ajax-and-the-dynamic-script-tag

18. Modern JavaScript toolkit libraries • Goal of these libraries • make the programming in JavaScript easier • Typical features: • Lots of visual effects like fade-in, fade-out • AJAX communications • Menus, trees, .. • shorthand method names for JS functions • browser compatibility • Examples • YUI (Yahoo!), Dojo, Prototype and script.aculo.us, Mochikit, JQuery … • Constantly new libraries appear ..

19. "Direct RIA" • AJAX – based C/S communication hidden by framework • Client component renders the content; • automatically synchronizes client and server states

20. Net Specific Encryption Machine A Machine B Application Application Telnet Telnet TCP/UDP TCP/UDP IP IP De/Encryption De/Encryption Network Layer Network Layer