ASP.NET AJAX

3,555 views

Published on

Presentation about the first release of the ASP.NET AJAX framework, that enables building ASP.NET websites with AJAX techniques

Published in: Technology

ASP.NET AJAX

  1. 1. Microsoft Web & Gaming Technologies @ UALG Nelson Correia (ncorreia@ncorreia.name) http://nelsoncorreia.spaces.live.com
  2. 2. AJAX – O que é? <ul><li>Asynchronous Javascript and XML </li></ul><ul><li>Utilizado em diversas aplicações web recentes </li></ul><ul><ul><li>Microsoft Virtual Earth </li></ul></ul><ul><ul><li>Windows Live Spaces </li></ul></ul><ul><ul><li>Google Maps </li></ul></ul><ul><ul><li>Google Suggest </li></ul></ul><ul><ul><li>Google Reader </li></ul></ul><ul><ul><li>Google Docs </li></ul></ul><ul><ul><li>Gmail </li></ul></ul>
  3. 3. AJAX Fonte: Adaptative Path Fonte: Adaptative Path
  4. 4. AJAX – Porquê? <ul><li>Melhora a experiência do utilizador: </li></ul><ul><ul><li>Reduz o tempo de espera entre pedidos </li></ul></ul><ul><ul><li>Reduz ou elimina o flickering das páginas </li></ul></ul><ul><ul><li>Permite interacção mesmo durante pedidos </li></ul></ul><ul><li>Reduz o tráfego a circular na rede </li></ul><ul><li>Baseado em standards abertos: </li></ul><ul><ul><li>ECMA Script; XML; HTML; etc </li></ul></ul><ul><li>Compatibilidade cross-browser </li></ul>
  5. 5. AJAX – Em que consiste? <ul><li>Conjunto de tecnologias </li></ul><ul><ul><li>XMLHttpRequest </li></ul></ul><ul><ul><li>JavaScript </li></ul></ul><ul><ul><li>DOM </li></ul></ul><ul><ul><li>XML/JSON </li></ul></ul><ul><ul><li>XHTML/HTML </li></ul></ul><ul><ul><li>CSS </li></ul></ul><ul><ul><li>XSLT </li></ul></ul>
  6. 6. XMLHttpRequest Object <ul><li>Obtenção </li></ul>var req = null; if (window.XMLHttpRequest) { req = new XMLHttpRequest() ; // IE7, Firefox, Safari, Opera,... } else if (window.ActiveXObject) { // IE5.x, IE6 try { req = new ActiveXObject(&quot;Msxml2.XMLHTTP&quot;) ; } catch (e) { try { req = new ActiveXObject(&quot;Microsoft.XMLHTTP&quot;) ; } catch (e){ alert(&quot;Exception: &quot; + e.message); } } }
  7. 7. XMLHttpRequest Object <ul><li>Métodos </li></ul>Método Parâmetros e Descrição open <ul><li>( method , URL , async, userName, password ) </li></ul><ul><li>Especifica os parâmetros dum pedido </li></ul>send <ul><li>( content ) </li></ul><ul><li>Envia o pedido </li></ul>setRequestHeader <ul><li>( label, value ) </li></ul><ul><li>Adiciona um header ao pedido </li></ul>abort <ul><li>( ) </li></ul><ul><li>Cancela o pedido corrente </li></ul>
  8. 8. XMLHttpRequest Object <ul><li>Propriedades </li></ul>Propriedade Descrição onreadystatechange Referência para o handler do evento de mudança de estado readyState Estado do objecto: 0 (não iniciado); 1 (aberto); 2 (enviado); 3 (a receber); 4 (carregado) responseText Resposta em formato string responseXML Resposta na forma dum objecto XML status Código do estado HTTP statusText Texto do estado HTTP
  9. 9. XMLHttpRequest - Alternativas <ul><li>IFrame </li></ul><ul><ul><li>Vantagens: </li></ul></ul><ul><ul><ul><li>Funciona em browsers mais antigos </li></ul></ul></ul><ul><ul><ul><li>Não necessita de ter ActiveX activado </li></ul></ul></ul><ul><ul><ul><li>Permite cross-site scripting </li></ul></ul></ul><ul><ul><ul><ul><li>(pode ser utilizado em conjunto com o XMLHttpRequest) </li></ul></ul></ul></ul><ul><ul><li>Desvantagens: </li></ul></ul><ul><ul><ul><li>Não permite o cancelamento de um pedido </li></ul></ul></ul><ul><ul><ul><li>API mais complexa, para pedidos non-GET </li></ul></ul></ul><ul><ul><ul><li>Não permite verificar o estado de um pedido </li></ul></ul></ul><ul><ul><ul><li>Não “conhece” XML </li></ul></ul></ul>
  10. 10. XMLHttpRequest - Alternativas <ul><li>HTTP Streaming </li></ul><ul><li>Richer Plugin </li></ul><ul><li>On-Demand Javascript </li></ul><ul><li>Import XML Document </li></ul><ul><li>Image-Cookie call </li></ul><ul><li>Stylesheet call </li></ul><ul><li>Resposta 204 – “No content” </li></ul>http://ajaxpatterns.org/XMLHttpRequest_Call#Alternatives
  11. 11. <ul><li>XMLHttpRequest </li></ul>
  12. 12. ASP.NET AJAX <ul><li>Framework para desenvolvimento de aplicações AJAX - enabled , em ASP.NET </li></ul><ul><li>Fácil integração com web-services </li></ul><ul><li>Bibliotecas script cross-browser </li></ul><ul><li>Acesso a serviços de Autenticação e Perfis, a partir de script </li></ul><ul><li>Extensões ao sistema de tipos Javascript </li></ul>
  13. 13. Arquitectura Servidor Cliente
  14. 14. Camada de Comunicação Assíncrona (1) <ul><li>Permite: </li></ul><ul><ul><li>Pedidos assíncronos ao servidor, a partir de Javascript </li></ul></ul><ul><ul><li>Invocação de métodos de web services (.asmx) </li></ul></ul><ul><ul><li>Invocação de métodos estáticos da página </li></ul></ul><ul><li>Suporta vários formatos de seriação: </li></ul><ul><ul><li>XML </li></ul></ul><ul><ul><li>String </li></ul></ul><ul><ul><li>JSON </li></ul></ul><ul><li>Enumerado ResponseFormat : </li></ul><ul><li>Xml </li></ul><ul><li>Json </li></ul>
  15. 15. Camada de Comunicação Assíncrona (2) <ul><li>Arquitectura (Cliente) </li></ul>
  16. 16. Camada de Comunicação Assíncrona (3) <ul><li>Arquitectura (Servidor) </li></ul>
  17. 17. <ul><li>Sem Ajax Extensions </li></ul>
  18. 18. <ul><li>Com Ajax Extensions </li></ul>
  19. 19. ASP.NET Ajax Server Controls <ul><li>ScriptManager </li></ul><ul><li>UpdatePanel </li></ul><ul><li>UpdateProgress </li></ul><ul><li>Timer </li></ul>
  20. 20. ScriptManager <ul><li>Gere o código script das páginas ASP.NET AJAX </li></ul><ul><li>Inclui na resposta o código script da biblioteca Microsoft AJAX </li></ul><ul><li>Dá suporte à actualização parcial de páginas </li></ul><ul><li>Permite a partir de script : </li></ul><ul><ul><li>Chamadas strongly-typed a web-services </li></ul></ul><ul><ul><li>Utilização das extensões ao sistema de tipos </li></ul></ul><ul><ul><li>Acesso aos serviços de autenticação e de perfis </li></ul></ul>
  21. 21. ScriptManager <ul><li>Métodos </li></ul>Método Descrição RegisterAsyncPostBackControl Regista um controlo para postbacks assíncronos RegisterPostBackControl Regista um controlo para postbacks síncronos RegisterClientScriptBlock Regista um bloco de código script RegisterClientScriptInclude Regista um ficheiro de código script RegisterArrayDeclaration Regista um array
  22. 22. ScriptManager <ul><li>Propriedades </li></ul>Propriedade Descrição EnablePageMethods Permite (des) activar a chamada a métodos estáticos da página, a partir de código script EnablePartialRendering Injecta na resposta o código que permite a actualização parcial de páginas IsInAsyncPostback Indica se está em curso um postback assíncrono SupportsPartialRendering Indica se o cliente suporta actualizações parciais
  23. 23. ScriptManager <ul><li>Propriedades </li></ul>Propriedade Descrição AuthenticationService Devolve a referência para o AuthenticationServiceManager associado ProfileService Devolve a referência para o ProfileServiceManager associado Scripts Colecção de objectos ScriptReference (ficheiros script ) Services Colecção de objectos ServiceReference (serviços asmx)
  24. 24. ScriptManager <ul><li>Tratamento de erros </li></ul>1 2 3 AllowCustomErrorsRedirect : indica se a secção customErrors do web.config é utilizada durante postbacks assíncronos; AsyncPostBackError : evento que é lançado quando ocorre um erro durante postbacks assíncronos; AsyncPostBackError Message : mensagem de erro enviada ao browser .
  25. 25. ScriptManagerProxy <ul><li>Problema: </li></ul><ul><ul><li>Apenas um ScriptManager por página </li></ul></ul><ul><li>Utilizado quando: </li></ul><ul><ul><li>A master-page tem um ScriptManager </li></ul></ul><ul><ul><li>Se pretende aceder aos serviços de script num user control </li></ul></ul><ul><ul><li>Particularizar scripts ou serviços para algumas páginas </li></ul></ul>
  26. 26. ScriptManagerProxy <ul><li>Wrapper para as propriedades: </li></ul><ul><li>Services </li></ul><ul><li>Scripts </li></ul><ul><li>ProfileService </li></ul><ul><li>AuthenticationService </li></ul>Page code Master Page Content Page ScriptManager ScriptManagerProxy
  27. 27. <ul><li>ScriptManager & ScriptManagerProxy </li></ul>
  28. 28. UpdatePanel <ul><li>Define uma região, que pode ser actualizada de forma independente do resto da página </li></ul><ul><li>Podem existir vários por página: </li></ul>UpdatePanel3 UpdatePanel1 UpdatePanel2 UpdatePanel4 Page1 UpdatePanel1 UpdatePanel2 Page2
  29. 29. UpdatePanel <ul><li>Como é desencadeada uma actualização? </li></ul>Propriedade UpdateMode Always Conditional <ul><li>Qualquer postback , síncrono ou assíncrono. </li></ul><ul><li>Postback causado por um dos seus triggers ; </li></ul><ul><li>Programaticamente através do método Update; </li></ul><ul><li>Actualização dum UpdatePanel pai ; </li></ul><ul><li>Postback originado por um filho , com ChildrenAsTriggers = true (default). </li></ul>
  30. 30. UpdatePanel <ul><li>Triggers </li></ul><asp:UpdatePanel ID=&quot;UpdatePanel1&quot; runat=&quot;server&quot;> <ContentTemplate> <asp:Button ID=&quot;Button1&quot; runat=&quot;server/> </ContentTemplate> < Triggers > <asp: PostBackTrigger ControlID=&quot;Button1&quot; /> <asp: AsyncPostBackTrigger ControlID=&quot;Button2&quot; /> </ Triggers > </asp:UpdatePanel> <asp:Button ID=&quot;Button2&quot; runat=&quot;server /> ScriptManager.RegisterPostBackControl ScriptManager.RegisterAsyncPostBackControl
  31. 31. <ul><li>UpdatePanel </li></ul>
  32. 32. UpdatePanel <ul><li>Controlos incompatíveis: </li></ul><ul><ul><li>TreeView e Menu </li></ul></ul><ul><ul><li>WebParts </li></ul></ul><ul><ul><li>FileUpload </li></ul></ul><ul><ul><ul><li>A não ser que seja um PostBackTrigger do UpdatePanel </li></ul></ul></ul><ul><ul><li>GridView e DetailsView </li></ul></ul><ul><ul><ul><li>Caso EnableSortingAndPagingCallbacks for true </li></ul></ul></ul>
  33. 33. UpdatePanel <ul><li>Controlos incompatíveis (continuação): </li></ul><ul><ul><li>Login, PasswordRecovery, ChangePassword e CreateUserWizard </li></ul></ul><ul><ul><ul><li>Se o conteúdo não tiver sido convertido para template </li></ul></ul></ul><ul><ul><li>Controlo Substitution </li></ul></ul><ul><ul><li>Controlos de validação </li></ul></ul><ul><ul><ul><li>Existe disponível uma alternativa * </li></ul></ul></ul>*http://blogs.msdn.com/mattgi/archive/2007/01/23/asp-net-ajax-validators.aspx
  34. 34. UpdateProgress <ul><li>Mostra informação durante actualizações parciais </li></ul><ul><li>Para actualizações rápidas sem feedback visual, usa-se o DisplayAfter </li></ul><ul><li>O conteúdo é mostrado quando: </li></ul><ul><ul><li>O UpdatePanel associado gera um postback </li></ul></ul><ul><ul><ul><li>Propriedade AssociatedUpdatePanelID </li></ul></ul></ul><ul><ul><li>Em qualquer postback assíncrono </li></ul></ul><ul><ul><ul><li>Se não estiver associado a nenhum UpdatePanel </li></ul></ul></ul>
  35. 35. <ul><li>UpdateProgress </li></ul>
  36. 36. Timer <ul><li>Utilizado para actualizar regiões periodicamente </li></ul><ul><li>Desencadeia postbacks em intervalos pré-definidos: </li></ul><ul><ul><li>Síncronos: se fora dum UpdatePanel </li></ul></ul><ul><ul><li>Assíncronos: se dentro dum UpdatePanel </li></ul></ul><ul><li>O evento Tick permite realizar processamento periódico no servidor </li></ul>
  37. 37. Javascript – Extensões ao sistema de tipos (1) <ul><li>A biblioteca Microsoft AJAX adiciona suporte para: </li></ul><ul><ul><li>Namespaces </li></ul></ul><ul><ul><li>Classes: </li></ul></ul><ul><ul><ul><li>Campos (apenas de tipos primitivos) </li></ul></ul></ul><ul><ul><ul><li>Propriedades (tipos primitivos ou referência): </li></ul></ul></ul><ul><ul><ul><ul><li>Getter </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Setter </li></ul></ul></ul></ul><ul><ul><ul><li>Métodos </li></ul></ul></ul><ul><ul><ul><li>Eventos </li></ul></ul></ul>
  38. 38. Javascript – Extensões ao sistema de tipos (2) <ul><li>Continuação: </li></ul><ul><ul><li>Herança </li></ul></ul><ul><ul><li>Interfaces </li></ul></ul><ul><ul><li>Enumerados </li></ul></ul><ul><ul><li>Introspecção </li></ul></ul><ul><ul><ul><li>Métodos de Type permitem obter informação sobre o tipo </li></ul></ul></ul><ul><ul><li>Funções auxiliares para arrays e strings </li></ul></ul><ul><ul><li>Modificadores de acesso </li></ul></ul><ul><ul><ul><li>Convenção de nomes da biblioteca: nome precedido de underscore é considerado privado </li></ul></ul></ul>
  39. 39. Javascript <ul><li>Wrappers </li></ul><ul><ul><li>$addHandler Sys.UI.DomEvent.addHandler </li></ul></ul><ul><ul><li>$addHandlers Sys.UI.DomEvent.addHandlers </li></ul></ul><ul><ul><li>$removeHandler Sys.UI.DomEvent.RemoveHandler </li></ul></ul><ul><ul><li>$clearHandlers Sys.UI.DomEvent.clearHandlers </li></ul></ul><ul><ul><li>$create Sys.Component.create </li></ul></ul><ul><ul><li>$find Sys.Application.findComponent </li></ul></ul><ul><ul><li>$get Sys.UI.DomElement.getElementById </li></ul></ul>$addHandlers($get(&quot;Button1&quot;), {click:processClick,mouseover:processMouseOver}); Exemplo:
  40. 40. <ul><li>Gere as actualizações parciais no browser </li></ul><ul><li>Expõe um modelo de eventos semelhante ao do ASP.NET: </li></ul>PageRequestManager Gerado quando o controlo retorna ao browser Depois do conteúdo da página ser actualizado Antes do conteúdo da página ser actualizado Antes do pedido ser enviado para o servidor Início de um postback assíncrono
  41. 41. <ul><li>Javascript Extensions </li></ul>
  42. 42. Web Services <ul><li>Chamadas a web services a partir de código script </li></ul><ul><li>Web services definidos em ficheiros .asmx </li></ul><ul><li>São criadas classes proxy em Javascript: </li></ul><ul><ul><li>Para o web service e correspondentes web methods </li></ul></ul><ul><ul><li>Para os tipos dos parâmetros ou retornos </li></ul></ul><ul><li>Apenas para web services no mesmo domínio </li></ul>
  43. 43. Web Services – How to <system.web> <httpHandlers> <remove verb=&quot;*&quot; path=&quot;*.asmx&quot;/> <add verb=&quot;*&quot; path=&quot;*.asmx&quot; type=&quot;System.Web.Script.Services.ScriptHandlerFactory&quot;/> </httpHandlers> <system.web> 1 2 // Calculator.asmx <%@ WebService Class=&quot;Calculator&quot; Language=&quot;C#&quot;%> [ ScriptService ] public class Calculator : WebService { [ WebMethod ] public int Add(int i1, int i2) { return i1 + i2; } }
  44. 44. Web Services – How to 3 <asp:ScriptManager runat=&quot;server&quot; ID=&quot;scriptManager&quot;> <Services> <asp:ServiceReference path=&quot;~/WebServices/Calculator.asmx&quot; /> </Services> </asp:ScriptManager> 4 <script type=&quot;text/javascript&quot;> function add(value1, value2){ SimpleWebService.Add(value1, value2, OnSucceeded); } function OnSucceeded(result){ alert(result); } </script>
  45. 45. Web Services <ul><li>Também é possível criar um web service sem um ficheiro .asmx: </li></ul><asp:ScriptManager ID=&quot;scriptManager“ EnablePageMethods=&quot;true&quot; runat=&quot;server&quot; > public partial class SimplePage : Page { [ WebMethod ] public static string HelloWorld(){ return “Hello World”; } } <script type=&quot;text/javascript&quot;> function PageMethodCall() { PageMethods .HelloWorld(OnSucceeded); } function OnSucceeded(result){ alert(result); } </script> 1 2 3
  46. 46. <ul><li>Web Services </li></ul>
  47. 47. Serviços ASP.NET <ul><li>Autenticação ASP.NET </li></ul><ul><ul><li>Apenas para o modo Forms Authentication </li></ul></ul><ul><ul><li>Utiliza o Membership Provider por omissão </li></ul></ul><ul><ul><li>Disponibiliza métodos de login e logout em Javascript </li></ul></ul><ul><li>Serviço de perfis </li></ul><ul><ul><li>Guarda definições por utilizador </li></ul></ul><ul><ul><li>Os dados são guardados no servidor </li></ul></ul>
  48. 48. <ul><li>Custom Authentication Service </li></ul>
  49. 49. Links <ul><ul><li>http://www.w3.org/TR/XMLHttpRequest </li></ul></ul><ul><ul><li>http://ajax.asp.net/docs </li></ul></ul><ul><ul><li>http://www.adaptivepath.com/publications/essays/archives/000385.php </li></ul></ul><ul><ul><li>http://ajaxpatterns.org </li></ul></ul><ul><ul><li>http://ajax.asp.net/ajaxtoolkit/ </li></ul></ul>
  50. 50. Nelson Correia [email_address] http://nelsoncorreia.spaces.live.com

×