AJAX. Autor: Othmane Mihfad

Transkript

1 AJAX Autor: Othmane Mihfad

2 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

3 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

4 Beispiele für AJAX Google Suggest Google Maps

5 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.

6 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

7 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

8 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!

9 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>

10 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

12 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!')">

13 Wie unterscheidet sich eine Klassiches Modell von einem Ajax Modell? AJAX-Engine in JavaScript AJAX-Engine kann den DOM-Tree modifizieren dynamische Veränderungen der Webseite Kernaufgabe: Asynchroner Aufruf des Webservers XMLHTTPRequest Dynamische Modifikation der Webseite mit der Server-Antwort.

14 Wie unterscheidet sich AJAX von anderen 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

15 Wie unterscheidet sich AJAX von anderen 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

16 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.

17 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 );

18 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

19 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

20 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

21 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, wenn der XHR beantwortet wird.

22 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.

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

24 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 - Methoden d.innerhtml = xhr.responsetext; // Einfügen der Serverantwort in XHTML alert(xhr.responsetext); // Ausgabe der Serverantwort als Dialogbox } } } xhr.send(null)

26 Änderung des DOM-Trees Veränderungen werden sofort vom Browser dargestellt

27 Literatur Folien: Prof. Dr.-Ing. Grit Behrens. AJAX: Johannes Gamperl. ISBN:

28 AJAX Danke!