Multimedia im Netz. Übung zur Vorlesung. Ludwig-Maximilians-Universität Wintersemester 2010/2011

Größe: px

Ab Seite anzeigen:

Download "Multimedia im Netz. Übung zur Vorlesung. Ludwig-Maximilians-Universität Wintersemester 2010/2011"

Anton Hofmeister
vor 7 Jahren
Abrufe

1 Übung zur Vorlesung Multimedia im Netz Ludwig-Maximilians-Universität Wintersemester 2010/2011 Ludwig-Maximilians-Universität München Multimedia im Netz - Übung - 3-1

2 Übungsblatt - 3 Thema: JavaScript / AJAX Anzeigen von Filminformationen, wenn der Benutzer über ein Filmcover fährt. Die Information soll über einen XMLHttpRequest aus einer XML-Datei ausgelesen werden Die Abgabe muss nicht in allen Browsern laufen (Firefox reicht!) Ludwig-Maximilians-Universität München Multimedia im Netz - Übung - 3-2

Die Information soll über einen XMLHttpRequest aus einer XML-Datei ausgelesen werden

3 AJAX Asynchronous JavaScript and XML Vorteil: Seite muss nicht neu geladen werden JavaScript wird benutzt um im Browser eine Anfrage zum Server zu stellen Wird Anfrage beantwortet wird eine Funktion beim Client ausgeführt Server schickt meist aber nicht zwingend XML Dokumente zurück Auf Serverseite können verschiedene Technologien verwendet werden (z.b. Ruby, PHP, CGI,...) Ludwig-Maximilians-Universität München Multimedia im Netz - Übung - 3-3

Server schickt meist aber nicht zwingend XML Dokumente zurück Auf Serverseite können verschiedene Technologien

4 XMLHttpRequest (1) zentrale Komponente von AJAX es ist kein W3C Standard, sodass das Verhalten von Browser zu Browser unterschiedlich sein kann Um Anfragen zu senden oder Antworten zu bearbeiten, muss mit JavaScript zuerst ein XMLHttpRequest-Objekt erstellt werden: Internet-Exlorer: ActiveX Object Firefox, Safari, Opera: JavaScript Object Ludwig-Maximilians-Universität München Multimedia im Netz - Übung - 3-4

mit JavaScript zuerst ein XMLHttpRequest-Objekt erstellt werden: Internet-Exlorer: ActiveX Object

5 XMLHttpRequest (2) ActiveX Objekt im Internet Explorer (Version 5) var xhr = new ActiveXObject("Msxml2.XMLHTTP"); ActiveX Objekt im Internet Explorer (Version 6) var xhr = new ActiveXObject("Microsoft.XMLHTTP"); Natives Objekt in Mozilla, Opera, Safari & Internet Explorer (ab Version 7) var xhr = new XMLHttpRequest(); Ludwig-Maximilians-Universität München Multimedia im Netz - Übung - 3-5

XMLHTTP"); ActiveX Objekt im Internet Explorer (Version 6) var xhr = new ActiveXObject("Microsoft.

6 XMLHttpRequest (3) var xhr; if(window.activexobject){ xhr = new ActiveXObject("Microsoft.XMLHTTP"); } else if(window.xmlhttprequest){ xhr = new XMLHttpRequest(); } Ludwig-Maximilians-Universität München Multimedia im Netz - Übung - 3-6

7 Methoden ein paar wichtige Methoden für das XMLHttpRequest Object: open("method", "url", flag ) method: url: flag: z.b.: GET oder POST Pfad zur Datei true = asynchron false = synchron send(content) Ludwig-Maximilians-Universität München Multimedia im Netz - Übung - 3-7

: GET oder POST Pfad zur Datei true = asynchron false = synchron

8 Eigenschaften onreadystatechange: Reaktion auf jede Zustandsänderung des HTTP-XML- Objekts readystate: Zustand der Anfrage 0 = nicht initialisiert 1 = ladend 2 = geladen 3 = wartet 4 = fertig responsetext: Die Antwort des Servers als String responsexml: Die Antwort des Servers als XML/ als DOM kompatibles Dokument Ludwig-Maximilians-Universität München Multimedia im Netz - Übung - 3-8

fertig responsetext: Die Antwort des Servers als String responsexml: Die Antwort des Servers als

9 Document Object Model (DOM) Mit DOM kann jedes Element und dessen Inhalt in einem HTML (und XML) Dokument referenziert werden Die Elemente, ihr Inhalt und ihre Struktur kann modifiziert werden document: Inhalt der im Browserfenster angezeigt wird getelementbyid(): Greift auf das HTML-Element mit entsprechender ID zu getelementbytagname(): Greift auf Tags anhand ihres Namen zu Konten.firstChild : Liefert den ersten Kindknoten des angegebenen Knoten Knoten.nodeValue: Setzt/Liefert den Wert eines Knotens Siehe auch: Ludwig-Maximilians-Universität München Multimedia im Netz - Übung - 3-9

ID zu getelementbytagname(): Greift auf Tags anhand ihres Namen zu Konten.firstChild : Liefert den ersten Kindknoten des angegebenen Knoten Knoten.

10 Beispiel Auslesen von Text aus einer txt-datei wenn auf einen Button geklickt wird. Ludwig-Maximilians-Universität München Multimedia im Netz - Übung

11 Beispiel (1) <html> <head> <title>example</title> </head> <body> <input type="button" value="ajax Request" onclick="sendrequest();"/> <div id="output"></div> </body> </html> Ludwig-Maximilians-Universität München Multimedia im Netz - Übung

12 Beispiel (2) <html> <head> <title>example</title> <script type="text/javascript"> function sendrequest(){ } </script> createxhr(); xhr.onreadystatechange = output; xhr.open("get", "text.txt"); xhr.send(null);... Ludwig-Maximilians-Universität München Multimedia im Netz - Übung

createxhr(); xhr.onreadystatechange = output; xhr.open("get", "text.

13 Beispiel (3) <html> <head> <title>example</title> <script type="text/javascript"> function sendrequest(){ } </script> createxhr(); xhr = new XMLHttpRequest(); xhr.onreadystatechange = output; } } xhr.open("get", "text.txt"); xhr.send(null); function createxhr(){ if(window.activexobject){ xhr = new ActiveXObject(Microsoft.XMLHTTP); } else if(window.xmlhttprequest) {... Ludwig-Maximilians-Universität München Multimedia im Netz - Übung

txt"); xhr.send(null); function createxhr(){ if(window.activexobject){ xhr = new ActiveXObject(Microsoft.

14 Beispiel (4) <html> <head> <title>example</title> <script type="text/javascript"> function sendrequest(){ } </script> createxhr(); xhr.onreadystatechange = output; xhr.open("get", "text.txt"); xhr.send(null);... Ludwig-Maximilians-Universität München Multimedia im Netz - Übung

15 Beispiel (5) <html> <head> <title>example</title> <script type="text/javascript"> function sendrequest(){ } </script> createxhr(); xhr.onreadystatechange = output; xhr.open("get", "text.txt"); xhr.send(null); function output(){ if(xhr.readystate == 4){ text = xhr.responsetext; document.getelementbyid("output").innerhtml = text; } }... Ludwig-Maximilians-Universität München Multimedia im Netz - Übung

txt"); xhr.send(null); function output(){ if(xhr.readystate == 4){ text = xhr.responsetext; document.

16 Aufgabe Laden Sie sich die XML-Datei news.xml von der Vorlesungswebseite herunter Lesen Sie die Schlagzeilen in der XML-Datei mittels eines XMLHttpRequest aus und zeigen diese im Browser an. Hinweis: Text zwischen Tags wird als DOM-Element betrachtet (Textknoten) und ist Kindknoten des umgebenden Tags. Ludwig-Maximilians-Universität München Multimedia im Netz - Übung

eines XMLHttpRequest aus und zeigen diese im Browser an.

Ähnliche Dokumente

Grundlagen Internet-Technologien INF3171

Grundlagen Internet-Technologien INF3171 ekaay AJAX Version 1.0 01.07.2013 aktuelles 2 Ajax: zunächst Abkürzung für Asynchronous JavaScript And XML Jesse J. Garrett (AdaptivePath) http://www.adaptivepath.com/publications/essays/archives/