En bedre verden med AJAX Frode Eika Sandnes Hva er AJAX Har ikke noe med rengjøringsmidler å gjøre AJAX er et (morsomt) akronym Asynchronous Javascript And XML Henskikt: lage interaktive webapplikasjoner Også omtalt som remote scripting AJAX har en lang historie, men har blitt svært populært de siste årene 1
Hvordan greie seg uten AJAX Laste inn siden på nytt refresh Bøffertømming med javascript Skjult ramme med javascript som kontrollerer synlig ramme 2
Er det et produkt? Nei, AJAX er et programmeringsstrategi, også omtalt som et pattern AJAX er plattformuavhengig Du kan lage AJAX applikasjoner med bla: Java C#/.net PhP Perl C++ Basic assembler Motivasjon for å benytte AJAX Vanlige sider lastes alltid på nytt, de blir aldri oppdatert inkrementelt. Brukeren må vente på at siden lastes på nytt selv om det er bare en liten bit som endres. Klient-tjener modellen basert på HTTPforespørsler. 3
AJAX applikasjoner Raskere og mer responderende Dynamiske og mer interaktive Lettere og morsommere å bruke Ingredienser AJAX er avhengig av en moderne nettleser. CSS Presentasjon av informasjon DOM Dynamisk endre innholdet på siden XMLHttpRequest-objektet Hente data asynkront fra tjeneren Javascript Kobler alt sammen 4
Bruksområder for AJAX Automatisk sideoppdatering Validering av skjemafelter i sanntid Automatisk fullføring skjemautfylling Hente utfyllende info til en side dynamisk etter behov Avanserte brukergrensesnitt Synkronisering av forskjellige klienter 5
Hvordan virker AJAX? Problem: noe på en side må oppdateres og endres. Ny info må hentes fra tjener og siden må endres. Løsning uten AJAX: Laste hele siden på nytt Løsning med AJAX: Hente kun det vi trenger fra tjener og oppdatere siden ved å modifisere DOM 6
tid Side 1 klient tjener Side 2 tid Side 1 klient tjener Side 2 7
Eksempel 1: Laste inn innhold dynamisk fra tjener 8
<html> <head> <script language="javascript"> javascript definisjoner </script> </head> <body> <form> <input value="side 1" type="button" onclick='javascript:xmlhttppost("eksempel1.jsp?side=1")'></p> <input value="side 2" type="button" onclick='javascript:xmlhttppost("eksempel1.jsp?side=2")'></p> <div id="resultat"></div> </form> </body> </html> Initialisere de nødvendige variabler function xmlhttppost(strurl) var xmlhttpreq = false; var megselv = this; // Browser spesifikk kode for Mozilla/Safari if (window.xmlhttprequest) megselv.xmlhttpreq = new XMLHttpRequest(); // Browser spesifikk kode for IE else if (window.activexobject) megselv.xmlhttpreq = new ActiveXObject("Microsoft.XMLHTTP"); 9
Forberede å sende AJAXforespørselen megselv.xmlhttpreq.open('post', strurl, true); megselv.xmlhttpreq.setrequestheader('content-type', 'application/x-www-form-urlencoded'); megselv.xmlhttpreq.onreadystatechange = function() if (megselv.xmlhttpreq.readystate == 4) oppdatersiden(megselv.xmlhttpreq.responsetext); megselv.xmlhttpreq.send(); Oppdatering av html-siden function oppdatersiden(str) document.getelementbyid("resultat").innerhtml = str; 10
På tjenersiden if (request.getparameter("side").equalsignorecase("1")) <p>dette er side 1</p> else <p>dette er side 2</p> Eksempel 2: Dynamisk skjema 11
På tjeneren if (request.getparameter("side").equalsignorecase("1")) <p>dette er side 1<br/> Et tekstfelt for input <input type="text"/></p> else <p>dette er side 2<br/> Ja <input type="radio" name="radio"/><br/> Nei <input type="radio" name="radio"/></p> 12
Eksempel 3: Mono diskolys 13
. På klienten function startklokka() xmlhttppost("eksempel3.jsp"); settimeout("startklokka()", 50); </script> </head> <body onload="javascript:startklokka()"> <form> <h1>frode's Disco Lys</h1> <div id="resultat"></div> </form> </body> </html> <table bgcolor="black"> <tr> java.util.date t = new java.util.date(); int y = (int)( 5.0+3.0*Math.sin((double)t.getTime()/500.0) +2.0*Math.sin((double)t.getTime()/200.0) +Math.sin((double)t.getTime()/75.0) ); for (int i=0;i<y;i++) På tjeneren <td bgcolor="lime"> </td> for (int i=y;i<10;i++) <td bgcolor="darkgreen"> </td> </tr> </table> 14
Exempel 4: Stereo Disco lys 15
Kun endring på tjener <p> <table bgcolor="black"> <tr> java.util.date t = new java.util.date(); int y = (int)( 5.0+3.0*Math.sin(150.0+(double)t.getTime()/500.0) +2.0*Math.sin(150.0+(double)t.getTime()/200.0) +Math.sin(150.0+(double)t.getTime()/75.0) ); for (int i=0;i<y;i++) <td bgcolor="lime"> </td> for (int i=y;i<10;i++) <td bgcolor="darkgreen"> </td> </tr> </table> <br/> <table bgcolor="black"> <tr> java.util.date t2 = new java.util.date(); int y2 = (int)( 5.0+3.0*Math.sin((double)t2.getTime()/500.0) +2.0*Math.sin((double)t2.getTime()/200.0) +Math.sin((double)t2.getTime()/75.0) ); for (int i=0;i<y2;i++) <td bgcolor="lime"> </td> for (int i=y2;i<10;i++) <td bgcolor="darkgreen"> </td> </tr> </table> </p> Eksempel 5: Sende parameter med AJAX forespørsel 16
function xmlhttppost(strurl).. megselv.xmlhttpreq.send(hentparameter()); function hentparameter() var skjema = document.forms['skjema']; var ord = skjema.ord.value; parameter = 'ord=' + escape(ord); // Vi ikke bruker? før parameteren return parameter; 17
<body> <form name="skjema"> <p>ord: <input name="ord" type="text" onkeyup='javascript:xmlhttppost("eksempel5.jsp")'> <div id="resultat"></div> </form> </body> </html> <h1> = </h1> request.getparameter("ord") 18
Eksempel 6: Dynamisk innhold 19
<body> <form name="skjema"> <a href="birger.jpg" onmouseover='javascript:xmlhttppost("eksempel6.jsp?ord=birger")'>birger</a> På klienten <br/> <a href="per.jpg" onmouseover='javascript:xmlhttppost("eksempel6.jsp?ord=per")'>per</a> <br/> <a href="oddvar.jpg" onmouseover='javascript:xmlhttppost("eksempel6.jsp?ord=oddvar")'>oddvar</a> <br/> <a href="frode.jpg" onmouseover='javascript:xmlhttppost("eksempel6.jsp?ord=frode")'>frode</a> <br/> <a href="simen.jpg" onmouseover='javascript:xmlhttppost("eksempel6.jsp?ord=simen")'>simen</a> <br/> <div id="resultat"></div> </form> </body> </html> På tjeneren <img src="= request.getparameter("ord").jpg" alt="bilde = request.getparameter("ord") " width="200" /> 20
Eksempel 8: Kommunikasjon/synkronisering av klienter 21
På skriveklienten <body> <form name="skjema"> <p>ord: <input name="ord" type="text" onkeyup='javascript:xmlhttppost("eksempel8.jsp")'> <div id="resultat"></div> </form> </body> </html> På spionklienten function startlytter() xmlhttppost("eksempel8.jsp"); settimeout("startlytter()", 50); </script> </head> <body onload="javascript:startlytter()"> <form> <h1>frode's tastaturspion</h1> <div id="resultat"></div> </form> </body> </html> 22
På tjeneren! String ord=""; if (request.getparameter("ord")!=null) ord = request.getparameter("ord"); <h1> = </h1> ord Eksempel 9: Dynamisk nedtrekksliste med forslag (alla google suggest) råversjon 23
24
Visuell persepsjon Du får ikke det du ser Google suggest ser ut som blanding av nedtrekksliste og tekstfelt. Egentlig bare et tekstfelt med en tekstboks som ser ut som en nedtrekksliste. Tekstboksen er implementert med javascript mushendelsesfangere Dette gjør at tekstboksen oppfattes/oppfører seg litt som en nedtrekksliste På klienten <body> Start med å taste inn bokstaven f. <form name="skjema"> Ord <input name="ord" type="text" onkeyup='javascript:xmlhttppost("eksempel9.jsp") /> <div id="resultat"></div> </form> </body> </html> 25
På tjeneren <p>! String ordliste[] = "fan", "fanklubb", "frode", "froland", "fronter", "frida", "frukt", "fruktbar", "fruktis" ; if (request.getparameter("ord")!=null) String ord = request.getparameter("ord"); for (int i=0;i<ordliste.length;i++) if (ordliste[i].indexof(ord)==0) <div onmouseup='javascript:skjema.ord.value="= ordliste[i] "'> = ordliste[i] </div> </p> 26
Eksempel 10: Dynamisk nedtrekksliste lureversjon 27
Fargenyansen er ikke tydelig i videoen. På klienten <body> Start med å taste inn bokstaven f. <form name="skjema"> <input name="ord" type="text" onkeyup='javascript:xmlhttppost("eksempel10.jsp")'> Ord <div id="resultat"></div> </form> </body> </html> Teksten er flyttet bak slik at tekstbox og nedtrekk kommer på omtrent samme linje 28
På tjeneren <div style="width=150;background-color:ghostwhite">! String ordliste[] = "fan", "fanklubb", "frode", "froland", "fronter", "frida", "frukt", "fruktbar", "fruktis" ; Spøkelseshvit boks med liknende bredde som tekstfeltet if (request.getparameter("ord")!=null) String ord = request.getparameter("ord"); for (int i=0;i<ordliste.length;i++) if (ordliste[i].indexof(ord)==0) Blå understreket tekst <div style="color:blue;text-decoration:underline" onmouseup='javascript:skjema.ord.value="= ordliste[i] "'> = ordliste[i] </div> </div> 29
Og, så var det AJAX versjonen av analoguret Klientsiden function startklokka() xmlhttppost("analogur.jsp"); settimeout("startklokka()", 1000); </script> </head> <body onload="javascript:startklokka()"> <form> <h1>frode's AJAX klokke</h1> <div id="resultat"></div> </form> </body> </html> 30
Tjenersiden gjenbruk av analogur servleten <img src="servlet/analogur?bilde=ja"> AJAX rammeverk (java) DWR Direct Web Remoting Prototype Scriptaculous Google Web Toolkit AJAX framework for JSF og mange flere... 31
Fantasien er den eneste begrensingen!!! 32