En bedre verden med AJAX

Størrelse: px

Begynne med side:

Download "En bedre verden med AJAX"

Otto Jørgensen
8 år siden
Visninger:

1 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

Javascript And XML Henskikt: lage interaktive webapplikasjoner Også omtalt

2 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

3 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

4 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

5 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

skjemautfylling Hente utfyllende info til en side dynamisk

6 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

7 tid Side 1 klient tjener Side 2 tid Side 1 klient tjener Side 2 7

8 Eksempel 1: Laste inn innhold dynamisk fra tjener 8

9 <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

side=1")'></p> <input value="side 2" type="button" side=2")'></p> <div id="resultat"></div> </form> </body> </html> Initialisere de nødvendige variabler function

10 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

setrequestheader('content-type', 'application/x-www-form-urlencoded'); megselv.xmlhttpreq.

11 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

12 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

input <input type="text"/></p> else <p>dette er side 2<br/> Ja

13 Eksempel 3: Mono diskolys 13

14 . 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)( *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

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.

15 Exempel 4: Stereo Disco lys 15

16 Kun endring på tjener <p> <table bgcolor="black"> <tr> java.util.date t = new java.util.date(); int y = (int)( *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)( *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

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.

17 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

18 <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

19 Eksempel 6: Dynamisk innhold 19

20 <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

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.

21 Eksempel 8: Kommunikasjon/synkronisering av klienter 21

22 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

23 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 24

25 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

26 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

27 Eksempel 10: Dynamisk nedtrekksliste lureversjon 27

28 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

29 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

30 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

31 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

32 Fantasien er den eneste begrensingen!!! 32

Like dokumenter

JavaServer Pages (JSP)

JavaServer Pages (JSP) Forelesning 1 Klient/tjener-systemer, installasjon av tjener, og intro til JSP. Statisk Web = HTML Overskrift