1 / 141

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

Kako do bogatejše spletne izkušnje z ASP.NET AJAX. Dušan Zupančič, MVP [ASP.NET]. 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/. AGENDA. Web 2.0 in AJAX

clint
Télécharger la présentation

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

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  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.

More Related