technische universität dortmund service computing service computing prof. dr. ramin yahyapour it...

technische universität dortmund

Service Computing Prof. Dr. Ramin Yahyapour

IT & Medien Centrum24. November 2009


SOAP vs REST

In REST:

<?xml version="1.0"?><soap:Envelopexmlns:soap="http://www.w3.org/2001/12/soap-envelope"soap:encodingStyle="http://www.w3.org/2001/12/soap-encoding"> <soap:body pb="http://www.acme.com/phonebook"> <pb:GetUserDetails> <pb:UserID>12345</pb:UserID> </pb:GetUserDetails> </soap:Body></soap:Envelope>}

http://www.acme.com/phonebook/UserDetails/12345


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


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



Ajax in 10 secondsfunction 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];

} } }

<a href="javascript:sndReq('foo')">[foo]</a>



AJAX in 10 seconds – continued

Some PHP script (rpc.php)

…switch($_REQUEST['action']) { case 'foo': / do something / echo "foo|foo done"; break; ... }

6

The <div> in the HTML page

<div id="foo"> </div>

will become

<div id="foo"> foo done </div>


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


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


… 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>

9


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 + " <br>";

response += jsoncontent.addressbook[i].address.city + " <br>";

response += jsoncontent.addressbook[i].address.zip + " br>";

}

document.getElementById("addressBookResults").innerHTML = response;

10


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


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


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

13https://www6.software.ibm.com/developerworks/education/x-ajaxtrans/x-ajaxtrans-a4.pdf


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>

14


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

15


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?

16


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

function embedScript(url){ var scriptTag = document.createElement("script"); scriptTag.setAttribute("type", "text/javascript");

scriptTag.setAttribute("src", url); document.getElementsByTagName("head")[0]. appendChild(scriptTag);

}

17http://www.redmountainsw.com/wordpress/archives/ajax-and-the-dynamic-script-tag


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


"Direct RIA"

19

AJAX – based C/S communication hidden by framework Client component renders the content; automatically synchronizes client and server states


20

Net Specific Encryption

Application

Telnet

TCP/UDP

IPDe/EncryptionNetwork Layer

Application

Telnet

TCP/UDP

IPDe/EncryptionNetwork Layer

Machine A Machine B

technische universität dortmund service computing service computing prof. dr. ramin yahyapour it...

Documents

var http

wt slide

var ro var browser

web applications web

handleresponse http

action http

ajax techniques

web server