AJAX/Otto Knudsen 1 AJAX Motivation Definition. AJAX/Otto Knudsen 2 Motivation En typisk web-applikation er synkron klienten sender en forespørgsel og.

Præsentationer af emnet: "AJAX/Otto Knudsen 1 AJAX Motivation Definition. AJAX/Otto Knudsen 2 Motivation En typisk web-applikation er synkron klienten sender en forespørgsel og."— Præsentationens transcript:

1 AJAX/Otto Knudsen 1 AJAX Motivation Definition

2 AJAX/Otto Knudsen 2 Motivation En typisk web-applikation er synkron klienten sender en forespørgsel og venter på svar fra serveren … *not* always the best user experience… Web-server klient browser hent "side.aspx" Web- sted vente, vente…

3 AJAX/Otto Knudsen 3 Løsning Løsningen er asynkron… gør klienten så uafhængig af serveren som muligt Hvordan? mere håndtering på klient-siden asynkron kommunikation med serveren Web-server klient browser henter flere data… Web- side Brugergrænsefladen svarer – i baggrunden…

4 AJAX/Otto Knudsen 4 Eksempler Google gør i stor udstrækning brug af AJAX: Google maps:http://maps.google.comhttp://maps.google.com Google mail:http://mail.google.comhttp://mail.google.com Google calendar:http://calendar.google.comhttp://calendar.google.com Andre AJAX-websteder: http://local.live.com http://netflix.com http://flikr.com

5 AJAX/Otto Knudsen 5 Hvad er AJAX helt præcis? AJAX = Asynchronous JavaScript and XML AJAX er faktisk en række teknologier, som arbejder sammen: XHTML og CSS udgør markup DOM udgør præsentation og interaktion XML og XSLT håndterer dataudveksling og -manipulation JSON håndterer marshalling af objekter XMLHttpRequest håndterer den asynkrone kommunikation JavaScript er kittet, der holder det hele sammen

6 AJAX/Otto Knudsen 6 Classic vs. AJAX Forespørgslen håndteres lokalt – måske uden indblanding fra serveren Siden opdateres lokalt – måske uden at vente på svar fra serveren.

7 AJAX/Otto Knudsen 7 Synkront vs. Asynkront Brugeraktiviteten er ude af fase med server- kommunikationen — asynkront!

8 AJAX/Otto Knudsen 8 Målet? Bedre oplevelse af interaktion Større funktionalitet på klient-siden Forbedret integration af web-tjenester på klient-siden En brugeroplevelse, der ligger tæt op af Windows- applikationer!

9 AJAX/Otto Knudsen 9 AJAX-applikationer En simpel AJAX web-applikation

10 AJAX/Otto Knudsen 10 Eksempel Lad os betragte en simpel AJAX-applikation Applikationen viser det aktuelle klokkeslæt uagtet at tiden hentes asynkront fra serveren … Et knaptryk indebærer ikke umiddelbart et kald til serveren…

11 AJAX/Otto Knudsen 11 Design Brugeren vil interagere med siden "GetTime.htm" denne side vil forespørge asynkront på "Time.aspx" for at hente tidspunktet … Web-server hent "Time.aspx" Time.aspx GetTime.htm

12 AJAX/Otto Knudsen 12 Time.aspx Time.aspx er siden på serveren siden indeholder ingen brugergrænseflade – den returnerer blot tiden, når der forespørges … public partial class _Time : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { Response.Clear(); Response.Write( DateTime.Now.ToString("hh:mm:ss tt") ); } public partial class _Time : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { Response.Clear(); Response.Write( DateTime.Now.ToString("hh:mm:ss tt") ); } Time.aspx Time.aspx.cs Web server Time.aspx

13 AJAX/Otto Knudsen 13 GetTime.htm Dette er siden, som brugeren ser … siden indeholder HTML og JavaScript siden kommunikerer asynkront med serveren GetTime.htm..

14 AJAX/Otto Knudsen 14 Initialisering på klient-siden AJAX anvender asynkrone XMLHttpRequests når en side hentes, oprettes et XMLHttpRequest -objekt var xmlHttp; function InitializeForAJAX() { try { if (window.ActiveXObject) xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); else if (window.XMLHttpRequest) xmlHttp = new XMLHttpRequest(); else if (window.createRequest) xmlHttp = window.createRequest(); } catch(e) { xmlHttp = null; } }

15 AJAX/Otto Knudsen 15 Selve kaldet Der foretages et asynkront kald ved knaptryk når serveren svarer kaldes UpdateUI … function OnButtonClick() { if (xmlHttp == null) { alert("AJAX-style interaction not supported..."); return; } // open an async connection (true ==> async): xmlHttp.open("POST", "Time.aspx", true); // wire-up event handler: xmlHttp.onreadystatechange = UpdateUI; // and send the request (null => no content, server just answers): xmlHttp.send(null); } næste side …

16 AJAX/Otto Knudsen 16 Opdatering af brugergrænsefladen Brugergrænsefladen opdateres, når serveren svarer … function UpdateUI() { // states: // 0=uninitialized // 1=loaded // 2=loading // 3=interactive // 4=complete <======== if (xmlHttp.readyState == 4) // complete! { if (xmlHttp.status == "200") // OK { document.getElementById("divTime").style.display = 'block'; document.getElementById("lblTime").innerHTML = xmlHttp.responseText; } else alert("Communication Error: status = " + xmlHttp.status); } data fra serveren …

17 AJAX/Otto Knudsen 17 Bemærk! AJAX virker rent faktisk! konceptet er ligetil: asynkron kommunikation Der er dog vanskeligheder på klient-siden: browser-forskelle (IE ift. Firefox ift. Opera ift. …) trådprogrammering (race conditions, kritiske sektioner, …)

18 AJAX/Otto Knudsen 18 Løsning? AJAX-aktive software-værktøjer! Google Web Toolkit DWR (Direct Web Remoting) AJAX.NET AJAX Extensions for ASP.NET ("Atlas") — Microsoft's værktøj … Der er i hundredvis af tilgængelige værktøjer …

19 AJAX/Otto Knudsen 19 Eksempel Microsoft's AJAX Extensions for ASP.NET klient-side JavaScript-katalog, som skjuler det browser-specifikke og tilføjer funktionalitet server-side-kontroller som er AJAX-aktive understøttelse til arbejdet med web-tjenester … Web-server web- tjeneste 03:45:23 PM

20 AJAX/Otto Knudsen 20 Hvad så? Øvelse #8

21 AJAX/Otto Knudsen 21 …