Programmieren von Webinformationssystemen. JavaScript AJAX HTTP - REST

Größe: px

Ab Seite anzeigen:

Download "Programmieren von Webinformationssystemen. JavaScript AJAX HTTP - REST"

Kerstin Reuter
vor 8 Jahren
Abrufe

1 Programmieren von Webinformationssystemen JavaScript AJAX HTTP - REST

2 Interaktive Webseiten 1

3 Interaktionsmechanismen im Web Mittels Page Reload: Links HTML-Forms Inhalt und Design vermischt Ohne Page Reload: JavaScript AJAX (Kommunikation mit Server über z.b. REST-Schnittstelle) 2

4 Interaktionsmechanismen im Web Mittels Page Reload Ohne Page Reload

5 Skriptsprache In Webseiten einbettbar Erste Version 1995 JavaScript!= Java Objektorientiert Prototyp basiert Teilweise funktional Dynamisch typisiert JavaScript 4

6 DOM-Scripting JS - Anwendungsgebiete 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

7 Einbettungsmöglichkeiten: Inline: JS-Einbetten <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">

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

9 Zeichenketten: Single Ticks: 'Hello' Double Quotes: "World" Arrays: [ 1, 2, 3, 20, 21 ] Assoziative Arrays: JS-Literals { firstname: 'John', lastname: 'Doe' } Zahlen: 0.0, 1, 5 Basis für JSON (JavaScript Object Notation)

10 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

11 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

12 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

13 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');

14 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();

15 AJAX Asynchrone HTTP Datentransfers mittels JavaScript Ermöglicht durch das XMLHttpRequest Objekt des Browsers Siehe: 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();

16 HTTP + REST

17 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

18 HTTP cont. Request Message: A request line: Method URI Protocol version MIME-like headers: Request modifiers Client-Information Payload Metadata Payload body (if any) 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

19 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 18

20 HTTP-Example Get request: GET /hello.txt HTTP/1.1 User-Agent: curl/ libcurl/ OpenSSL/0.9.7l zlib/1.2.3 Host: Accept: */* Response: HTTP/ OK Date: Mon, 27 Jul :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! 19

21 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. 20

22 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) 21

23 Uniform Resource Identifiers Special URI-types: Uniform Resource Locator - URL: Subtype of URIs for locating resources on the net Uniform Resource Names URN 22

24 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 23

25 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 24

26 REST examples GET: >> GET /user HTTP/1.1 >> Host: >> Accept: text/html << HTTP/ OK << Content-Type: text/html; charset=utf-8 << Content-Length: nnn <<... << <ul> << <li><a href="/user/doe">j.doe</a></li> <<... << </ul> DELETE: >> DELETE /user/doe HTTP/1.1 >> Host: POST: >> POST /user HTTP/1.1 >> Host: >> Content-Type: application/x-www-formurlencoded >> PUT: >> login=doe&first=john&last=doe << HTTP/ CREATED << Location: /user/doe >> PUT /user/doe HTTP/1.1 >> Host: >> Content-Type: application/x-www-formurlencoded >> >> login=smith&first=john&last=smith << HTTP/ No Content << HTTP/ Permanent Redirect << Location: /user/smith 25

27 Well Known Webservices Purely REST-based services: Amazon S3 (Simple Storage Service) OpenSocial API MySpace API Flickr Twitter Hybrid/REST-like services: Yahoo APIs Google AJAX Search API DIGG API Delicious API 26

28 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 [4] REST - Representational State Transfer, Roy Thomas Fielding [5] Standard ECMA

Ähnliche Dokumente

Web-Konzepte für das Internet der Dinge Ein Überblick

Web-Konzepte für das Internet der Dinge Ein Überblick Samuel Wieland sawielan@student.ethz.ch ETH Zürich Seminar Das Internet der Dinge Historisches Tim Berners-Lee Erster Web-Server Bildquelle: Wikimedia