Einführung in AJAX - hdm-stuttgart.de · 1 Einführung in AJAX Seminar Internet SS2007 Von...

Click here to load reader

  • date post

    29-Mar-2019
  • Category

    Documents

  • view

    220
  • download

    0

Embed Size (px)

Transcript of Einführung in AJAX - hdm-stuttgart.de · 1 Einführung in AJAX Seminar Internet SS2007 Von...

1

Einfhrung 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 Datenbertragung an

A wie asynchron - Aufbau von Ajax.js

- Kern der asynchronen Datenuebertragung: XHR-Eigenschaften onreadystatechange

Zeiger auf Callbackfunktion

3

4

5

eBay ohne XML

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

2. Unsere Anfragen und Antworten werden vom Webbrowser durchgefhrt, 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 "zurckrufen" (Callback-Funktion).

6

DOM Der Browser verwendet das DOM zur Darstellung der Website. Fr jeden Knoten im Baum erzeugt der Browser ein neues Objekt. Das Ergebnis ist ein Bndel "verknpfter" Objekte. Um Text in HTML-Anzeigeelementen wie oder zu ndern, mssen wir DOM verwenden.

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

7

eBay mit XML

bersicht

8

XML vs. JSON

9

Frameworks Kapselung der Komplexitt selbst muss weniger JavaScript programmieren

- Prototype: weit verbreitetes Framework, hufig Basis fr andere Farmeworks

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

- Dojo: rein clientseitiges Framework - Script.aculo.us: eine Effektbibliothek fr 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.

10

Kurz angemerkt: Nachteile von Ajax

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

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" - Einfhrung 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