Presentation is loading. Please wait.

Presentation is loading. Please wait.

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

Similar presentations

Presentation on theme: "Technische universität dortmund Service Computing Service Computing Prof. Dr. Ramin Yahyapour IT & Medien Centrum 24. November 2009."— Presentation transcript:

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: 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 function sndReq(action) {'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 ( {"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] + " "; response += jsoncontent.addressbook[i] + " 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

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") ; }

Ads by Google