Download - Einführung in AJAX - hdm-stuttgart.de · 1 Einführung in AJAX Seminar Internet SS2007 Von Anna-Lena Martin, Natalie Meffert und Eva Szanto Was ist Ajax?

Transcript
Page 1: Einführung in AJAX - hdm-stuttgart.de · 1 Einführung in AJAX Seminar Internet SS2007 Von Anna-Lena Martin, Natalie Meffert und Eva Szanto Was ist Ajax?

1

Einführung in AJAX Seminar Internet SS2007 Von Anna-Lena Martin, Natalie Meffert und Eva Szanto

Was ist Ajax?

Page 2: Einführung in AJAX - hdm-stuttgart.de · 1 Einführung in AJAX Seminar Internet SS2007 Von Anna-Lena Martin, Natalie Meffert und Eva Szanto Was ist Ajax?

2

Ajax.js

- in Ajax.js steckt die Ajax-Engine - Ajax.js ist eine objekt-orientierte JavaScript - “Klasse“ - Hauptgedanke der Ajax-Engine:

o Aktivitaeten des Servers verlagern o KAPSELN der XHR-Objekt-Funktionen o Ajax-Engine besteht aus Methoden und Eigenschaften

- eigentlich gibt es in JavaScript keine Klassen o Erzeugung durch Kopien normaler Objekte

XMLHttpRequest (XHR)

- Objekt in Webbrowsern, - Programmierschnittstelle (API)

- Über XHR:

o Erzeugung eines Requests o Einlesen der Antwort o Bereitstellung der Antwort zur weiteren Verarbeitung

Methoden des XHR-Objektes: - open(“HTTP-Request-Methode“, “URL“, asynchron?) - send(“Inhalt“)

Eigenschaften des XHR-Objektes: - onreadystatechange: Zeiger auf eine Callback-Funktion - readyState: gibt Zustand der Datenübertragung an

A wie asynchron - Aufbau von Ajax.js

- Kern der asynchronen Datenuebertragung: XHR-Eigenschaften onreadystatechange

� Zeiger auf Callbackfunktion

Page 3: Einführung in AJAX - hdm-stuttgart.de · 1 Einführung in AJAX Seminar Internet SS2007 Von Anna-Lena Martin, Natalie Meffert und Eva Szanto Was ist Ajax?

3

Page 4: Einführung in AJAX - hdm-stuttgart.de · 1 Einführung in AJAX Seminar Internet SS2007 Von Anna-Lena Martin, Natalie Meffert und Eva Szanto Was ist Ajax?

4

Page 5: Einführung in AJAX - hdm-stuttgart.de · 1 Einführung in AJAX Seminar Internet SS2007 Von Anna-Lena Martin, Natalie Meffert und Eva Szanto Was ist Ajax?

5

eBay ohne XML

1. Asynchrone Anwendungen führen Anfragen mit Hilfe eines JavaScript-Objekts und nicht per Formularversand durch.

2. Unsere Anfragen und Antworten werden vom Webbrowser durchgeführt, nicht direkt von unserem JavaScript-Code.

3. Nachdem der Webbrowser eine Antwort auf unsere asynchrone Anfrage erhalten hat, wird er unseren JavaScript-Code mit der Server-Antwort "zurückrufen" (Callback-Funktion).

Page 6: Einführung in AJAX - hdm-stuttgart.de · 1 Einführung in AJAX Seminar Internet SS2007 Von Anna-Lena Martin, Natalie Meffert und Eva Szanto Was ist Ajax?

6

DOM Der Browser verwendet das DOM zur Darstellung der Website. Für jeden Knoten im Baum erzeugt der Browser ein neues Objekt. Das Ergebnis ist ein Bündel "verknüpfter" Objekte. Um Text in HTML-Anzeigeelementen wie <div> oder <span> zu ändern, müssen wir DOM verwenden.

Wenn man das Model mit Hilfe des JavaScript-Codes ändert, verändert sich auch automatisch die Website.

Page 7: Einführung in AJAX - hdm-stuttgart.de · 1 Einführung in AJAX Seminar Internet SS2007 Von Anna-Lena Martin, Natalie Meffert und Eva Szanto Was ist Ajax?

7

eBay mit XML

Übersicht

Page 8: Einführung in AJAX - hdm-stuttgart.de · 1 Einführung in AJAX Seminar Internet SS2007 Von Anna-Lena Martin, Natalie Meffert und Eva Szanto Was ist Ajax?

8

XML vs. JSON

Page 9: Einführung in AJAX - hdm-stuttgart.de · 1 Einführung in AJAX Seminar Internet SS2007 Von Anna-Lena Martin, Natalie Meffert und Eva Szanto Was ist Ajax?

9

Frameworks � Kapselung der Komplexität � selbst muss weniger JavaScript programmieren

- Prototype: weit verbreitetes Framework, häufig Basis für andere Farmeworks

- Mochi Kit : Sammlung von JS Bibliotheken zur Hilfe der Erstellung von Ajax-Anwendungen

- Dojo: rein clientseitiges Framework - Script.aculo.us: eine Effektbibliothek für Ajax Anwendungen - Moo.FX: Effektbibliothek ähnliche visuelle Effekte wie Scriptaculous - Moo Ajax: super-lightweight Ajax Bibliothek in JS - Mad4Milk Integration der Bibliotheken Moo.FX, Moo.Ajax und Moo.Dom

Anmerkungen

Wo wird AJAX verwendet?

Viele weitere Beispiele: Google Maps, Google Mail, Google Text und Tabellen, Flickr, Del.icio.us, Typo 3 ab Version 4.1, AjaxWrite u.v.m.

Page 10: Einführung in AJAX - hdm-stuttgart.de · 1 Einführung in AJAX Seminar Internet SS2007 Von Anna-Lena Martin, Natalie Meffert und Eva Szanto Was ist Ajax?

10

Kurz angemerkt: Nachteile von Ajax

1. JavaScript 2. Besonderheiten der verschiedenen Browser 3. Zurück-Button 4. Lesezeichen 5. Barrierefreiheit 6. Suchmaschinen-Auffindbarkeit

Page 11: Einführung in AJAX - hdm-stuttgart.de · 1 Einführung in AJAX Seminar Internet SS2007 Von Anna-Lena Martin, Natalie Meffert und Eva Szanto Was ist Ajax?

11

Links & Quellen http://www.adaptivepath.com/publications/essays/archives/000385.php (Jesse James Garrett: “Ajax: A New Approach to Web Applications”) http://www.oreilly.de/topics/ajax_links.html (Ajax-Linksammlung: Blogs & Portale, Frameworks und Bibliotheken, Web-2.0-Anwendungen mit AJAX-Kern, Tool) http://www.developer.com/lang/jscript/article.php/3596836 ("Speeding Up AJAX with JSON" - Einführung in JSON, bei der die Unterschiede zu XML herausgearbeitet werden) http://www.drweb.de/leseproben/ajax.shtml ("Ajax: Die Zukunft des Webs?") http://json.org/ ("Introducing JSON") http://www.ajaxian.com ("Most popular Ajax Frameworks") Literatur: "Ajax von Kopf bis Fuß", Brett McLaughlin, O'Reilly Verlag "Ajax - schnell & kompakt", Christian Wenz, entwickler.press