Folien

Transcription

Folien

Interaktive Webseiten
Web based information
systems
1
Interaktionsmechanismen im Web
•  Mittels Page Reload:
•  Links
•  HTML-Forms
•  Inhalt und Design vermischt
•  Ohne Page Reload:
•  JavaScript + AJAX
•  Inhalt aktualisiert
systems
2
Vermischung von Inhalt und Design
Menu
Schaltflächen
Tabelle
Form
<div id="module-menu">!
<ul id="menu">!
<li class="node"><a>Site</a>!
<ul style="width: 124px;">!
<li class="" style="width: 124px;">!
<tr>!
<a class="icon-16-cpanel" href="index.php">Kontrollzentrum</a>!
<td width="100%"
align="left">!
</li>!
<li style="width: 124px;" class="separator"><span></span></li>!
Filter:!
class="" style="width:
124px;">!
<input<li
type="text"
onchange="document.adminForm.submit();“
!
<a class="icon-16-user" href="index.php?option=com_users&task=view">Benutzer</a>!
class="text_area" value="" id="search" name="search"/>!
</li>!
!<button
<li
class="" onclick="this.form.submit();">Los</button>!
style="width: 124px;">!
<a class="icon-16-media"
href="index.php?option=com_media">Medien</a>!
!<button
!
</li>!
onclick="document.getElementById('search').value='';this.form.submit();">!
!
! class=""
Zurücksetzen!
<li
style="width: 124px;">!
!</button>!
<a class="icon-16-config" href="index.php?option=com_config">Konfiguration</a>!
</td>! </li>!
<td nowrap="nowrap">!
<li class="" style="width: 124px;">!
<select <a
onchange="submitform(
);" !
class="icon-16-logout" href="index.php?option=com_login&task=logout">Abmelden</a>!
size="1" class="inputbox" id="filter_state" name="filter_state">!
</li>!
</ul>! selected="selected" value="">- Status wählen -</option>!
<option
</li>! value="P">Freigegeben</option>!
<option
<li class="node"><a>Menüs</a>!
<option
value="U">Gesperrt</option>!
<ul style="width:
134px;">!
</select>
!
!
!!
!
!<li style="width:
134px;">!
!
!.!
</td>!
!.!
</tr>!!
!
!.!
systems
3
Interaktionsmechanismen im Web
Mittels Page Reload
Ohne Page Reload
JavaScript
•  Skriptsprache
•  In Webseiten einbettbar
•  Erste Version 1995
•  JavaScript != Java
•  Objektorientiert
•  Prototyp basiert
•  Teilweise funktional
•  Dynamisch typisiert
systems
5
JS - Anwendungsgebiete
•  DOM-Scripting
-  Manipulation der Dokumentenstruktur
-  Eventbehandlung
•  Validierung von Formularen
•  Daten Senden bzw. Nachladen (AJAX)
•  HTML5 – Rich Internet Applications:
-  Zeichnen (Canvas)
-  3D-Grafiken (WebGL)
-  Videos abspielen
-  Musik steueren
JS-Einbetten
•  Einbettungsmöglichkeiten:
-  Inline:
<html>!
<head>!
!<title>Test</title>!
!<script type="text/javascript">alert("Hallo Welt!");</script>!
</head>!
<body>...!
-  Separate Datei:
<html>!
<head>!
!<title>Test</title>!
!<script src=“srcfile.js" type="text/javascript">!
JS-Grundlagen
•  Syntax an C angelehnt (vgl. Java, PHP...)
•  Alles Objekt: Numbers, Strings, Date, Array, Function
•  Variablendeklaration:
-  var x = 'Hallo World';!
-  Deklaration mittels var beschränkt Geltungsbereich!
•  Funktiondeklaration:
var greet = function(name) {!
!!
!alert('Hallo ' + name);!
!!}!
JS-Literals
•  Zeichenketten:
-  Single Ticks: 'Hello'!
-  Double Quotes: "World"!
•  Arrays:
[ 1, 2, 3, 20, 21 ]!
•  Assoziative Arrays:
{ firstName: 'John', lastName: 'Doe' }!
•  Zahlen: 0.0, 1, 5!
•  Basis für JSON (JavaScript Object Notation)
JS-Kontrollstrukturen
•  Gängige Kontrollstrukturen analog zu bekannten Sprachen:
-  Bedigungen mittels if/else
-  Switch
-  Schleifen mittels:
•  for(initialiserung; bedingung; schritt)!
•  while(bedingung)!
•  do { } while(bedingung)!
-  For in Schleife:
•  Iteriert über alle Property Namen eines Objektes
•  for(propertyName in object) { }!
•  Achtung: hasOwnProperty verwenden!
JS und OO
•  Objektorientierung in JavaScript ist Prototyp basiert
•  Prototyp basiert:
-  Objektorientierung ohne Klassenkonzept.
-  Objekte werden durch Kopie von anderen Objekten (Prototypen) erzeugt.
-  Jedes Objekt kann Vorlage Prototyp eines neuen Objektes sein
-  Objekte können verändert werden:
•  Eigenschafen hinzufügen/entfernen
•  Methoden hinzufügen/entfernen
-  Objekt kann als Assoziatives Array betrachtet werden:
•  Einträge in diesem Array sind Methoden und Felder
JS und OO
•  Konstruktor eines Objektes ist eine Funktion:
function Vehicle(color) {!
!var privateProperty = 'hidden';!
!this.color = color;!
}!
•  Erzeugung eines neuen Objektes mittels new:
var greenVehicle = new Vehicle('green');!
•  Veränderung an allen Fahrzeugen mittels prototype Eigenschaft:
Vehicle.prototype.speedlimit = 20;!
•  Zugriff auf Konstruktorfunktion:
Vehicle.prototype.constructor!
JS und Vererbung
•  Vererbung:
-  Vorhandenes Objekt als Prototyp einer Konstruktors
-  Konstruktor dieses Prototypen durch eigenen Konstruktor ersetzen
function Car(brand) {!
this.brand = brand;!
}!
Car.prototype = greenVehicle;!
Car.prototype.constructor = Car;!
var greenHonda = new Car('honda');!
JS und Vererbung
•  Super Call:
-  Verwendung von call oder apply
-  Call bzw apply bindet anderes this Objekt!
function Parent() { };!
Parent.prototype.greet = function(name) {!
alert('Hello ' + name);!
} !
function Child() { };!
Child.prototype = new Parent();!
Child.prototype.greet = function() {!
Parent.prototype.greet.call(this, 'World');!
}!
Child.prototype.constructor = Child;!
new Child().greet();!
AJAX
•  Asynchrone HTTP Datentransfers mittels JavaScript
•  Ermöglicht durch das XMLHttpRequest Objekt des Browsers
•  Siehe: http://www.w3schools.com/ajax/ajax_example.asp
•  Beispiel:
var xmlhttp=new XMLHttpRequest();!
xmlhttp.onreadystatechange=function() {!
!if(xmlhttp.readyState==4 && xmlhttp.status==200) {!
! !alert(xmlhttp.responseText);!
}!
}!
xmlhttp.open("GET","ajax_info.txt",true); !
xmlhttp.send();!
Hypertext Transfer Protocol
•  HTTP is the communication protocol of the web
•  Application level request/response protocol based
•  Stateless
•  Operates by exchanging messages across a reliable transport or
session-layer connection
•  Extensible semantics
•  MIME-like message payloads
•  Interface to client is independent of the types of resources provided
•  Server does not need to be aware of its client‘s purpose
HTTP cont.
•  Request Message:
-  A request line:
•  Method
•  URI
•  Protocol version
-  MIME-like headers:
•  Request modifiers
•  Client-Information
•  Payload Metadata
-  Payload body (if any)
systems
•  Response Message:
–  A status line:
•  Protocol Version
•  Status Code
•  Textual reason
–  MIME-like headers:
•  Response modifiers
•  Server-Information
•  Payload Metadata
–  Payload Body if any
17
HTTP-Methods
•  Specifies unified actions on resources:
-  Unified in terms of a common semantics
•  There exist 8 different methods that are specified in the request line:
-  GET: Requests a specific resource
-  PUT: Creates or modifies a specific resource
-  POST: Submits data to be processed
-  DELETE: Deletes a specific resource
-  HEAD: Same as GET, without payload
-  OPTIONS: Returns specified HTTP-Methods for a resource
-  TRACE: Echoes the request back to the client
-  CONNECT: Used to tunnel arbitrary TCP/IP connections
systems
18
HTTP-Example
•  Get request:
GET /hello.txt HTTP/1.1 !
!User-Agent: curl/7.16.3 libcurl/7.16.3 OpenSSL/0.9.7l zlib/1.2.3 !
!Host: www.example.com Accept: */* •  Response:
HTTP/1.1 200 OK !
!Date: Mon, 27 Jul 2009 12:28:53 GMT !
!Server: Apache !
!Last-Modified: Wed, 22 Jul !
!ETag: "34aa387-d-1568eb00" !
!Accept-Ranges: bytes !
!Content-Length: 14 !
!Vary: Accept-Encoding!
!Content-Type: text/plain!
!Hello World!!
systems
19
Uniform Resource Identifiers - URIs
•  A URI is a compact sequence of characters that identifies an abstract
or physical resource.
•  Uniformity:
-  Allows different types of URIs to be used in the same context
-  Uniform semantic interpretation of common syntactic conventions
-  Allows introduction of new types of resource identifieres without interfering
with existing types
•  Resources can be anything from a webaddress, services to human
beings
•  The URI itself only provides identification; access to the resource is
neither guaranteed nor implied by the presence of a URI.
systems
20
Uniform Resource Identifiers
•  The URI provides only identification
•  General syntax is:
scheme://
/path?query#fragment
-  Scheme: URI type (e.g. http)
-  Authority: optional, (e.g. dbis-informatik.uibk.ac.at)
-  Path: hierarchically structured (e.g. ) (teaching/ss10/is/lect4.htm)
-  Query: non hierarchical data for identification (matrnr=0815)
-  Fragment: references parts within resources (chapter4)
systems
21
Uniform Resource Identifiers
•  Special URI-types:
-  Uniform Resource Locator - URL: Subtype of URIs for locating resources
on the net
-  Uniform Resource Names – URN
systems
22
Web-service Basics
•  Applying advantages of the WWW to federated systems
•  Main focus on automatic data processing
•  Web applications can facilitate web services through separation of
data and layout
•  Two competing architectural styles:
-  SOAP (RPC-Style)
-  REST (REpresentational State Transfer)
•  Hybrid style as a combination of RPC-Style und REST-Style
systems
23
RPC-Style Webservices
•  Development of RPC-Style web services with the characteristics of
existing non web based distributed systems:
-  Ability for tunneling through firewalls
-  Inspired by existing systems like CORBA
•  Main Characteristics:
-  Focus on method calls
-  Single endpoint (URI) for multiple different services
-  XML-based (XML-RPC/SOAP) protocols on top of HTTP
-  HTTP-methods are reduced to POST und minimum number of status
codes.
-  Requires specific clients (not viewable in browser)
systems
24
SOAP-based Webservice
•  Data exchange is done through standardized XML-Protocol (formerly
know as Simple Object Access Protocol)
-  Independent of underlying transaport media (HTTP, SMTP…)
•  Interface description through WSDL (WebService Description
Language)
-  Describes method signatures and data formats
-  Used for code generation
•  UDDI (Universal Description, Discovery and Integration) as naming
service for service lookups
-  The big vendors have already locked down their UDDI services
systems
25
SOAP Web Service Example
•  SOAP-Request Example:!
POST /InStock HTTP/1.1!
Host: www.example.org!
Content-Type: application/soap+xml; charset=utf-8!
Content-Length: nnn!
<?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:Body xmlns:m="http://www.example.org/stock">!
<m:GetStockPrice>!
<m:StockName>DAIMLER</m:StockName>!
</m:GetStockPrice>!
</soap:Body>!
</soap:Envelope>!
systems
26
SOAP Web Service Example
•  SOAP-Response example:!
HTTP/1.1 200 OK!
Content-Type: application/soap+xml; charset=utf-8!
Content-Length: nnn!
<?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:Body xmlns:m="http://www.example.org/stock">!
<m:GetStockPriceResponse>!
<m:Price>34.5</m:Price>!
</m:GetStockPriceResponse>!
</soap:Body>!
</soap:Envelope>!
systems
27
REST-Style Web Services
•  Main focus on resources (also named ROA = Resource Oriented
Architecture)
•  Resources are addressable
•  Resources share a uniform interface
•  Interactions are stateless
•  Resources can have multiple media types: HTML, JSON, RSS,
ATOM, XML, OpenSearch, CSV
systems
28
REST Applied on the Web
•  HTTP as the application protocol
•  The uniform methods correspond to the methods of the HTTP-protocol
•  Every URL is a single resource
•  One resource can have multiple representations depending on the
negotiated media types
•  Facilitates standardized hypermedia formats: HTML/XHTML, Atom,
OpenSearch
•  HTTP Status codes for error handling
•  By this definition every webpage can be treated as a RESTful
interface
systems
29
REST examples
•  GET:!
•  POST:
>> GET /user HTTP/1.1!
>> Host: www.example.org!
>> POST /user HTTP/1.1!
>> Accept: text/html!
>> Content-Type: application/x-www-formurlencoded!
>> !
<< HTTP/1.1 200 OK!
>> login=doe&first=John&last=Doe << Content-Type: text/html; charset=utf-8!
<< Content-Length: nnn!
<< HTTP/1.1 201 CREATED!
<< ...!
<< Location: /user/doe << <ul>!
<<
<li><a href="/user/doe">J.Doe</a></li>!
<< ...!
<< </ul> • 
DELETE:
• 
PUT:
>> PUT /user/doe HTTP/1.1!
>> Content-Type: application/x-www-formurlencoded!
>> DELETE /user/doe HTTP/1.1!
>>!
<< HTTP/1.1 204 No Content!
<< HTTP/1.1 301 Permanent Redirect!
<< Location: /user/smith!
systems
>> login=smith&first=John&last=Smith!
30
Well Known Webservices
•  Purely REST-based services:
-  Amazon S3 (Simple Storage
Service)
-  OpenSocial API
-  MySpace API
•  Hybrid/REST-like services:
-  Yahoo APIs
-  Google AJAX Search API
-  Flickr
-  Twitter
•  SOAP services:
-  Microsoft Live Search
-  Google Search API
(discontinued)
-  Flickr
-  PayPal
-  DIGG API
-  Delicious API
systems
31
SOAP vs. REST
SOAP
REST
Matured standards: WS-*
Lightweight
Relevant in Context of SOA
Architectural principle
Werkzeugunterstützung in den
gängigsten Plattformen
Easy to integrate
Interface Description Language
Usage of standard data formats
Different naming services available
Addressable and interlinked
ressources
XML-based , sometimes huge
overhead
Support of arbitrary data
systems
32
References
[1] HTTP 1.1 / Spec Draft.., Fielding et. Al
[2] Uniform Resource Identifier (URI): Generic Syntax RFC 3986, T.
Berners-Lee et al.
[3] HTML 4.0 Specification
http://www.w3.org/TR/1998/REC-html40-19980424/
[4] REST - Representational State Transfer, Roy Thomas Fielding
[5] Standard ECMA-262
systems
33

Folien

Transcription

Similar documents

„Das Leben des Brian“ im Lateinunterricht

SOTHYS - Europa Hotel Kühlungsborn

Citing of Internet sources