ASP.NET AJAX

Microsoft Web & Gaming Technologies @ UALG Nelson Correia (ncorreia@ncorreia.name) http://nelsoncorreia.spaces.live.com

AJAX – O que é? Asynchronous Javascript and XML Utilizado em diversas aplicações web recentes Microsoft Virtual Earth Windows Live Spaces Google Maps Google Suggest Google Reader Google Docs Gmail

AJAX Fonte: Adaptative Path Fonte: Adaptative Path

AJAX – Porquê? Melhora a experiência do utilizador: Reduz o tempo de espera entre pedidos Reduz ou elimina o flickering das páginas Permite interacção mesmo durante pedidos Reduz o tráfego a circular na rede Baseado em standards abertos: ECMA Script; XML; HTML; etc Compatibilidade cross-browser

AJAX – Em que consiste? Conjunto de tecnologias XMLHttpRequest JavaScript DOM XML/JSON XHTML/HTML CSS XSLT

XMLHttpRequest Object Obtenção var req = null; if (window.XMLHttpRequest) { req = new XMLHttpRequest() ; // IE7, Firefox, Safari, Opera,... } else if (window.ActiveXObject) { // IE5.x, IE6 try { req = new ActiveXObject("Msxml2.XMLHTTP") ; } catch (e) { try { req = new ActiveXObject("Microsoft.XMLHTTP") ; } catch (e){ alert("Exception: " + e.message); } } }

XMLHttpRequest Object Métodos Método Parâmetros e Descrição open ( method , URL , async, userName, password ) Especifica os parâmetros dum pedido send ( content ) Envia o pedido setRequestHeader ( label, value ) Adiciona um header ao pedido abort ( ) Cancela o pedido corrente

XMLHttpRequest Object Propriedades 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

XMLHttpRequest - Alternativas IFrame Vantagens: Funciona em browsers mais antigos Não necessita de ter ActiveX activado Permite cross-site scripting (pode ser utilizado em conjunto com o XMLHttpRequest) Desvantagens: Não permite o cancelamento de um pedido API mais complexa, para pedidos non-GET Não permite verificar o estado de um pedido Não “conhece” XML

XMLHttpRequest - Alternativas HTTP Streaming Richer Plugin On-Demand Javascript Import XML Document Image-Cookie call Stylesheet call Resposta 204 – “No content” http://ajaxpatterns.org/XMLHttpRequest_Call#Alternatives

ASP.NET AJAX Framework para desenvolvimento de aplicações AJAX - enabled , em ASP.NET Fácil integração com web-services Bibliotecas script cross-browser Acesso a serviços de Autenticação e Perfis, a partir de script Extensões ao sistema de tipos Javascript

Camada de Comunicação Assíncrona (1) Permite: Pedidos assíncronos ao servidor, a partir de Javascript Invocação de métodos de web services (.asmx) Invocação de métodos estáticos da página Suporta vários formatos de seriação: XML String JSON Enumerado ResponseFormat : Xml Json

Camada de Comunicação Assíncrona (2) Arquitectura (Cliente)

Camada de Comunicação Assíncrona (3) Arquitectura (Servidor)

ASP.NET Ajax Server Controls ScriptManager UpdatePanel UpdateProgress Timer

ScriptManager Gere o código script das páginas ASP.NET AJAX Inclui na resposta o código script da biblioteca Microsoft AJAX Dá suporte à actualização parcial de páginas Permite a partir de script : Chamadas strongly-typed a web-services Utilização das extensões ao sistema de tipos Acesso aos serviços de autenticação e de perfis

ScriptManager Métodos 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

ScriptManager Propriedades 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

ScriptManager Propriedades 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)

ScriptManager Tratamento de erros 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 .

ScriptManagerProxy Problema: Apenas um ScriptManager por página Utilizado quando: A master-page tem um ScriptManager Se pretende aceder aos serviços de script num user control Particularizar scripts ou serviços para algumas páginas

ScriptManagerProxy Wrapper para as propriedades: Services Scripts ProfileService AuthenticationService Page code Master Page Content Page ScriptManager ScriptManagerProxy

ScriptManager & ScriptManagerProxy

UpdatePanel Define uma região, que pode ser actualizada de forma independente do resto da página Podem existir vários por página: UpdatePanel3 UpdatePanel1 UpdatePanel2 UpdatePanel4 Page1 UpdatePanel1 UpdatePanel2 Page2

UpdatePanel Como é desencadeada uma actualização? Propriedade UpdateMode Always Conditional Qualquer postback , síncrono ou assíncrono. Postback causado por um dos seus triggers ; Programaticamente através do método Update; Actualização dum UpdatePanel pai ; Postback originado por um filho , com ChildrenAsTriggers = true (default).

UpdatePanel Triggers <asp:UpdatePanel ID="UpdatePanel1" runat="server"> <ContentTemplate> <asp:Button ID="Button1" runat="server/> </ContentTemplate> < Triggers > <asp: PostBackTrigger ControlID="Button1" /> <asp: AsyncPostBackTrigger ControlID="Button2" /> </ Triggers > </asp:UpdatePanel> <asp:Button ID="Button2" runat="server /> ScriptManager.RegisterPostBackControl ScriptManager.RegisterAsyncPostBackControl

UpdatePanel Controlos incompatíveis: TreeView e Menu WebParts FileUpload A não ser que seja um PostBackTrigger do UpdatePanel GridView e DetailsView Caso EnableSortingAndPagingCallbacks for true

UpdatePanel Controlos incompatíveis (continuação): Login, PasswordRecovery, ChangePassword e CreateUserWizard Se o conteúdo não tiver sido convertido para template Controlo Substitution Controlos de validação Existe disponível uma alternativa * *http://blogs.msdn.com/mattgi/archive/2007/01/23/asp-net-ajax-validators.aspx

UpdateProgress Mostra informação durante actualizações parciais Para actualizações rápidas sem feedback visual, usa-se o DisplayAfter O conteúdo é mostrado quando: O UpdatePanel associado gera um postback Propriedade AssociatedUpdatePanelID Em qualquer postback assíncrono Se não estiver associado a nenhum UpdatePanel

Timer Utilizado para actualizar regiões periodicamente Desencadeia postbacks em intervalos pré-definidos: Síncronos: se fora dum UpdatePanel Assíncronos: se dentro dum UpdatePanel O evento Tick permite realizar processamento periódico no servidor

Javascript – Extensões ao sistema de tipos (1) A biblioteca Microsoft AJAX adiciona suporte para: Namespaces Classes: Campos (apenas de tipos primitivos) Propriedades (tipos primitivos ou referência): Getter Setter Métodos Eventos

Javascript – Extensões ao sistema de tipos (2) Continuação: Herança Interfaces Enumerados Introspecção Métodos de Type permitem obter informação sobre o tipo Funções auxiliares para arrays e strings Modificadores de acesso Convenção de nomes da biblioteca: nome precedido de underscore é considerado privado

Javascript Wrappers $addHandler Sys.UI.DomEvent.addHandler $addHandlers Sys.UI.DomEvent.addHandlers $removeHandler Sys.UI.DomEvent.RemoveHandler $clearHandlers Sys.UI.DomEvent.clearHandlers $create Sys.Component.create $find Sys.Application.findComponent $get Sys.UI.DomElement.getElementById $addHandlers($get("Button1"), {click:processClick,mouseover:processMouseOver}); Exemplo:

Gere as actualizações parciais no browser Expõe um modelo de eventos semelhante ao do ASP.NET: 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

Web Services Chamadas a web services a partir de código script Web services definidos em ficheiros .asmx São criadas classes proxy em Javascript: Para o web service e correspondentes web methods Para os tipos dos parâmetros ou retornos Apenas para web services no mesmo domínio

Web Services – How to <system.web> <httpHandlers> <remove verb="*" path="*.asmx"/> <add verb="*" path="*.asmx" type="System.Web.Script.Services.ScriptHandlerFactory"/> </httpHandlers> <system.web> 1 2 // Calculator.asmx <%@ WebService Class="Calculator" Language="C#"%> [ ScriptService ] public class Calculator : WebService { [ WebMethod ] public int Add(int i1, int i2) { return i1 + i2; } }

Web Services – How to 3 <asp:ScriptManager runat="server" ID="scriptManager"> <Services> <asp:ServiceReference path="~/WebServices/Calculator.asmx" /> </Services> </asp:ScriptManager> 4 <script type="text/javascript"> function add(value1, value2){ SimpleWebService.Add(value1, value2, OnSucceeded); } function OnSucceeded(result){ alert(result); } </script>

Web Services Também é possível criar um web service sem um ficheiro .asmx: <asp:ScriptManager ID="scriptManager“ EnablePageMethods="true" runat="server" > public partial class SimplePage : Page { [ WebMethod ] public static string HelloWorld(){ return “Hello World”; } } <script type="text/javascript"> function PageMethodCall() { PageMethods .HelloWorld(OnSucceeded); } function OnSucceeded(result){ alert(result); } </script> 1 2 3

Serviços ASP.NET Autenticação ASP.NET Apenas para o modo Forms Authentication Utiliza o Membership Provider por omissão Disponibiliza métodos de login e logout em Javascript Serviço de perfis Guarda definições por utilizador Os dados são guardados no servidor

Links http://www.w3.org/TR/XMLHttpRequest http://ajax.asp.net/docs http://www.adaptivepath.com/publications/essays/archives/000385.php http://ajaxpatterns.org http://ajax.asp.net/ajaxtoolkit/

Nelson Correia [email_address] http://nelsoncorreia.spaces.live.com

ASP.NET AJAX

Mais conteúdo relacionado

Mais procurados (20)

Destaque (9)

Semelhante a ASP.NET AJAX (20)

Último (20)

ASP.NET AJAX