Utilizando AJAX com ASP.Net

O Ajax ultimamente tem ganho muita popularidade pois é uma tecnologia usada em sites como Gmail, que permite que o mesmo atualize sua Inbox sem ter que recarregar a página.

por Rodrigo Vieira

Parte 1 - Introdução

Se você é programador web e nunca ouviu falar em Ajax, é porque provavelmente uma das 4 alternativas é verdadeira:

1) Você foi abduzido por E.Ts e passou 1 ano viajando por Alfa Centauri;
2) Você cansou de Internet e resolveu passar os últimos 6 meses como missionário em Uganda;
3) Você foi um dos participantes do último Big Brother, e ficou trancado na sauna até ontem;
4) Alguma combinação das 3 alternativas acima.

Caso contrário, você já deve ter lido ou ouvido falar em Ajax, nome que ganhou muita popularidade pois é uma tecnologia usada em sites como Gmail, que permite que o mesmo atualize sua Inbox sem ter que recarregar a página. Talvez você até tenha ouvido falar na implementação dessa tecnologia que a Microsoft está prometendo para os próximos meses, chamada Atlas.

Mas enquanto Atlas não vem, o que é Ajax? E o que você tem a ganhar com isso?

Ajax é um acrônimo para “ Asynchronous Javascript And XML”, e é uma técnica relativamente antiga, mas que até 1 ou 2 anos atrás não tinha um nome próprio, era mais um “truque” na manga de programadores avançados. Essa técnica consiste em utilizar Javascript, XML e XmlHttpRequest de forma a criar páginas que executem código sem serem recarregadas, ou, para utilizar um termo mais utilizado entre os programadores ASP.Net, sem realizar postbacks . Uma outra forma de explicar isso, então, é dizer que o Ajax permite um comportamento assíncrono de sua página, ou seja, o seu programa vai executar código no servidor sem que a página fique “travada”, permitindo que o usuário enquanto isso continue utilizando-a (você já deve estar pensando o quanto isso seria útil naquela sua página que executa uma consulta ao banco de dados que leva 50 segundos, certo?).

Com tamanha popularidade, praticamente todas as plataformas de programação para web, tais como PHP, Perl e Ruby on Rails, vêm incorporando bibliotecas para suporte a Ajax, e não poderia ser diferente com ASP.Net. A implementação mais popular é chamada, obviamente, Ajax.Net , e nesse artigo vamos explorar as possibilidades oferecidas por essa biblioteca e talvez ao fim você concorde que com Ajax é possível melhorar muito a experiência do usuário em seu site.

Parte 2 – Instalando o Ajax.Net

Antes de mais nada, vamos instalar o Ajax.Net em nossa máquina. A última versão pode ser baixada aqui , e é composta pelo arquivo DLL além de um ótimo tutorial em inglês. Clique em “Download the latest DLL”, e descompacte o arquivo em algum lugar na sua máquina.

Agora abra o Visual Studio.Net 2003, ou seu ambiente de programação favorito, e crie um novo projeto ASP.Net. Antes de comecarmos a programar, precisamos adicionar uma referência ao Ajax.Net. No Visual Studio, em Solution Explorer, clique com o botão direito do mouse em “References”, e em “Add Reference”, na ba “.NET”, clique em “Browse” e selecione o arquivo ajax.dll que você acabou de descompactar.

O último passo é adicionar um httpHandler no arquivo de configuração, web.config, dentro de seção system.web :

<system.web>
    <httpHandlers>
      <add verb="POST,GET" path="ajax/*.ashx"
          type="Ajax.PageHandlerFactory, Ajax" />
    </httpHandlers>

Resumidamente, estamos adicionando um comando que permite que o Ajax intercepte chamadas ao servidor e atue quando necessário.

Pronto, agora podemos criar nossa página-teste.

Parte 3 – “Hello, Ajax”

Para começar vamos criar o indefectível “Hello World”, para vermos se o Ajax funciona mesmo.

Uma chamada Ajax é composta de 2 partes: uma parte que reside no servidor, e executa a parte “complicada” do código, por exemplo, validar um usuário, buscar algo no banco de dados, ou efetuar algum cálculo pesado, e outra parte que fica no cliente, em javascript, que executa ao servidor (para executar aquela parte mais complicada) e que também lida com a resposta vinda do mesmo, uma vez terminado o processamento. Nos bastidores ocorre um bocado de processamento de XML e utilização do objeto XmlHttpRequest, mas o bom é que isso é transparente, então você não tem que se preocupar com esses detalhes.

Vamos então criar nossa função do servidor. Entre no arquivo WebForm1.aspx.vb e adicione o seguinte código ao WebForm:

<Ajax.AjaxMethod()> _
Public Function HelloAjax(ByVal nome As String) As String
   Return "Hello from Ajax, " & nome & "!"
End Function

De diferente nesse trecho só a diretiva Ajax.AjaxMethod , que informa ao Ajax que essa função poderá ser utilizada pelo mesmo.

Também precisamos adicionar uma linha de código ao método Page_Load:

Private Sub Page_Load(…) Handles MyBase.Load
   Ajax.Utility.RegisterTypeForAjax(GetType(WebForm1))
End Sub

Esse comando adiciona automaticamente um bloco de código javascript em nossa página aspx, para que ela possa lidar com chamadas Ajax. O importante aqui é que você coloque como parâmetro do GetType() o nome da classe que você quer expor, nesse caso o nome que você deu à sua página. Como eu mantive o nome padrão dado pelo Visual Studio, minha classe é WebForm1 .

Bem, no lado do servidor era isso. Agora vamos nos voltar ao lado do cliente. Volte ao arquivo WebForm1.aspx , e adicione ao formulário uma caixa de texto ( txtNome) , um botão HTML, e uma tag div (divReposta) :

<form id="Form1" method="post" runat="server">
<asp:TextBox Runat="server" ID="txtNome"></asp:TextBox>
	<button onclick="ExecutaHelloAjax()" type="button">Alô Ajax</button>
	<br><br>
	<div id="divResposta"></div>
</form>

Agora vamos adicionar 2 funções javascript: uma que vai enviar o comando ao servidor, requisitando que ele execute a função HelloAjax, e outra que vai ficar ser invocada quando chegar a resposta e mostrar o resultado dentro da tag div . Você pode colocar esse script em qualquer lugar na sua página, mas eu costumo colocá-lo entre as tags <head> e </head>, no topo.

<script language="javascript">
function ExecutaHelloAjax()
	{
		var nome = Form1.txtNome.value;
		WebForm1.HelloAjax(nome, HelloAjax_CallBack);
	}		
			
	function HelloAjax_CallBack(response)
	{
		document.all("divResposta").innerHTML = response.value;
	}
</script>

Pronto! Agora podemos testar. Execute o programa, entre alguma coisa na caixa de texto, e aperte o botão. Repare que a resposta retorna sem que a página seja recarregada!

Caso você ache que está tudo acontecendo rápido demais pra notar qual a vantagem disso tudo, ao invés de usar os bons e velhos webcontrols, adicione uma linha lá na função HelloAjax para fazer a função dar uma “dormida” por 5 segundos:

<Ajax.AjaxMethod()> _
Public Function HelloAjax(ByVal nome As String) As String
   Threading.Thread.Sleep(5000) "faz o programa dormir por 5 segundos...
   Return "Hello from Ajax, " & nome & "!"
End Function

Repare que agora você pode escrever coisas na caixa de texto enquanto a resposta não vem, ou seja, sua página funciona de forma assíncrona.

Isso é legal, mas naturalmente que seus programas fazem coisas mais complicadas do que simplesmente saudar os usuários. Vamos então tentar algo mais interessante...

Parte 4 – Usando tipos de dados mais complexos: Classes

Além de strings, o Ajax.Net suporta tipos de dados mais complexos, tais como classes criadas por você, e também Datasets, DataTables, Decimal, Double, Boolean, Integer e DateTime.

Vamos adicionar uma classe ao nosso programa, chamada “Usuario”, com 3 propriedades: ID, Nome e Email. Adicione uma nova classe ao seu projeto, Usuario.vb:

<Serializable()> _
Public Class Usuario

#Region "variaveis reservadas "

    Private m_id As Integer
    Private m_nome As String
    Private m_email As String

#End Region


#Region "Propriedades"

    Public ReadOnly Property ID() As Integer
        Get
            Return m_id
        End Get
    End Property

    Public Property Nome() As String
        Get
            Return m_nome
        End Get
        Set(ByVal Value As String)
            m_nome = Value
        End Set
    End Property

    Public Property Email() As String
        Get
            Return m_email
        End Get
        Set(ByVal Value As String)
            m_email = Value
        End Set
    End Property

#End Region

#Region "Construtor"

    Public Sub New(ByVal ID As Integer)
        m_id = ID
        "aqui normalmente você buscaria no banco de dados,
        "mas no nosso exemplo é fixo pra simplificar
        Select Case m_id
            Case 1
                m_nome = "Jar Jar Binks"
                m_email = "jarjar@starwars.com"
            Case 2
                m_nome = "Master Yoda"
                m_email = "greendude825@hotmail.com"
            Case Else
                m_nome = "Usuario desconhecido"
                m_email = "Email desconhecido"
        End Select
    End Sub

#End Region

#Region "Funcoes publicas"

    <Ajax.AjaxMethod()> _
    Public Shared Function BuscaUsuario(ByVal ID As Integer) As Usuario
        Return New Usuario(ID)
    End Function

#End Region

End Class

A maior parte do código é feijão-com-arroz, se você já tem experiência com classes em .Net.

O que deve ser salientado é o atributo <Serializable> que adicionamos à declaração da classe, para que a mesma possa ser manipulada pelo Ajax.Net e transmitida pelo HTTP, e a função Shared (static em C#) “BuscaUsuario” que irá retornar um usuário de acordo com o ID passado, e que está marcada com o atributo AjaxMethod.

À nossa página ASPX vamos adicionar um botão para iniciar a busca ao usuário, e as funções javascript correspondentes (coloque dentro do mesmo bloco <script> que você usou para o Hello World):

function ExecutaBuscaUsuario()
{
   var id_usuario = Form1.txtNome.value;
   Usuario.BuscaUsuario(id_usuario, BuscaUsuario_CallBack);
}
			
function BuscaUsuario_CallBack(response)
{
   var usuario = response.value;
   var div = document.all("divResposta");
   div.innerHTML = usuario.ID + " - " + usuario.Nome + " - " + usuario.Email;
}

Ao formulário só precisamos adicionar um novo botão:

<form id="Form1" method="post" runat="server">
<asp:TextBox Runat="server" ID="txtNome"></asp:TextBox>
<button onclick="ExecutaHelloAjax()" type="button">Alô Ajax</button>

<button onclick="ExecutaBuscaUsuario()" type="button">Busca Usuário</button>

<br>
	<br>
	<div id="divResposta"></div>
</form>

Antes de testar, precisamos fazer mais uma coisa, que é adicionar uma linha ao Page_Load para que o Ajax.Net veja a classe Usuario:

Private Sub Page_Load(…) Handles MyBase.Load
   Ajax.Utility.RegisterTypeForAjax(GetType(WebForm1))
   Ajax.Utility.RegisterTypeForAjax(GetType(Usuario))
End Sub

Agora sim, podemos rodar:

Excelente! Com isso, podemos acessar classes de nossos programas via Ajax.

Parte 5 – Usando tipos de dados mais complexos: DataSets

Para finalizar, vou criar uma outra função que retorne usuários através de um DataSet, já que essa é uma classe bastante comum para aplicações centradas bancos de dados (o que não é muito querido por quem gosta de seguir uma arquitetura “limpa” em 3 camadas, mas isso é uma discussão à parte).

Vamos adicionar mais uma função estática à classe Usuario:

<Ajax.AjaxMethod()> _
Public Shared Function BuscaTodosUsuarios() As DataSet
    "normalmente você popularia esses dados a partir do banco
    "de dados, mas nesse exemplo vamos criar o dataset na mão
    "por questão de simplicidade
    Dim ds As New DataSet
    Dim dt As New DataTable
    dt.Columns.Add("ID")
    dt.Columns.Add("Nome")
    dt.Columns.Add("Email")

    "vamos colocar os dados dentro do dataset
    For ID As Integer = 1 To 2
        Dim row As DataRow = dt.NewRow
        Dim u As New Usuario(ID)
        row(0) = u.ID
        row(1) = u.Nome
        row(2) = u.Email
        dt.Rows.Add(row)
    Next

    "retorna o dataset
    ds.Tables.Add(dt)
    Return ds
End Function

Repare que o Ajax.Net procura manter a sintaxe similar à usada pelo .Net para DataSets, o que facilita a compreensão. No nosso formulário só precisamos adicionar um botão:

function ExecutaDataset()
{
   Usuario.BuscaTodosUsuarios(ExecutaDataset_CallBack);
}
			
function ExecutaDataset_CallBack(response)
{
   var ds = response.value;
   if(ds != null && typeof(ds) == "object" && ds.Tables != null)
   {
      var result = "";
	for(var i=0; i<ds.Tables[0].Rows.length; i++)
	{
	    var row = ds.Tables[0].Rows[i];
	    result += row.ID + ": " + row.Nome + " (" + row.Email + ")<br>";
	}
	document.all("divResposta").innerHTML = result;
   }
}

Vamos ver se funciona:

Funcionou perfeitamente! Com isso terminamos esse “tour” pelo Ajax.Net. Agora é hora de revisar as suas páginas ASP.Net e ver onde você pode tirar vantagem disso.

Divirta-se!!!