Die Präsentation wird geladen. Bitte warten

Die Präsentation wird geladen. Bitte warten

Michael Hartl und Laurent Steurer. Web 2.0 Web 2.0 Einführung AJAX Einführung AJAX Funktionsweise von AJAX Funktionsweise von AJAX Klassische synchrone.

Ähnliche Präsentationen


Präsentation zum Thema: "Michael Hartl und Laurent Steurer. Web 2.0 Web 2.0 Einführung AJAX Einführung AJAX Funktionsweise von AJAX Funktionsweise von AJAX Klassische synchrone."—  Präsentation transkript:

1 Michael Hartl und Laurent Steurer

2 Web 2.0 Web 2.0 Einführung AJAX Einführung AJAX Funktionsweise von AJAX Funktionsweise von AJAX Klassische synchrone Webapplikation Klassische synchrone Webapplikation Asynchrone AJAX Webapplikation Asynchrone AJAX Webapplikation Verwendete Technologien Verwendete Technologien Eigenschaften und Methoden des Objekts Eigenschaften und Methoden des Objekts AJAX-Frameworks, –Bibliotheken und -IDE AJAX-Frameworks, –Bibliotheken und -IDE Vor- und Nachteile von AJAX Vor- und Nachteile von AJAX Beispiel AJAX Beispiel AJAX Quellen und Schlusswort Quellen und Schlusswort

3 2005 durch Tim OReilly geprägt 2005 durch Tim OReilly geprägt Oberbegriff für neue interaktive Techniken und Dienste des Internets Oberbegriff für neue interaktive Techniken und Dienste des Internets

4

5 steigert Interaktivität von Web-Anwendungen steigert Interaktivität von Web-Anwendungen Konzept für Datenübertragung zwischen Browser und Server Konzept für Datenübertragung zwischen Browser und Server Möglichkeit nur gewisse Teile einer HTML-Seite bei Bedarf nachzuladen. Möglichkeit nur gewisse Teile einer HTML-Seite bei Bedarf nachzuladen. Nicht jede HTTP-Anfrage führt zur Neuübertragung der kompletten Seite Nicht jede HTTP-Anfrage führt zur Neuübertragung der kompletten Seite Stark geprägt von Jesse James Garrett (2005) Stark geprägt von Jesse James Garrett (2005) Schöpfer des Begriffs AJAX Schöpfer des Begriffs AJAX Technologische Grundlagen und Vorgehensweisen bereits vorher bekannt Technologische Grundlagen und Vorgehensweisen bereits vorher bekannt generell unter dem Begriff XMLHttpRequest zusammengefasst generell unter dem Begriff XMLHttpRequest zusammengefasst Frühe Umsetzungen noch ohne XMLHttpRequest Frühe Umsetzungen noch ohne XMLHttpRequest Verfahren erstmals mit IE 5 (1998) Verfahren erstmals mit IE 5 (1998) Erster erfolgreicher Vertreter: Outlook Web Access Erster erfolgreicher Vertreter: Outlook Web Access

6 Modell einer klassischen Webanwendung Modell einer klassischen Webanwendung Modell einer AJAX-Webanwendung Modell einer AJAX-Webanwendung

7 TechnologieAufgabe Hypertext Transfer Protocol (HTTP) Datentransfer über ein Netzwerk eXtensible Markup Language (XML) Asynchroner Datenaustausch eXtensible HyperText Markup Language (XHTML) Beschreibung von Seiteninhalten Cascading Style Sheets (CSS) Aussehen der Website Document Object Model (DOM) Repräsentation der Daten bzw. Inhalte JavaScript - Manipulation DOM - dynamische Darstellung XMLHttpRequest-Object -Daten asynchron mit Webserver austauschen - Bestandteil vieler Browser

8 EigenschaftBeschreibung onreadystatechangeZeiger auf die Funktion welche aufgerufen wird, wenn sich der readyState ändert. (Read/write) ReadyStateStatus des Objektes. 0 : Uninitialisiert 1 : Lädt 2 : Geladen aber Header/Status noch nicht bereit 3 : Interaktiv – Daten sind teilweise geladen 4 : Fertig – Alle Daten sind verfügbar. (Read-only). responseBodyRepresents only one of several forms in which the HTTP response can be returned. Read-only responseStreamRepresents only one of several forms in which the HTTP response can be returned. Read-only responseTextRepresents the response entity body as a string. Read-only responseXMLGeparstes XML aus der Antwort. Read-only statusHTTP-Statuscode, welcher der Webserver zurück geliefert hat. Read-only statusTextStatustext des Webservers. (Read-only)

9 MethodeBeschreibung abortAbbruch der aktuellen Abfrage getAllResponseHeadersLiefert alle Kopfdaten getResponseHeaderLiefert den Wert des Server-Response open- Initialisiert die Abfrage. - Definiert die Request-Art (Get/Post) sendFührt die Abfrage aus SetRequestHeaderSetzt zusätzliche Headerwerte

10 FrameworkBeschreibung SajaxServerseitig, erlaubt PHP-, Perl- und Python-Funktionsaufrufe aus JavaScript PrototypeJavaScript basierende Bibliothek Scriptaculous, RicoErweitert Prototype um GUI-Effekte DojoJavaScript basierende Bibliothek bietet GUI-Effekten (Widgets, Drag&Drop) AjaxAnywhereJava-Framework, integrierbar in JSP und JSF ZKJava-Framework, eventbasiert Ruby on RailsJavaScript basierende Bibliothek mit GUI-Effekten AtlasServerseitig, Ajax-Framework für ASP.NET 2.0 XOADPHP-Framework Google Web Toolkit (GWT)Serverseitig, Compiler übersetzt Java in HTML/Javascript OpenAJAXAllianz der Marktgrössen zu einem gemeinsamen Standard

11

12 ++ Vorteile -- Nachteile Asynchrone Anfragen an den ServerBrowserabhängigkeit Benutzerfreundliche Anwendungenschlechtere Wartbarkeit Verwendung bestehender Technologien Sicherheit geringere Auslastung der BandbreiteZurück-Button und History Unterstützung von vielen Programmiersprachen durch Frameworks Möglichkeit Links zu kopieren (Favoriten) JavaScript im Browser deaktiviert

13

14

15 Document Object Model (DOM) DOM Hallo DOM XML


Herunterladen ppt "Michael Hartl und Laurent Steurer. Web 2.0 Web 2.0 Einführung AJAX Einführung AJAX Funktionsweise von AJAX Funktionsweise von AJAX Klassische synchrone."

Ähnliche Präsentationen


Google-Anzeigen