javascript – ajax -...

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

Univ.-Prof. Dr.-Ing. Wolfgang Maass

14.09.2011 Slide 2

Client

Server

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

(http://web2.0calc.com/widgets/minimal/)

BA CV SV

Benutzeraktivität Client-seitige Verarbeitung Server-seitige Verarbeitung Datenübertragung Ein-/Ausgabe

BA

CV

BA

CV

BA

CV

BA

SV

BA


14.09.2011 Slide 3

Client

Server

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

(http://web2.0calc.com/widgets/minimal/)

BA

CV

BA

CV

BA

CV

BA

SV

BA

BA CV SV



14.09.2011 Slide 4

Client

Server

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

BA

CV

BA

CV

BA

CV

BA

SV

BA

SV

(http://www.lokeshdhakar.com/projects/lightbox2/)

SV

CV CV

BA CV SV



14.09.2011 Slide 5

AJAX mittels XHR

HTML

JavaScript

integriert

Webserver

verändert

HTTP Requests/Responses

XHR

JS Funktions- aufrufe

HTTP Requests/

Responses

•  XMLHttpRequest (XHR) ist eine Programmierschnittstelle (API), die von modernen Browsern für JS zur Verfügung gestellt wird

•  XML als Format zum Datenaustausch

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. http://de.wikipedia.org/wiki/XMLHttpRequest)


14.09.2011 Slide 6

AJAX mittels XHR

HTML

JavaScript

integriert

Webserver

verändert

HTTP Requests/Responses

XHR


HTTP Requests/

Responses

•  Same-Origin-Policy schränkt XHR ein è zur Sicherheit darf JS nur auf Inhalte der selben Quelle zugreifen:

•  Gleiches Protokoll (http://example.com:8080/) •  Gleiche Domain (http://example.com:8080/) •  Gleicher Port (http://example.com:8080/)

•  Same-Origin-Policy wird durch den <script>-Tag nicht berücksichtigt è On-Demand JavaScript als Alternative zu XHR

Webserver


14.09.2011 Slide 7

onDemandJS.html (dynamisches Nachladen von JS) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"> <head><title>my page</title> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <script type="text/javascript"> var doOnDemandJS = function(){ var newScript = document.createElement("script"); newScript.setAttribute("src", "myScript.js"); newScript.setAttribute("type", "text/JavaScript"); document.head.appendChild(newScript); }; </script> <script src="myScript.js" type="text/javascript“> </script> </head> <body onload="javascript:doOnDemandJS();"> </body> </html>


<html xmlns="http://www.w3.org/1999/xhtml"> <head><title>my page</title> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <script type="text/javascript"> var doOnDemandJS = function(){ var newScript = document.createElement("script"); newScript.setAttribute("src", "myScript.js"); newScript.setAttribute("type", "text/JavaScript"); document.head.appendChild(newScript); }; </script> </head> <body onload="javascript:doOnDemandJS();"> </body> </html>


<html xmlns="http://www.w3.org/1999/xhtml"> <head><title>my page</title> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <script type="text/javascript"> var doOnDemandJS = function(){ var newScript = document.createElement("script"); newScript.setAttribute("src", "myScript.js"); newScript.setAttribute("type", "text/JavaScript"); document.head.appendChild(newScript); }; </script> </head> <body onload="javascript:doOnDemandJS();"> </body> </html>

On-Demand JavaScript

HTML

JavaScript integriert

verändert

JavaScript

verändert


Webserver

HTTP Requests/ Responses

Webserver


myScript.js

alert("hello world");

myScript.js

alert("hello world");

onDemandJS2.html (dynamisches Nachladen von JS) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"> <head><title>my page</title> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <script type="text/javascript"> var onDemandJSDone = function(message){ alert(message); }; var doOnDemandJS = function(){ var newScript = document.createElement("script"); newScript.setAttribute("src", "myScript2.js"); newScript.setAttribute("type", "text/JavaScript"); document.head.appendChild(newScript); }; </script> <script src="myScript2.js" type="text/javascript“> </script> </head> <body onload="javascript:doOnDemandJS();"> </body> </html> myScript2.js

onDemandJSDone("hello world");


14.09.2011 Slide 8

On-Demand JavaScript

HTML

JavaScript integriert

verändert

JavaScript

verändert


Webserver


Webserver


•  In Kombination mit JSON (statt XML) als Format zum Datenaustausch: JSON mit Padding (JSONP)

myJson.json (JSON Datei)

{ "name": "Web Technologies", "tags": ["JavaScript","Lecture"], "parameter": { "x": 2, "y": 3 }, "result": 5 }

myJsonP.js (JSON + Padding)

onDemandJSDone( { "name": "Web Technologies", "tags": ["JavaScript","Lecture"], "parameter": { "x": 2, "y": 3 }, "result": 5 } );


14.09.2011 Slide 9

AJAX Anwendungsbeispiele


14.09.2011 Slide 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: http://en.wikipedia.org/wiki/Comparison_of_JavaScript_frameworks)


14.09.2011 Slide 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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"> <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"); });


14.09.2011 Slide 12

jQuery






<html xmlns="http://www.w3.org/1999/xhtml"> <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>"); }); });


14.09.2011 Slide 13

jQuery






<html xmlns="http://www.w3.org/1999/xhtml"> <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>"); }); });


14.09.2011 Slide 14

jQuery






<html xmlns="http://www.w3.org/1999/xhtml"> <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

var data = { vorname: 'Max', nachname: 'Mustermann' }; var callback = function(data){ console.log(data); } $.ajax({ url: 'http://domain.com/serverScript', dataType: 'xml', // erwartete daten data: data, // gesendete daten success: callback });

myScript.js

var data = { vorname: 'Max', nachname: 'Mustermann' }; var callback = function(data){ console.log(data); } $.ajax({ url: 'http://domain.com/serverScript', dataType: 'json', // erwartete daten data: data, // gesendete daten success: callback });


14.09.2011 Slide 15

jQuery





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', ... });


14.09.2011 Slide 16

jQuery






<html xmlns="http://www.w3.org/1999/xhtml"> <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> myScript7.js

$(document).ready(function(){ $("#R").click(function(){ $(".move").animate({"left": "+=50px"}, "slow"); }); $("#L").click(function(){ $(".move").animate({"left": "-=50px"}, "slow"); }); });

myStyle.css

div { display: block; position: absolute; left: 50px; top: 50px; }


14.09.2011 Slide 17

jQuery





(siehe: http://jqueryui.com/)


14.09.2011 Slide 18

Literatur

Bücher: •  Bear Bibeault & Yehuda Katz

jQuery in Action ISBN 978-1933988351

•  Christian Wenz JavaScript und AJAX ISBN 3-89842-859-1 Online unter http://openbook.galileocomputing.de/javascript_ajax/

Web: •  http://jquery.com/ •  http://www.ajaxprojects.com/ •  https://developer.mozilla.org/de/AJAX


Univ.-Prof. Dr.-Ing. Wolfgang Maass Chair in Information and Service Systems Saarland University, Germany

javascript – ajax -...

Documents