Kako do bogatejše spletne izkušnje z ASP.NET AJAX

1. Kako do bogatejše spletne izkušnje z ASP.NET AJAX Dušan Zupančič, MVP [ASP.NET]

2. O predavatelju … • Dušan Zupančič • Zaposlitev: Cetis d.d. – CeNT (Cetis Nove Tehnologije)vodja svetovanja • E-pošta: dusan.zupancic@cetis.si • Blog: http://dusanz.gnarus.org/

3. AGENDA • Web 2.0 in AJAX • AJAX tehnologije • komponente ASP.NET AJAX • ASP.NET AJAX Extensions 1.0 • ASP.NET AJAX Control Toolkit • ASP.NET AJAX Library • ASP.NET AJAX Futures • Razhroščevanje ASP.NET AJAX rešitev • Varnost AJAX rešitev

4. Web 2.0 in AJAX

5. Kako deluje klasična spletna rešitev Zahtevek

6. Dobri, slabi in grdi (pri spletnih rešitvah) • Dobro • Centraliziran nadzor nad delovanjem rešitve • Ni težav z nameščanjem • Slabo • Rešitev se izvaja v okviru brskalnikovega “peskovnika” (varnost) • Manjkajo določene bogate uporabniške izkušnje, ki smo jih navajeni s “težkih” odjemalcev • Samo en način, da pridemo do svežih podatkov: osvežitev strani (postback) • Grdo • Kompatibilnost med brskalniki 

7. Vendar uporabniki želijo več ... • Več interakcije • Več možnosti • Večjo odzivnost • Skratka, želijo si da bi bile spletne aplikacije bolj podobne namiznim

8. Web 2.0 • Nova generacija storitev na spletu zajema: • Tehnologijo za bogate spletne aplikacije (npr. AJAX) • CSS (Cascading Style Sheets) • XHTML • RSS / ATOM • Čiste in pomenske URL naslove • Spletne dnevnike (Weblog) • Hibridne spletne aplikacije (mashup) • Spletne protokole REST in SOAP • Poskus standardizacije uporabljanih tehnologij

9. Kako lahko pomaga AJAX? • Obdržimo vse dobre lastnosti lahkega odjemalca • Pridobimo nekatere zmožnosti, ki smo jih navajeni s težkih odjemalcev • Do svežih podatkov lahko pridemo brez osveževanja celotne strani

10. DEMO – Primer AJAX spletne strani

11. AJAX tehnologije

12. Kaj je AJAX? • Asynchronous Javascript and XML • Skovanka, ki jo je prvič javno uporabil Jesse James Garrett v svojem eseju objavljenem Februarja 2005 na: http://www.adaptivepath.com/publications/essays/archives/000385.php • Razvijalski vzorec, ki vključuje širok nabor obstoječih tehnologij: • Standardiziran prikaz s pomočjo XHTML in CSS • Dinamičen prikaz preko DOM • Izmenjava in manipulacija podatkov s pomočjo XML (ali z JSON) in XSL-T • Asinhrono pridobivanje podatkov s pomočjo XmlHttp • ... in JavaScript, ki vse skupaj povezuje v celoto JavaScript DOM AJAX CSS XHTML XML XMLHTTP

13. Objekt XmlHttpRequest • Prvič se pojavi leta1999 z brskalnikom Internet Explorer 5 • ActiveX objekt, ki podpira asinhrone klice na spletni strežnik • V prvi fazi narejen predvsem za Outlook Web Access (OWA) • Pozneje so ga posvojili Firefox, Safari in ostali brskalniki • Implementiran kot domoroden objekt (XMLHttpRequest) in ne kot ActiveX • V postopku standardizacije s strani W3C • http://www.w3.org/TR/XMLHttpRequest/ • Je glavna tehnologija, ki omogoča AJAX

14. Delo z XmlHttpRequest • Instanciranje objekta XmlHttpRequest • Odpiranje HTTP povezave • Nastavljanje glav • Pošiljanje zahtevka • Asinhrona obdelava rezultata poizvedbe

15. XmlHttp: instanciranje • V odvisnosti od uporabljenega brskalnika se objekt XmlHttpRequest instancira različno: var xmlHttp = null; function loadXmlHttp() { if (window.XMLHttpRequest) { // IE7, Mozilla, Safari, Opera, itd. xmlHttp = new XMLHttpRequest(); } else if (window.ActiveXObject) { // IE 5.x in 6 xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } }

16. XmlHttp: pošiljanje zahtevka function sendRequest(url) { if (xmlHttp) { // povratna funkcija za asinhroni povratni klic xmlHttp.onreadystatechange = onCallback; // Odpiranje HTTP povezave do url. xmlHttp.open("GET", url, true); // true = asinhroni klic // nastavljanje glave klica xmlHttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded'); // pošiljanje zahtevka brez dodatnih parametrov xmlHttp.send(null); // nastavljanje napisa document.getElementById('rezultat').innerHTML="Nalaganje"; } }

17. XmlHttp: obdelava rezultata function onCallback() { // Preverjanje ali je klic končan if (xmlHttp.readyState == 4) { // Je odgovor uspešen if (xmlHttp.status == 200){ document.getElementById('rezultat').innerHTML = xmlHttp.responseText; } else { // napaka HTTP alert('Napaka: ' + xmlHttp.status); } } }

18. DEMO 01: Uporaba XMLHttp • “Končna točka”: PodatkiTekst.ashx • Instanciranje in uporaba XMLHttp v DemoTekst.aspx

19. Async Request Trigger Return result of Callback Callback Event ICallbackEventHandler ASP.NET 2.0 in XML-HTTPClient Script Callback Script Event Handler Click Script Callback Init Load State Process Postback Data Load Unload

20. ASP.NET 2.0 in XML-HTTPClient Script Callback • ClientScriptManager.GetCallbackEventReference • Vrne ime JavaScript funkcije, ki izvede XML-HTTP zahtevek (sinhrono ali asinhrono) • Funkcije uporabljajo POST in pošljejovsa polja v formi (vključno z __VIEWSTATE) • ICallbackEventHandler • Vmesnik, ki ga implementirajo strani, ki so cilj povratnih klicev • ICallbackEventHandler.RaiseCallbackEvent je klican najprej • ICallbackEventHandler.GetCallbackResult je klican za njim • Skrije kompleksnost dela z XMLHTTP vendar še vedno ostane precej dela

21. Callback – odjemalski del (.aspx) <script type="text/ecmascript"> function LookUpStock(){ var lb = document.getElementById("ListBox1"); var product = lb.options[lb.selectedIndex].text; CallServer(product, ""); } function ReceiveServerData(rValue){ document.getElementById("ResultsSpan").innerHTML = rValue; } </script>

22. Callback – strežniški del (1/2) (.cs) public partial class ClientCallback : System.Web.UI.Page, System.Web.UI.ICallbackEventHandler { protected String returnValue; protected void Page_Load(object sender, EventArgs e) { String cbReference = Page.ClientScript.GetCallbackEventReference(this, "arg", "ReceiveServerData", "context"); String callbackScript; callbackScript = "function CallServer(arg, context)" + "{ " + cbReference + ";}"; Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "CallServer", callbackScript, true); }

23. Callback – strežniški del (2/2) (.cs) public void RaiseCallbackEvent(String eventArgument) { if (catalog[eventArgument] == null) { returnValue = "-1"; } else { returnValue = catalog[eventArgument].ToString(); } } public String GetCallbackResult() { return returnValue; }

24. Demo: Client Callback

25. “Koristni tovor” v AJAXu • “Koristni tovor” v AJAXu so podatki, ki jih dobimo s pomočjo HTTP zahtevka • Ker gre pri AJAX-u za standarden HTTP zahtevek in odgovor je lahko vsebina poljubna (tekst, XML, HTML, JSON, …) • Najpogostejša tipa za prenosa podatkov sta: • XML • Uveljavljen standard za prenos podatkov • JSON • Enostavnejša deserializacija na odjemalcu (v JavaScriptu)

26. Primer XML paketa <oseba> <ime>Janezek Novak</ime> <starost>11</starost> <zivali>Reks</zivali> <zivali>Pika</zivali> </oseba> <oseba> <ime>Minka Novak</ime> <starost>11</starost> <oseba>

27. Uporaba spletne storitve z XMLHTTP • Dokaj pogost pristop k asinhronemu pridobivanju podatkov v AJAXu je uporaba spletnih storitev • Kako uporabiti spletno storitev v AJAX: • Ustvariti je potrebno SOAP ovojnico in predati parametre • S pomočjo XMLHTTP poslati SOAP • V rezultirajočem XML s parserjem poiskati rezultat

28. Kako do parametrov za klic spletne storitve Glave sporočila SOAP Zahtevek

29. Ustvarjanje SOAP ovojnice // ustvarjanje SOAP ovojnice var soapEnvelop = "<?xml version=\"1.0\" encoding=\"utf-8\" ?>"; soapEnvelop+= "<soap:Envelope xmlns:xsi=\"http://www.w3.org/2001/XMLSchema-instance\" "; soapEnvelop+= "xmlns:xsd=\"http://www.w3.org/2001/XMLSchema\" "; soapEnvelop+= "xmlns:soap=\"http://schemas.xmlsoap.org/soap/envelope/\" >"; soapEnvelop+= " <soap:Body>"; soapEnvelop+= " <getTemperature xmlns=\"http://Cetis.si/TemperatureService\">"; soapEnvelop+= " <city>" + city + "</city>"; soapEnvelop+= " </GetTemperature>"; soapEnvelop+= " </soap:Body>"; soapEnvelop+= "</soap:Envelope>";

30. Pošiljanje zahtevka in obdelava rezultata // nastavljanje glav sporočila xmlHttp.open("POST",url,true); xmlHttp.setRequestHeader("Content-Type","text/xml"); xmlHttp.setRequestHeader("SOAPAction", http://Cetis.si/TemperatureService/getTemperature"); // pošiljanje zahtevka s SOAP ovojnico xmlHttp.send(soapEnvelop); //lociranje rezultata v XML odgovoru in prikaz na strani var xmldoc = xmlHttp.responseXML; var responseNode = xmldoc.getElementsByTagName("GetTemperatureResult").item(0); document.getElementById('rezultat').innerHTML = responseNode.text;

31. JSON: JavaScript Object Notation • JSON= JavaScript Object Notation) • Alternativa XML serializaciji vendar “brez odvečnega ‘špeha’” • Na strani JavaScripta ni potrebe po parserju [ { “ime”: “Janezek Novak”, “starost” : 11, “zivali”: [“Reks”, “Pika”] }, { “ime”: “Minka Novak”, “starost” : 11, } ] var name = eval("(" + paketJSON + ")");

32. JSON : XML • JSON uporablja JavaScript shemo za opis podatkov • JavaScript ima samo en podatkovni tip – variant, tako da JSON ne hrani podatkovnega tipa • AJAX uporablja JSON za poenostavitev in pohitritev klicev na strežnik, vendar v določenih implementacijah še vedno najdemo XML (ali pa klice do XML spletnih storitev)

33. AJAX knjižnice

34. Knjižnice za delo za AJAX-om • Delo neposredno z XMLHTTP je relativno kompleksno, zato je nastalo precej AJAX knjižnic: • Prototype (http://www.prototypejs.org/ ) • Ogrodje v JavaScriptu, ki olajša programiranje AJAX rešitev • Ajax.NET Pro (http://www.ajaxpro.info/ ) • Ogrodje za ASP.NET 1.1 in 2.0 • Microsoft ASP.NET AJAX (tema te delavnice) • In še mnogo drugih …

35. Kje je smisleno razmisliti o ASP.NET AJAX? • Strežniško okolje, ki uporablja Microsoft IIS. • > .NET 2.0. • Omejen prenos podatkov. • Majhne spremembe. • Omejena pasovna širina.

36. Slabosti • Pri razvoju Javascripta v VS2005ni Intellisense. • Gumbek “Nazaj” (Back) • Podpora za slabovidne • Iskalniki • Hramba stanja • Manj zmogljivi brskalniki • Razhroščevanje Javascripta • Preveč nalog na odjemalcu. • Brskalniki so krhke “živalce”.

37. Komponente ASP.NET AJAX

38. Kaj je ASP.NET AJAX? • Ogrodje za izgradnjo AJAX spletnih rešitev • Več platform, brskalniško agnostičen • Zelo razširljiv • V grobem je razdeljen na dva dela • Microsoft AJAX Library (ogrodje za odjemalce - JavaScript) • ASP.NET 2.0 AJAX Extensions (ogrodje za strežnik) • Strežniški del rešitve je tesno povezan z ASP.NET 2.0 • Odjemalski del pa je mogoče uporabiti tudi v PHP, ColdFusion, itd.

39. Razvijalski scenariji • Strežniško orientiran razvoj • Omogoča postopno uvajanje AJAX pristopa v obstoječe spletne rešitve • Bogatenje spletnih rešitev brez pisanja velike količina JavaScript kode • Omogoča, da večino logike obdržimo na strežniku (in ju napišemo v C#, VB.NET, …) • Odjemalsko orientiran razvoj • Uporaba polne moči DHTML • Omogoča bogatejšo uporabniško izkušnjo

40. Arhitektura ASP.NET AJAX

41. Sestavni deli ASP.NET AJAX • ASP.NET 2.0 AJAX Extensions • Microsoft AJAX Library • ASP.NET AJAX Control Toolkit • ASP.NET 2.0 AJAX Extensions CTP ASP.NET AJAX Control Toolkit Microsoft AJAX Library (Podprti: IE, Mozilla, Safari, Opera 9) ASP.NET 2.0 AJAX Extensions CTP ASP.NET 2.0 AJAX Extensions ASP.NET 2.0

42. Namestitev ASP.NET AJAX(http://ajax.asp.net/downloads)

43. Komponente ASP.NET AJAX ASP.NET AJAX Extensions 1.0

44. Asinhrono osveževanje dela strani

45. ASP.NET AJAX Extensions • Strežniški kontrolniki • Script Manager • Script Manager Proxy • Update Panel • Update Progress • Timer • Strežniške razširitve • Web Services Bridge • JSON serializacija • Generiranje posrednika (proxy) v JavaScriptu

46. Arhitektura ASP.NET AJAX Extensions

47. Script Manager • Ključna komponenta v ASP.NET AJAX • Registrira AJAX Client Library • Omogoča delno osveževanje strani (Update Panel) • Lahko ga uporabimo za registracijo lastnih skript • Script Reference • Za spletne storitve generira JS Proxy razrede • Service Reference

48. ScriptManager Na vsakem AJAX spletnem obrazcu potrebujemo le en ScriptManager Skrbi za asinhrono komunikacijo med odjemalcem in strežnikom

49. Kontrolnik UpdatePanel • Omogoča delno osveževanje strani in kontrolnikov • Samodejno prevede postbacke v asinhrone povratne klice • Samodejno osveži vsebino po povratnem klicu • Ne zahteva poznavanja JavaScripta ali XmlHttp • Omogoča enostavno definiranje regij spletne strani za osveževanje • Asinhroni dostop do osveženih podatkov na strežniku • ASP.NET AJAX poskrbi za vso potrebno infrastrukturo • Na eni spletni strani lahko imate poljubno število UpdatePanel kontrolnikov

50. Življenjski cikel ASP.NET strani PageRequestManager (v ScriptManagerju) se vključi v fazi PreRender() in zamenja metodo za izris strani Render() z metodo, ki izrisujevsebino Update Panela.