Olá a todos, hoje vamos falar de comunicação entre cliente e servidor numa aplicação ASP.NET. Comunicação essa que pode ser feita de duas maneiras, síncrona ou assincronamente, ou seja, vamos começar a entrar no mundo do Ajax.
Ajax?
O Ajax permite que a comunicação entre o cliente e o servidor seja feita sem interrupções no browser e sem o total PostBack da página ao servidor, o que melhora e muito a experiencia de utilização do nosso site.
A primeira aplicação no mundo a utilizar Ajax foi o Exchange Webmail da Microsoft, para tornar a aplicação Web o mais semelhante possível á aplicação Windows.
Depois veio a era Google e de todas as suas aplicações totalmente criadas com recurso ao Ajax, Gmail, Google Docs e até a simples sugestão na caixa de pesquisa da Google.
Neste momento podemos afirmar que a ideia de aplicações Web totalmente dependentes do servidor são coisa de 1995, neste momento está a ser cada vez mais usado o Ajax. Quem ganha com isso é a Web, aplicações mais interactivas e dando a sensação de ser uma aplicação Desktop.
Ajax ou AJAX?
Ao lerem livros ou pesquisas na Net vão encontrar muito estas duas nomenclaturas, porquê?
O nome original e globalmente utilizado desta tecnologia é Ajax.
A versão AJAX pertence á Microsoft, porque os rapazes de Redmond para ajudar os programadores de .NET criaram API’S para ser mais fácil utilizar Ajax em aplicações ASP.NET.
AJAX tem duas vertentes, servidor e cliente:
- A vertente servidor é para ser o mais simples possível de implementar utilizando controlos criados pela Microsoft (AJAX Control Toolkit) que permitem criar um site com suporte Ajax em poucos minutos.
Os principais controlos são o ScriptManager e o UpdatePanel que permite fazer partial postbacks do conteúdo que envolve.
- A vertente cliente é a que permite mais controlo e que mais se assemelha ao Ajax. (O futuro)
Comunicação cliente – servidor (vice-versa)
Para comunicar do cliente para o servidor existem duas maneiras:
Sem Ajax:
Qualquer controlo que faça PostBack para o servidor comunica do cliente para o servidor.
O ponto negativo é que a página tem de ir para o servidor e ser novamente renderizada, tudo isto causa impactos na performance, tráfego de rede e claro é uma má experiencia para o utilizador pois o browser faz refresh e fica todo branco.
Com Ajax:
Com Ajax o caso muda de figura, só enviamos para o servidor o que realmente precisa de ir e de forma assíncrona actualizamos o nosso browser sem que o cliente veja páginas a piscar.
Os métodos mais comuns:
- XMLHttpRequest: É um objecto da DOM que é invocado por Javascript ou outra linguagem de cliente (Jquery) e que envia um http request para o servidor e carrega a resposta directamente para a linguagem cliente. Como a resposta é enviada e recebida pelo cliente tudo isto é feito para que o cliente não faça nenhum PostBack. Essa resposta pode vir em texto ou XML. Foi graças a esta implementação que temos hoje o Ajax.
- PageMethods: Utilizados em conjunto com o ScriptManager, são uma maneira simples de implementar uma chamada ao Servidor de forma assíncrona criada pela Microsoft. Tem o mesmo funcionamento de um WebService.
- UpdatePanel: É um objecto criado pela Microsoft que permite simular chamadas assíncronas ao Servidor. É um PostBack camuflado, se forem programadores experientes aconselho a não o utilizarem.
- WebServices: Com as novas ferramentas (AJAX, Jquery) é muito simples chamar WebServices do lado do cliente.
ClientScript e ScriptManager:
Estes dois objectos disponibilizados pela Framework AJAX permitem chamar código de cliente do lado do Servidor, por exemplo:
ClientScript.RegisterClientScriptBlock(this.GetType(), “teste”, “alert(‘Estou no servidor’);”, true);
Esta linha iria mostrar uma mensagem no nosso browser.
O ScriptManager tem as mesmas funções que o ClientScript mas é utilizado se o nosso controlo estiver dentro de um UpdatePanel.
Utilização
Vamos então fazer uns exemplos das tecnologias acima mencionadas (á excepção de Jquery, vamos ter um tutorial só sobre isso)
– XMLHttpRequest:
Adicionamos um botão
<input id=”Button2″ type=”button” value=”Teste XMLHttpRequest” onclick=”TesteXmlHttpRequest();” />
Este botão vai chamar uma função JavaScript “TesteXmlHttpRequest();”
Esta função faz um pedido XMLHttpRequest a um Handler http que vai ao servidor e retorna uma mensagem com o numero de cliques que foram passados como querystring.
– PageMethods:
Adicionamos novamente um botão
<input id=”Button3″ type=”button” value=”Teste PageMethods” onclick=”TestePageMethods();” />
Este botão chama uma função JavaScript “TestePageMethods();”
Esta função chama um método PageMethods.RetornaPageMethod.
Este método está definido no código c# (Code Behind)
Como vêem este método tem o atributo [WebMethod], o que lhe permite ser chamado através de código cliente (Javascript), quem faz com que tudo isto aconteça é o objecto ScriptManager no qual indicamos EnablePageMethods=”true”.
O método é simples
PageMethods.RetornaPageMethod(cliquesPM, oncompletePM);
Recebe um inteiro que são os cliques e como é assincrono tem de ter uma função de retorno que se chama “oncompletePM”.
– UpdatePanel:
Este é o caso mais simples de todos, a Microsoft realmente fez um excelente trabalho neste objecto, mas, se forem experientes aconselho não o utilizarem.
O que fazemos é adicionar um UpdatePanel e dentro dele abrir uma tag ContentTemplate onde vamos colocar o nosso botão e uma TextBox.
Ao clicar no botão vamos ao servidor e actualizamos a TextBox com a hora do servidor, tudo isto sem fazer refresh á página.
– WebServices:
Criamos um WebService (.asmx) por defeito vêm com o método HelloWorld, o qual vamos aproveitar.
Uma nota importante para o WebService funcionar tem de ter o atributo [System.Web.Script.Services.ScriptService]
Na nossa página temos de adicionar ao ScriptManager a tag “Services” e ServiceReference dando ao valor do “Path” o local do nosso WebService.
Adicionamos um botão, que irá chamar a função
“esteWebService();”.
Para chamar o WebService temo de fazê-lo desta maneira “Namespace.Nome Webservice.Método” fica assim:
WebApplication1.WebService1.HelloWorld(cliquesWS,completoWebservice);
Novamente passamos a variável de cliques e a função de retorno.
O resultado final da nossa aplicação
