TDP013. Webbprogrammering och interaktivitet. AJAX, CORS & jquery. Marcus Bendtsen Institutionen för Datavetenskap (IDA)

Transkript

1 TDP013 Webbprogrammering och interaktivitet AJAX, CORS & jquery Marcus Bendtsen Institutionen för Datavetenskap (IDA)

2 Innan AJAX Ett synkront webb 1. Användaren klickar länk, formulär, bild etc 2. Anrop till servern sker Server 3. Servern agerar på förfrågan 4. Servern returnerar svar 5. Webbläsaren laddar om hela sidan Användaren måste vänta på svar, kan inte göra något annat.

3 Med AJAX Ett Asynkront webb 1. Användaren klickar länk, formulär, bild etc 2. Anrop till servern sker Server Klicka, dra, byt bild, skriv vidare, etc. användaren kan fortsätta använda webbplatsen 4. Servern returnerar svar 3. Servern agerar på förfrågan 5. Webbläsaren laddar om delar av sidan Användaren kan göra annat i väntan på svar från servern. Endast de påverkade delarna av sidan ändras.

4 AJAX Hela processen styrs av JavaScript Görs lite olika beroende på vilken webbläsare som används Oftast så använder man ett färdigt bibliotek (t ex jquery) för att använda AJAX så man slipper bry sig om detaljerna för olika webbläsare Det som kommer tillbaka från servern (istället för en helt ny sida) kan variera, men oftast JSON eller XML (i denna kursen använder vi bara JSON)

5 AJAX Skapa XMLHttpRequest var xmlhttprequest; if(window.xmlhttprequest) { //IE7+, Firefox, Chrome, Opera, Safari xmlhttprequest = new XMLHttpRequest(); else { //IE6, IE5 xmlhttprequest = new ActiveXObject( Microsoft.XMLHTTP );

6 AJAX Skicka request var xmlhttprequest; if(window.xmlhttprequest) { //IE7+, Firefox, Chrome, Opera, Safari xmlhttprequest = new XMLHttpRequest(); else { //IE6, IE5 xmlhttprequest = new ActiveXObject( Microsoft.XMLHTTP ); xmlhttprequest.open( GET, true); xmlhttprequest.send(); true gör anropet asynkront

7 AJAX Skicka request med GET data var xmlhttprequest; if(window.xmlhttprequest) { //IE7+, Firefox, Chrome, Opera, Safari xmlhttprequest = new XMLHttpRequest(); else { //IE6, IE5 xmlhttprequest = new ActiveXObject( Microsoft.XMLHTTP ); xmlhttprequest.open( GET, true); xmlhttprequest.send();

8 AJAX Skicka request med POST data var xmlhttprequest; if(window.xmlhttprequest) { //IE7+, Firefox, Chrome, Opera, Safari xmlhttprequest = new XMLHttpRequest(); else { //IE6, IE5 xmlhttprequest = new ActiveXObject( Microsoft.XMLHTTP ); xmlhttprequest.open( POST, true); xmlhttp.setrequestheaders( Content-Type, application/x-wwwform-urlencoded ); xmlhttprequest.send( a=b );

9 AJAX Response var xmlhttprequest; if(window.xmlhttprequest) { //IE7+, Firefox, Chrome, Opera, Safari xmlhttprequest = new XMLHttpRequest(); else { //IE6, IE5 xmlhttprequest = new ActiveXObject( Microsoft.XMLHTTP ); xmlhttprequest.onreadystatechange = function() { if(xmlhttprequest.readystate == 4 && xmlhttprequest == 200) { document.getelementbyid( content ).innerhtml = xmlhttprequest.responsetext; xmlhttprequest.open( GET, true); xmlhttprequest.send();

10 AJAX - jquery var callback = function(data) { $( #content ).text = data; $.ajax({ url: type : POST, data : { name : Marcus, filter : Employee );, success : callback Titta i dokumentationen för fler alternativ när man använder jquery s AJAX bibliotek

11 Cross-Domain Scripting & CORS En restriktion som finns på AJAX är att anropen måste göras till exakt samma domän som klienten kör på. Finns er sida på så får man endast anropa tjänster på Anledningen till denna restriktion är av säkerhetskäl, och den intresserade kan läsa om cross-domain scripting För att komma runt detta har man börjat använda CORS (Cross-Origin Resource Sharing) där servern kan ge rättigheter åt olika domäner. (OBS fungerar inte i alla webbläsare) Vi kommer inte fördjupa oss i alla detaljer kring detta, utan endast bry oss om hur vi implementerar det

12 CORS OPTIONS Innan GET/POST anropet skickas ett OPTIONS anrop till servern Om rätt headers returneras så tillåter webbläsaren att man genomför GET/POST Ett relativt snyggt sätt att göra det på, som minimerar allt för mycket kodförändingar i existerande system

13 CORS Response headers var headers = {; headers[ Access-Control-Allow-Origin ] = * ; headers[ Access-Control-Allow-Methods ] = POST, GET, OPTIONS ; res.writehead(200, headers); res.end(); I Node.js så lägger man till detta på alla utgående response som man vill göra tillgänliga. OBS: Vi väljer att sätta * vilket tillåter alla klienter att anropa, det kanske man inte vill göra i en produktionsmiljö.

14 CORS Response headers Kan vara smart att göra något för att snabba upp processen: if(req.method == OPTIONS ) { var headers = {; headers[ Access-Control-Allow-Origin ] = * ; headers[ Access-Control-Allow-Methods ] = POST, GET, OPTIONS ; res.writehead(200, headers); res.end(); else { //Om det är POST, GET etc så gör något annat lite mer avancerat som tar tid, //men headers måste ändå sättas!

15 Utan CORS Ett alternativ är att använda en proxy som hanterar alla anrop till domänen (detta gör vi inte i denna kurs), att använda en proxy kan ha andra fördelar så som caching och att det fungerar med alla webbläsare. Anropen sker till samma domännamn så det tillåts av alla webbläsare. Men proxyn omfördelar till olika servrar. Anropar Anropar DNS Proxy Apacheserver Django server

16 AJAX & CORS - Demonstration

17