1. technische universität dortmund Service Computing Service Computing Prof. Dr. Ramin Yahyapour IT & Medien Centrum 24. November 2009

2. technische universität dortmund SOAP vs REST In REST: <soap:Envelope xmlns:soap="http://www.w3.org/2001/12/soap-envelope" soap:encodingStyle="http://www.w3.org/2001/12/soap-encoding"> 12345 } http://www.acme.com/phonebook/UserDetails/12345

3. technische universität dortmund 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) 3 Source. Dietmar Jannach, WT

4. technische universität dortmund 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 4 Source. Dietmar Jannach, WT

5. technische universität dortmund Ajax in 10 seconds function createRequestObject() { var ro; var browser = navigator.appName; if(browser == "Microsoft Internet Explorer"){ ro = new ActiveXObject("Microsoft.XMLHTTP"); } else { ro = new XMLHttpRequest(); } return ro; } var http = createRequestObject(); 5 http://rajshekhar.net/blog/archives/85-Rasmus-30-second-AJAX-Tutorial.html 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]; } } } [foo] Source. Dietmar Jannach, WT

6. technische universität dortmund AJAX in 10 seconds – continued Some PHP script (rpc.php) … switch($_REQUEST['action']) { case 'foo': / do something / echo "foo|foo done"; break;... } 6 The in the HTML page will become foo done

7. technische universität dortmund 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 7

8. technische universität dortmund 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" ] } 8

9. technische universität dortmund … same in XML Mary Lebow 5 Main Street San Diego, CA 619 332-3452 664 223-4667 9

10. technische universität dortmund The advantage in JavaScript // Remember AJAX call var jsonRaw = http.responseText; var jsonContent = 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 + " "; response += jsoncontent.addressbook[i].address.city + " "; response += jsoncontent.addressbook[i].address.zip + " br>"; } document.getElementById("addressBookResults").innerHTML = response; 10

11. technische universität dortmund 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 11

12. technische universität dortmund 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 12

13. technische universität dortmund 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 13 https://www6.software.ibm.com/developerworks/education/x-ajaxtrans/x-ajaxtrans-a4.pdf

14. technische universität dortmund IFRAME example – the client function handleResponse(msg) { if (msg == 'server1') document.getElementById("RSIFrame").contentDocument.location.replace("html1.php") ; else document.getElementById("RSIFrame").contentDocument.location.replace("html2.php") ; } <iframe id="RSIFrame" name="RSIFrame" style="width:100px; height:100px; border: 1px solid black" HTML 1 HTML 2 14

15. technische universität dortmund A "server" (server1.html) window.parent.handleResponse("server1"); 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 15

16. technische universität dortmund Using the tag Tag can be used to download any type of information from the server Server can be anywhere! Idea : The "src" attribute of the 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? 16

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

18. technische universität dortmund 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.. 18

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

20. technische universität dortmund 20 Net Specific Encryption Application Telnet TCP/UDP IP De/Encryption Network Layer Application Telnet TCP/UDP IP De/Encryption Network Layer Machine AMachine B