STAATLICHANERKANNTEFACHHOCHSCHULE

Author: Dip.-Inf. (FH) Johannes HoppeDate: 08.12.2010

STUDIERENUND DURCHSTARTEN.

STAATLICHANERKANNTEFACHHOCHSCHULE

RIA – Rich Internet Applications

Author: Dip.-Inf. (FH) Johannes HoppeDate: 08.12.2010

Message Exchange Patterns

0109.04.2023

Folie 3

Message Exchange Patterns

General

› I use Microsoft terminology which bases on› SOAP terminology

› I will only introduce the most common patterns› Patterns are always general solutions

› and do not relay on a special platform or transport protocol!

› Book recommendations:› Tanenbaum / Steen: Distributed Systems: Principles and Paradigms› Lowy: Programming WCF Services

09.04.2023

Folie 4

Message Exchange Patterns

Request-Reply

09.04.2023

Folie 5

Most common:Client issues a request in the form of a message, and blocks until he gets the reply message.

Message Exchange Patterns

One-Way

09.04.2023

Folie 6

Fire-and-forget:Client issues the call, but no correlated reply message willever return to the client.(Except network errors)

Message Exchange Patterns

Duplex (callback)

09.04.2023

Folie 7

2x One-Way:Both parties have a server roleand can call each other.

„Classic“ Surfing (Synchronous Dataflow)

09.04.2023

Folie 8

page1.php page2.php page3.php

Data processing... Data processing…

Message Exchange Patterns

Discussion:

Which patternis used for AJAX?

09.04.2023

Folie 9

Asynchronous Dataflow

09.04.2023

Folie 10

Data processing... Data processing…Data processing... Data processing...

Message Exchange Patterns

AJAX

09.04.2023

Folie 11

› Request-Replay that is not blocking the browser’s UI(by using a separate thread!)

› W3C: XMLHttpRequest› According to HTTP/1.1, a client should only

have two connections open to one host at the same time Own queuing has to be implemented!

Message Exchange Patterns

Questions?

?

09.04.2023

Folie 12

Protocols and Formats

0209.04.2023

Folie 13

Protocols and Formats

Endpoint

› is the fusion of the Address, Binding and Contract

09.04.2023

Folie 14

Example:› A – http://test.com/service› B – HTTP› C – Methods to call

› “Explicit style”: WSDL + SOAP› “Implicit style”: REST / JSON

Protocols and Formats

09.04.2023

Folie 15

SOAP

Protocols and Formats

09.04.2023

Folie 16

REST

Protocols and Formats

› SOAP: Simple Object Access Protocol› for Remote Procedure Calls, standardized but complex› Implements a webservice› Bases on XML (much traffic)› On top of HTTP / HTTPS› URI usually stays unchanged, GET: http://test.com/service› Hard to implement “by hand”

› WSDL: Web Services Description Language› Meta Language› Describes webservice’s methods› Bases on XML (much traffic)› Hard to implement “by hand”

09.04.2023

Folie 17

Protocols and Formats

09.04.2023

Folie 18

“REST is an architectural style that is only present when all of itsconstraints are met.”

Thomas Roy Fielding, 2003 on http://tech.groups.yahoo.com/group/rest-discuss/message/3623

Protocols and Formats

› REST: Representational State Transfer

› Paradigm change: describes a very simple architecture with known standards› Implements a webservice› Note: there is no "official" standard for RESTful web services› “Leverages” the full potential of HTTP (URIs, verbs, status codes)› Usually XML or JSON are used as the “protocol” for transferring data› Easy to implement “by hand”

09.04.2023

Folie 19

Protocols and Formats

› REST: Example

GET: http://test.com/service --> Result + Status code: 200 OK POST: http://test.com/service/1 --> Status code: 201 Created PUT: http://test.com/service/1 --> Status code: 202 Accepted DELETE: http://test.com/service/1 --> Status code: 205 Reset Content

09.04.2023

Folie 20

Protocols and Formats

› JSON: JavaScript Object Notation

› Used for serializing data› Lightweight and text-based› bases on a subset of the JavaScript programming language› Uses the object-style {key:value} and [array-style] notation› Elements: Number, String, Boolean, Object {}, Arrays [] and null

09.04.2023

Folie 21

Protocols and Formats

› JSON: JavaScript Object Notation

09.04.2023

Folie 22

{ "Name": "Johannes Hoppe", "Address": { "Street": "Musterstraße 1", "City": "Musterstadt", "PostalCode": "12345", "Country": "Germany" }, "Dogs": [ "Abby", "Ronja" ]}

Protocols and Formats

› Firebug

09.04.2023

Folie 23

Protocols and Formats

Questions?

?

09.04.2023

Folie 24

jQuery

0309.04.2023

Folie 25

jQuery

› Most popular, cross-browser JavaScript library› Focusing on making client-side scripting of HTML simpler

› Easy navigating the DOM› Handling events› Working with Ajax

› Open-source, released in 2006

09.04.2023

Folie 26

jQuery

Advantages› Lightweight› Easy to learn using familiar CSS syntax:

$(‘#id').hide().css('background', 'red').fadeIn(); › Many, many plugins available› Easy to extend and compatible› Rich community

09.04.2023

Folie 27

jQuery

Microsoft & jQuery

› It’s on Microsoft’s “radar”› Included with Visual Studio in both WebForms and MVC projects› Open-source contributions by Microsoft:

› Templating› Data Linking and› Globalization

09.04.2023

Folie 28

jQuery

Before jQuery:

<script type="text/javascript"> /* WTF??? */ window.onload = function() { document.getElementById('testButton').onclick =

function() { document.getElementById('xyz').style.color = 'red'; }; };</script>

09.04.2023

Folie 29

jQuery

With jQuery:

<script type="text/javascript" src=“/Scripts/jquery-1.4.1.min.js"></script><script type="text/javascript"> $(document).ready(function () {

$('#testButton').click(function () { $(this).addClass("redCssClass"); }); });</script>

09.04.2023

Folie 30

jQuery

DEMO

09.04.2023

Folie 31

jQuery

jQuery fundamentals: $

› $ function (aka jQuery() function) returns…› a JavaScript object containing an array of DOM elements› in the order they were found in the document› Matching a specified selector (for example a CSS selector)

$("div.someClass").show();

09.04.2023

Folie 32

Finds all DIVs withClass someClass andSets them visible

jQuery

jQuery fundamentals: $

› Returned elements can be chained:

$("div.someClass").show().addClass("SomeOtherClass");

09.04.2023

Folie 33

To the same set, thisadds another class

jQuery

jQuery fundamentals: the ready handler

› Script execution should wait until DOM elements are ready› window.onload waits for everything to be loaded too late! › jQuery’s Ready:

wait only until the DOM tree is created cross-browser situations

09.04.2023

Folie 34

$(document).ready(function() { $("div.someClass").show();});

jQuery fundamentals: selectors

› CSS selectors

› Child selector

jQuery

$("p a.someClass")

$("p a.someClass, div")

$("ul.someList > li > a")

Selects all a’s with someClass

applied within a paragraph....also includes all DIVsSelects all links, directly in an LI,

within an UL with someList class

jQuery fundamentals: selectors

› Attribute selector

jQuery

Selects all links that contain a reference to site test.de

$("a[href*='http://test.de']")

$("span[class^='some']")

$("span[class]")

Select all SPANs whose class

attribute starts with some

Select all SPANs that have a class

jQuery fundamentals: selectors

› Position

› Psuedo-classes

jQuery

$("a:first")

$("div:even")

Selects first A we can findSelects the “even” DIVs

$("input:checked")

$(":password")

$("input:not(:checked)")

Selects checked inputsWill selects all INPUTs of type

password

jQuery

DEMO

09.04.2023

Folie 38

jQuery

jQuery fundamentals: more to learn

http://api.jquery.com

09.04.2023

Folie 39

jQuery

Simple Ajax with jQuery

› To load content from a server-side resource: load()

09.04.2023

Folie 40

$('#result').load('ajax/test.html');Load data from the server and

place the returned HTML

into the matched element.

jQuery

More advanced Ajax with jQuery

09.04.2023

Folie 41

$.ajax({type: "post",contentType: "application/json; charset=utf-8",dataType: "json",url: "/WebNote/AddNote",data: JSON.stringify(data)

});Note: no callbackwas defined here!

jQuery

09.04.2023

Folie 42

More AJAX: next week!

THANK YOUFOR YOUR ATTENTION

09.04.2023

Folie 43