28
Was ist AJAX? Ajax ist die Abkürzung für: Asyncronous JavaScript And XML
Ajax stellt eine Kombination aus mehreren Technologien da: Javascript XML und XMLHTTPRequest DOM CSS ServerseitigeWeb-technologien PHP Web Services
Beispiele für AJAX Google Suggest ist eine Erweiterung der Internet-
Suchmaschine Google, bei der während des Tippens eines Suchworts bereits beliebte Stichworte, die ein entsprechendes Präfix besitzen, mit einer geschätzten Trefferzahl aufgelistet werden.
Google Maps – dynamisches Nachladen von Teilen der Karte
Beispiele für AJAX Google Suggest Google Maps
Wozu wird AJAX gebraucht? Applikationen wie Desktop Anwendungen
Intuitive Bedienung, schneller – Browser als Rich Client – Benutzt für „Sozialsoftware“
Komplette Webbasierte Betriebssysteme (z.B. eyeOS) der als Web Desktop dient.
Mailprogramme/Groupware (OpenXchange, roundcube, Scalix)
Instant Messenger, Textverarbeitung, Tabellenkalkulation.
Customer Relationship Management, kurz CRM(Baustein für Beziehungsmarketing) und vieles mehr.
Vorteile/Nachteile Vorteile: – Kein extra Browser Plugin nötig Im Gegensatz zu Flash oder Java wird AJAX von den
Browsern nativ unterstützt Die Wartezeit auf Reaktionen wird verringert(Latenzzeit). Der Rest der Seite kann weiterhin benutzt werden während
eine Anfrage an den Server gestellt wird. –Weniger Serverlast Es werden nur die Daten übertragen die auch wirklich nötig
sind, nicht jedes mal die komplette Seite – Standardtechnologien (z.B. JavaScript / XML) -> ausgereift,
stabil
Vorteile/Nachteile Nachteile
Um eine AJAX-Applikation ausführen zu können, muss folgende Punkte erfüllt sein: • JavaScript muss im Browser aktiviert sein • die Unterstützung des XMLHttpRequest Objekts muss vorhanden sein • beim Internet Explorer muss die Ausführung von ActiveX Objekten
aktiviert sein • Suchmaschinen durchlaufen eventuell nicht den dynamischen Content
– Umfangreiche Tests der Anwendung nötig Jeder Browser verhält sich etwas anders
– „Zurück“ Schaltfläche Die User sind gewöhnt die Zurück Schaltfläche des Browsers zu
verwenden um in dem vorherigen Zustand zurück zukehren -> Browser kennt aber normalerweise nur ganze Seiten
Neue Architektur mit Ajax 1.Nutzer lädt per URL eine HTML-Seite auf seinen Rechner
2. Der Browser stellt diese Seite dar:
DOM-API (DocumentObjectModel)
3. Eine Aktion des Nutzer (Event: Maus, Tastatur) löst
eine asynchrone Anfrage an eine weitere URL aus.
4. Der Browser erhält Daten zurück und analysiert die
vorhandenen Daten.
5. Der DOM-Baum wird aktualisiert und die Veränderung
wird sichtbar.
Die Seite wird nicht neu geladen!
Der DOM Tree<TABLE>
<TBODY><TR>
<TD>Shady Grove</TD><TD>Aeolian</TD>
</TR><TR>
<TD>Over the River,Charlie</TD>
<TD>Dorian</TD></TR>
</TBODY></TABLE>
Web-Seiten als DOM-Tree Der Browser stellt die DOMTree
direkt dar.
Funktionen (in AJAX/Javascript)
erlauben den DOMTree
zu ändern
Änderungen werden
sofort sichtbar
Neue Architektur mit Ajax 1.Nutzer lädt per URL eine HTML-Seite auf seinen Rechner
2. Der Browser stellt diese Seite dar:
DOM-API (DocumentObjectModel)
3. Eine Aktion des Nutzer (Event: Maus, Tastatur) löst
eine asynchrone Anfrage an eine weitere URL aus.
4. Der Browser erhält Daten zurück und analysiert die
vorhandenen Daten.
5. Der DOM-Baum wird aktualisiert und die Veränderung
wird sichtbar.
Die Seite wird nicht neu geladen!
JavaScript: Events Benutzerinteraktionen (Maus, Tastatur) lösen Events aus. Arten von Events Verschiedene Eventtypen („onclick“, „onMouseOver“,
„onKeyPressed“,…) Definierbar für HTML-Tags („body“, „input“, „h1“, …)
Events können mit Aktionen verknüpft werden Aktionen werden in JavaScript geschrieben
Beispiele:<body onload="alert('Herzlichwillkommen!')"><input type="button" id="buttonnett"
value="klickmich" onclick="alert('Danke!')">
Wie unterscheidet sich eine Klassiches Modell von einem Ajax Modell? „AJAX-Engine“ in JavaScript „AJAX-Engine“ kann den
DOM-Tree modifizieren→ dynamische Veränderungender Webseite
Kernaufgabe: Asynchroner Aufruf des Webservers→ XMLHTTPRequest
Dynamische Modifikation der Webseite mit derServer-Antwort.
Wie unterscheidet sich AJAX vonanderen Standard HTML?
Antwort erfolgt erst nach vollständiger Übertragung aller angeforderten Daten
Anfrage bleibt aktiv, bis Antwort vom Server erzeugt wurde -> Blockade des weiteren Programmablaufs
Antwort des Servers erfolgt sofort
-> Requests sind nicht an den Rhythmus von „Formular absenden“ oder „Seite laden“ usw. gebunden
Nächster Request kann gestellt werden, noch bevor vorheriger beantwortet wurde
Wie unterscheidet sich AJAX vonanderen Standard HTML?
Ergebnis nach der Übertragung komplett verfügbar
keine Statusinformationen während Datenübertragung verfügbar ->bei längeren Datenübertragungen wird vom Anwender oft abgebrochen
beliebige Elemente einer Seite können isoliert und aktualisiert werden.
aktueller Status wird während der Anfrage ständig geliefert -> optimale Kontrolle über den Ablauf der Anfrage an den Server
XMLHTTPRequest (XHR) XHR ist eine Applikation zum Transfer von beliebigen Daten über
das Protokoll HTTP. Wenn eine Anfrage XML-Daten liefert, kann XMLHttpRequest
diese alternativ als DOM-Baumstrukturzurücksenden Letzteres eignet sich beispielsweise dazu, mit Web Services zu
kommunizieren.
XHR ermöglicht mittels JavaScript Client/Server-Kommunikation.
XHR Anfragen werden asynchron verarbeitet ein Script muss nicht warten, bis die Anfrage beantwortet wird,
sondern kann solange andere Aufgaben abarbeiten.
Methoden des XHR ein gültiger Request benötigt mindestens die Methoden open() und send().
open(method, url[,syncFlag, username, password]) • startet Anfrage an den Server • erwartet Methode: meist GET • Angabe der URL für gefordertes Dokument (z.B. XML oder Text) • Art der Übertragung wird durch syncFlag angegeben: • true – asynchron (default) • false - synchron
• bei method = PUT oder DELETE Authentifizierung auf dem Server ist notwendig: • username • passwort
•Beispielaufruf minimal: xhr.open(“GET“,“beispiel.xml“);
Methoden des XHR send(body|null)
• optional kann Inhalt mit übergeben werden: String, DOM-Objekt, XML-Objekt,
zB. Formulareingabedaten, …
• Beispielaufrufe: xhr.send(null); xhr.send(“ “); xhr.send(xml);
setRequestHeader() • dient der Übergabe von Headerinformationen an den Server
• muss vor der send-Methode stehen
• kann mehrfach hintereinander aufgerufen werden, um mehrere Request-Header zu setzen
• es können zusätzlich eigene Merkmale definiert werden
• Beispielaufrufe:
xhr.setRequestHeader(“Accept“,“image.gif“); //offizieller Http_header xhr.setRequestHeader(“PersonalExample“,“value“); //eigenes Merkmal
Methoden des XHR getAllResponseHeaders(); getResponseHeader()
• liefern Headerinformationen des Servers • ResponseHeader sind zum Teil browserspezifisch impelementiert
abort()
• beendet einen Response vorzeitig, z.B. bei Zeitüberschreitung einsetzbar
•onreadystatechange • ist ein EventHandler und dient dazu, den aktuellen Status der Anfrage zu
erfahren • wird in Verbindung mit der Eigenschaft readyState verwendet • eine zugewiesene Funktion kann ausgelagert oder direkt an den Handler
gebunden werden var xhr.onreadystatechange = function(); // Funktion direkt
an Handler gebunden
Methoden des XHR readyState, status und statusText können gemeinsam genutzt werden um für
den jeweiligen Zustand eine Aktion anzubieten: if (req.readyState == 4){ //request erfolgreich ausgeführt? if (req.status==200 || req.statusText==“OK“){
//gültiges Dokument im resp.? … Antwort verarbeiten …} else { … Fehler in der Anfrage… alert(“ERROR: \n“: + req.statusText); }} //Ausgabe der Fehlerinfo des Servers
Attribute des XHR readyState
ändert seinen Wert von 0 zu 4 welches “ready” meint. status
200 ist OK; 404 wenn Fehler “the page is not found”. responseText
enthält die Serverantwort (als String ). responseXml
enthält die Antwort (als XML-File). onreadystatechange
enthält die Funktion als Wert, die Aufgerufen wird, wennder XHR beantwortet wird.
Eigenschaften des XHR 0: uninitialized -> Request wurde noch nicht durch open() ausgelöst.
1: loading ->Request wird gestartet, wurde aber bisher noch nicht abgeschickt.
2: Loaded->Request wurde durch send() ausgeführt, die
Serverantwort steht noch aus.
3: Interactive-> Übertragung der Serverantwort läuft, Teile davon sind.
4: complete-> Request wurde vollständig ausgeführt und beendet.
Generierung XHR if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();// Erzeugung des XMLHttpRequest// Firefox, Safari, ...
} else if (window.ActiveXObject) // ActiveX version{
xhr = new ActiveXObject("Microsoft.XMLHTTP"); // Internet Explorer
}
Generierung XHR xhr.open("GET",„Datei",true);
xhr.onreadystatechange = function()
{ if (xhr.readyState==4) // XMLHttpRequestbeendet{ if (xhr.status == 200)//http status 200 : ok
{ var d = document.getElementById("hallo"); //Auswahl der Einfügestelle in die XHTML-// Seite mit DOM - Methodend.innerHTML = xhr.responseText; // Einfügen der Serverantwort in XHTMLalert(xhr.responseText); // Ausgabe der Serverantwort als Dialogbox
} } }
xhr.send(null)
Neue Architektur mit Ajax 1.Nutzer lädt per URL eine HTML-Seite auf seinen Rechner
2. Der Browser stellt diese Seite dar:
DOM-API (DocumentObjectModel)
3. Eine Aktion des Nutzer (Event: Maus, Tastatur) löst
eine asynchrone Anfrage an eine weitere URL aus.
4. Der Browser erhält Daten zurück und analysiert die
vorhandenen Daten.
5. Der DOM-Baum wird aktualisiert und die Veränderung
wird sichtbar.
Die Seite wird nicht neu geladen!
Änderung des DOM-Trees Veränderungen werden sofort vom Browser
dargestellt
Literatur
http://de.wikipedia.org/wiki/Ajax_(Programmierung) Folien: Prof. Dr.-Ing. Grit Behrens. AJAX: Johannes Gamperl . ISBN:3-89842-764-1.
AJAX
Danke!
