JavaScript AJAX. Univ.-Prof. Dr.-Ing. Wolfgang Maass. Chair in Information and Service Systems Department of Law and Economics

Transkript

1 JavaScript AJAX Univ.-Prof. Dr.-Ing. Wolfgang Maass Chair in Information and Service Systems Department of Law and Economics WS 2011/2012 Mittwoch, 8:00 9:30 Raum HS 021, B4 1

2 Wrap-Up JavaScript (JS) ermöglicht es Website- Inhalte client-seitig zu generieren, verändern, validieren und nachzuladen Weniger Datentransfer, schnellere Reaktionszeiten, ermöglicht asynchrone Kommunikation mit dem Server Client Server SV SV Benutzeraktivität Client-seitige Verarbeitung Server-seitige Verarbeitung Datenübertragung Ein-/Ausgabe ( Slide 2

3 Wrap-Up Bis jetzt: alle benötigten Inhalte werden mit dem Aufruf der Website übertragen Wenn nicht alle Inhalte bei diesem Aufruf zur Verfügung stehen (z.b. wg. Größe, Aktualität), muss eine neue Website angefragt werden Client Server SV SV Benutzeraktivität Client-seitige Verarbeitung Server-seitige Verarbeitung Datenübertragung Ein-/Ausgabe ( Slide 3

4 AJAX Asynchronous JavaScript and XML (AJAX) verfolgt den Ansatz nachträglich weitere Inhalte hinzuzuladen Request-Response-Prinzip bleibt verborgen è Webanwendung verhält sich wie eine Desktopanwendung Client Server SV SV SV SV Benutzeraktivität Client-seitige Verarbeitung Server-seitige Verarbeitung Datenübertragung Ein-/Ausgabe ( Slide 4

5 AJAX mittels XHR XMLHttpRequest (XHR) ist eine Programmierschnittstelle (API), die von modernen Browsern für JS zur Verfügung gestellt wird XML als Format zum Datenaustausch HTML xhr.js (ein XMLHttpRequest) xmlhttp = new XMLHttpRequest(); // die Anfrage (true steht für asynchrone Abhandlung): xmlhttp.open('get', 'beispiel.xml', true); // was mit der Antwort gemacht werden soll: xmlhttp.onreadystatechange = function () { if (xmlhttp.readystate == 4) { // Antwort ist komplett console.log(xmlhttp.responsetext); // Plain Text console.log(xmlhttp.responsexml); // XML Objekt } }; xmlhttp.send(); // ausführen der Anfrage (vgl. JS Funktionsaufrufe XHR integriert HTTP Requests/ Responses JavaScript Webserver verändert HTTP Requests/Responses Slide 5

6 AJAX mittels XHR Same-Origin-Policy schränkt XHR ein è zur Sicherheit darf JS nur auf Inhalte der selben Quelle zugreifen: Gleiches Protokoll ( Gleiche Domain ( Gleicher Port ( Same-Origin-Policy wird durch den <script>-tag nicht berücksichtigt è On-Demand JavaScript als Alternative zu XHR JS Funktionsaufrufe integriert HTML JavaScript verändert XHR HTTP Requests/Responses Webserver HTTP Requests/ Responses Webserver Slide 6

7 On-Demand JavaScript ondemandjs2.html (dynamisches Nachladen von JS) ondemandjs.html (dynamisches Nachladen von JS) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <html xmlns=" <html <head><title>my xmlns=" page</title> <head><title>my <meta http-equiv="content-script-type" page</title> <meta content="text/javascript" http-equiv="content-script-type" /> <script content="text/javascript" type="text/javascript"> /> <script var ondemandjsdone type="text/javascript"> = function(message){ var alert(message); doondemandjs = = function(){ }; var newscript = = document.createelement("script"); var newscript.setattribute("src", doondemandjs = function(){ "myscript.js"); newscript.setattribute("type", var newscript = document.createelement("script"); "text/javascript"); document.head.appendchild(newscript); newscript.setattribute("src", "myscript2.js"); }; newscript.setattribute("type", "text/javascript"); </script> document.head.appendchild(newscript); </head> <script }; src="myscript.js" type="text/javascript > <body </script> </script> onload="javascript:doondemandjs();"> </head> </body> <script src="myscript2.js" type="text/javascript > </html> <body </script> onload="javascript:doondemandjs();"> myscript.js </body> </head> </html> <body onload="javascript:doondemandjs();"> alert("hello myscript.js world"); </body> </html> alert("hello myscript2.js world"); ondemandjsdone("hello world"); verändert JavaScript HTTP Requests/ Responses Webserver HTML integriert JS Funktionsaufrufe verändert JavaScript HTTP Requests/ Responses Webserver Slide 7

8 On-Demand JavaScript In Kombination mit JSON (statt XML) als Format zum Datenaustausch: JSON mit Padding (JSONP) verändert HTML verändert myjsonp.js myjson.json (JSON (JSON + Padding) Datei) { ondemandjsdone( { "name": "Web Technologies", "tags": ["JavaScript","Lecture"], "parameter": { "x": 2, "y": 3 }, "result": 5 } ); JavaScript HTTP Requests/ Responses integriert JS Funktionsaufrufe JavaScript HTTP Requests/ Responses Webserver Webserver Slide 8

9 AJAX Anwendungsbeispiele Slide 9

10 JavaScript Frameworks Frameworks erleichtern die Entwicklung von Rich Internet Applications (RIA): Vereinfachung von Standardfunktionalitäten (AJAX, Animationen, DOM-Zugriff, etc.) Strukturierung umfangreicher Anwendungen (z.b. MVC-Pattern) Abstraktion von browserspezifischen Interpretationen von HTML, CSS & JS Bekannte Frameworks: jquery MooTools Prototype (darauf aufbauend: Script.aculo.us, Rico) Dojo Yahoo! UI Library (YUI) Ext JS Google Web Toolkit (GWT) (siehe auch: Slide 10

11 jquery $-Zeichen als jquery-shortcut Hauptfunktionalitäten von jquery: Einfache Selektion und Manipulation von DOM-Elementen Event-Management AJAX-Funktionalitäten Umfangreiche Hilfsfunktionen Animationseffekte Erweiterbar durch zahlreiche Plugins insb. jquery-ui jquery.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <html xmlns=" <head> <title>my page</title> <meta http-equiv="content-script-type" content="text/javascript" /> <script src="jquery.min.js" type="text/javascript"></script> <script src="myscript.js" type="text/javascript"></script> </head> <body></body> </html> myscript.js $(document).ready(function(){ alert("hello world"); Slide 11

12 jquery $-Zeichen als jquery-shortcut Hauptfunktionalitäten von jquery: Einfache Selektion und Manipulation von DOM-Elementen Event-Management AJAX-Funktionalitäten Umfangreiche Hilfsfunktionen Animationseffekte Erweiterbar durch zahlreiche Plugins insb. jquery-ui jquery.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <html xmlns=" <head> <title>my page</title> <meta http-equiv="content-script-type" content="text/javascript" /> <script src="jquery.min.js" type="text/javascript"></script> <script src="myscript.js" type="text/javascript"></script> </head> <body> <div>eins</div> <div>zwei</div> <div>drei</div> </body> </html> myscript.js $(document).ready(function(){ $("div").click(function(event){ $("div").append("<i>!</i>"); Slide 12

13 jquery $-Zeichen als jquery-shortcut Hauptfunktionalitäten von jquery: Einfache Selektion und Manipulation von DOM-Elementen Event-Management AJAX-Funktionalitäten Umfangreiche Hilfsfunktionen Animationseffekte Erweiterbar durch zahlreiche Plugins insb. jquery-ui jquery.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <html xmlns=" <head> <title>my page</title> <meta http-equiv="content-script-type" content="text/javascript" /> <script src="jquery.min.js" type="text/javascript"></script> <script src="myscript.js" type="text/javascript"></script> </head> <body> <div id="eins">eins</div> <div class="zwei">zwei</div> <div>drei</div> </body> </html> myscript.js $(document).ready(function(){ $("div").click(function(event){ $("div#eins").append("<i>!</i>"); $("div.zwei").append("<b>!</b>"); $("div:last").append("<u>!</u>"); Slide 13

14 jquery $-Zeichen als jquery-shortcut Hauptfunktionalitäten von jquery: Einfache Selektion und Manipulation von DOM-Elementen Event-Management AJAX-Funktionalitäten Umfangreiche Hilfsfunktionen Animationseffekte Erweiterbar durch zahlreiche Plugins insb. jquery-ui jquery.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <html xmlns=" <head><title>my page</title> <meta http-equiv="content-script-type" content="text/javascript" /> <script src="jquery.min.js" type="text/javascript"></script> <script src="myscript.js" type="text/javascript"></script> </head> <body></body> myscript.js </html> var data = { vorname: 'Max', nachname: 'Mustermann' }; var callback = function(data){ console.log(data); } $.ajax({ url: ' datatype: 'xml', 'json',/// erwartete daten data: data, // gesendete daten success: callback Slide 14

15 jquery $-Zeichen als jquery-shortcut Hauptfunktionalitäten von jquery: Einfache Selektion und Manipulation von DOM-Elementen Event-Management AJAX-Funktionalitäten Umfangreiche Hilfsfunktionen Animationseffekte Erweiterbar durch zahlreiche Plugins insb. jquery-ui json.js var jsonstring = '{"vorname": "Max", "nachname": "Mustermann"}'; var json = $.parsejson(jsonstring); var jsonisempty = $.isemptyobject(json); // ist false foreach.js var collection = ['eins', 'zwei', 'drei']; $.each(collection, function(index, element){ console.log(index, element); // 0 'eins', 1 'zwei',... Slide 15

16 jquery $-Zeichen als jquery-shortcut Hauptfunktionalitäten von jquery: Einfache Selektion und Manipulation von DOM-Elementen Event-Management AJAX-Funktionalitäten Umfangreiche Hilfsfunktionen Animationseffekte Erweiterbar durch zahlreiche Plugins insb. jquery-ui jquery.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <html xmlns=" <head> <title>my page</title> <meta http-equiv="content-script-type content="text/javascript" /> <link href="mystyle.css" type="text/css" rel="stylesheet" /> <script src="jquery.min.js" type="text/javascript"></script> <script src="myscript7.js" type="text/javascript"></script> </head> <body> <button id="l">l</button><button id="r">r</button> <div class="move">beweg Mich</div> </body> </html> mystyle.css div { display: block; position: absolute; left: 50px; top: 50px; } myscript7.js $(document).ready(function(){ $("#R").click(function(){ $(".move").animate({"left": "+=50px"}, "slow"); $("#L").click(function(){ $(".move").animate({"left": "-=50px"}, "slow"); Slide 16

17 jquery $-Zeichen als jquery-shortcut Hauptfunktionalitäten von jquery: Einfache Selektion und Manipulation von DOM-Elementen Event-Management AJAX-Funktionalitäten Umfangreiche Hilfsfunktionen Animationseffekte Erweiterbar durch zahlreiche Plugins insb. jquery-ui (siehe: Slide 17

18 Literatur Bücher: Bear Bibeault & Yehuda Katz jquery in Action ISBN Christian Wenz JavaScript und AJAX ISBN Online unter Web: Slide 18