Existem muitos artigos na internet sobre o que é o AJAX, quando surgiu etc. Não irei me preocupar com isso neste artigo. Neste artigo irei demonstrar, com exemplos como utilizar o AJAX sem o uso de nenhuma biblioteca pronta e utilizando o AjaxPro.NET (http://ajaxpro.schwarz-interactive.de/).

 

 Para que todos consigam entender como esse tipo de chamada funciona, é necessário um mínimo de conhecimento em Javascript e um conhecimento razoável em .NET. Irei utilizar VB.NET (Visual Studio .NET 2003) e para que todos consigam testar em suas máquinas, não farei acesso a nenhuma base de dados, nos exemplos de retorna de DataSet para o javascript iremos criar o DataSet via código.

 

- Casos em que o uso de AJAX agrega valor a uma aplicação.

 

  1 - Um exemplo clássico que costumo usar é quando temos dois DropdownLists, um com a lista de estados e outro com a lista de cidades. Neste caso e em todos os casos em que temos campos que devem ser preenchidos de acordo com o preenchimento de um outro o uso de AJAX é muito benéfico, tanto para o usuário quanto para o desenvolvedor. Para o usuário o ganho é claro, a página não será enviada ao servidor, será enviada somente uma requisição para uma função específica e isso vai dar muito mais velocidade à aplicação. Para o desenvolvedor o ganho, imaginando que nessa página não teríamos somente os dois dropdownlists de estado e de cidade, é que o desenvolvedor não teria que tratar nenhum campo para preencher algum outro dependente, formatar algum campo, consultar a base de dados para exibir algum valor que não foi alterado pelo usuário e situações do tipo.

 

  2 - Aplicações corporativas, com páginas extensas, ganham velocidade por que além de não haver o post da página, esse post caso acontecesse trafegaria muito mais informação do que o necessário.

 

  3 - Aplicações que realizam tratamento de informações e exibem ou ocultam itens em uma página, por exemplo, em um cadastro de clientes uma pessoa física tem como informação adicional os dados do cônjuge e uma pessoa jurídica ao invés disso tem a informação sobre os sócios. Nesse caso, vamos supor que quando a página foi aberta, não sabíamos qual era o tipo de cliente, física ou jurídica e que iremos realizar esse tratamento de acordo com o CNPJ/CPF digitado, se for CPF exibimos a opção de informação dos dados do cônjuge e não mostramos nada sobre sócios e se for jurídica realizamos o inverso.

 

  Esses são apenas alguns casos que são resolvidos de forma muito mais elegante e rápida usando o AJAX. É necessário que você avalie todos os pontos de sua aplicação Web para decidir aonde será utilizado AJAX e aonde será tratado por Post.

 

  Para os primeiros dois exemplos, iremos fazer usar o AJAX sem a ajuda de nenhuma biblioteca externa, para isso é necessário entender que entender algumas coisas:

 

  Para que um método javascript chame um método VB.NET dentro de uma página Vb.NET, tem que ter:

 

      - A página que contem os controles;

      - Uma classe separada que programe a interface IHttpHandler;

      - Uma página ASP.NET que manipulará essa chamada (arquivo com a extensão ASHX);

      - O código javascript que interceptará o evento desejado e chamará o método Vb.NET desejado; e

      - O Código javascript que irá tratar o retorno do método Vb.NET.

 

- Primeiro Exemplo - Chamando uma rotina AJAX, sem o uso de biblioteca que retorna uma string.

 

  Neste primeiro exemplo, iremos fazer uma chamada a um código VB.NET que nos retorna uma string qualquer. Para isso vamos começar abrindo o Visual Studio .NET 2003 e criando uma solução Vb.NET do Tipo ASP.NET Web Application. Irei chamar nosso aplicativo de 'UsandoAjax'.

 

 

 

  Após a solução ter sido criada pelo Visual Studio .NET, vamos excluir o webform1.aspx que foi criado automaticamente junto com a solução.

 

Vamos agora incluir quatro webforms na nossa aplicação, chamarei esses webforms de PrimeiroExemplo.aspx, SegundoExemplo.aspx, TerceiroExemplo.aspx e QuartoExemplo.aspx. Sua solução, se você seguiu a mesma nomenclatura deve estar como na figura 3.

 

 

Figura 3

 

  Vamos abrir a página PrimeiroExemplo.aspx e colocar nela dois controles, primeiro um controle HTML do tipo Button  que eu chamarei de 'btnChamarHTML', e ajustaremos à propriedade value na janela de propriedades para 'Botão HTML' para identificar qual o controle que estamos clicando e um segundo controle Button para webforms o Button Web Server Control que chamarei de 'btnChamarWebServerControl' e que terá sua propriedade text com o valor 'Botão chamar Web Server control'.

 

Controle Web Server Control

Controle HTML

 

 

   

 

 

 

 

A página deve estar parecida com a figura 6.

 

Figura 6

 

  Agora vamos criar os códigos javascript para tratar o click nesses dois botões e chamar o nosso método VB.NET. Para o controle 'btnChamarHTML' iremos adicionar um tratamento no código HTML para o evento 'onclick', nesse evento iremos chamar a função javascript 'CliqueHTML'. A chamada ficará parecida com a figura 7.

 

Figura 7

 

 Para o controle Web no entanto não podemos adicionar o tratamento ao evento no HTML, temos que fazer por meio de atributos no page_load da nossa página. Para isso, iremos colocar o seguinte código no page_load do nosso primeiroexemplo.aspx.

 

   'btnChamarWebServerControl.Attributes.Item("onclick") = "javascript:CliqueWebServerControl();"'. Seu page_load do primeiroexemplo.aspx deverá ficar como na figura 8.

 

Figura 8

 

  Vamos parar com o javascript por enquanto, vamos agora criar a nossa classe de tratamento e o manipulador que irá chamar essa classe. Para dar continuidade, iremos adicionar uma nova classe ao nosso projeto chamada ClassePrimeiroExemplo.VB e depois iremos adicionar um novo webform chamado ManipuladorClassePrimeiroExemplo.aspx.

 

  Iremos agora abrir o código HTML da página que acabamos de criar, a página ManipuladorClassePrimeiroExemplo.aspx e iremos apagar todo o código HTML presente nela. Não estranhem, podem apagar todo o código sim. Isso é necessário por que não temos nenhum objeto do tipo Handler ao adicionar novos itens em nossa solução. Em seguida iremos colocar uma única linha nesse arquivo. A linha de código é: '<%@ WebHandler Language="VB" Class="UsandoAjax.ClassePrimeiroExemplo" %>' como vocês podem ver na figura 9.

Figura 9

 

Em seguida iremos alterar a extensão de .ASPX para .ASHX da nossa página ManipuladorClassePrimeiroExemplo.aspx que passará a se chamar ManipuladorClassePrimeiroExemplo.ashx.

 

  Agora vamos à nossa classe ClassePrimeiroExemplo.VB e iremos codificar que essa classe programa a interface IHTTPHandler como pode ser visto na figura 10.

 

Figura 10

 

Note que dois métodos serão criados, IsReusable e ProcessRequest. Iremos nos concentrar no método ProcessRequest que é o lugar aonde trataremos à solicitação. Vamos colocar duas linhas de imports, uma apontando para System.Web e outra para System.XML.

 

  Depois de ajustados o imports, vamos ajustar o código de acordo com o bloco abaixo:

 

        context.Response.ContentType = "application/xml"

        Dim xw As New XmlTextWriter(context.Response.OutputStream, New System.Text.UTF8Encoding)

 

        xw.WriteStartElement("resultados")

        xw.WriteStartElement("resultado")

        xw.WriteString("Resultado esperado")

        xw.WriteEndElement()

        xw.WriteEndElement()

 

        xw.Close()

        GC.Collect()

 

  Agora vamos voltar ao código javascript e finalizar a chamada e tratar o retorno do nosso método.

 

  O código javascript para chamada e retorno deve ficar assim:

 

 

Figura 11

 

Testando

 

            Quando rodamos o nosso aplicativo de teste e clicamos nos dois botões o retorno é:

 

Figura 11

 

Esse retorno é o conteudo do nosso XML de resposta. No próximo exemplo veremos como percorrer um XML e colocar os seus itens dentro de um dropdownlist.

 

 

Para maiores informações sobre as técnicas AJAX visite:

 

- http://ajaxpro.schwarz-interactive.de/

- http://msdn.microsoft.com/asp.net/default.aspx?pull=/library/en-us/dnaspp/html/lifewithoutrefresh.asp