AJAX no GASweb. Mas e afinal, para que usamos o AJAX?

Transcrição

1 Nível - Avançado AJAX no GASweb Por: Pablo Hadler AJAX (Asynchronous Javascript and XML) foi criado com o princípio de ser uma maneira rápida e otimizada de podermos fazer requisições Web, sendo esta totalmente transparente ao usuário. Sabemos que todo o tipo de acesso a dados de um servidor de sites na internet roda em cima de requisições Web (Requisições via protocolo HTTP ao servidor de destino) e por resposta o servidor, também com o mesmo protocolo, retorna os dados solicitados, tais como HTMLs. Este processo normalmente não é notado na visão do usuário, mas é isso que acontece quando digitamos em nosso navegador de internet um endereço da Web. O AJAX por sua vez também roda em cima desta lógica. Mas e afinal, para que usamos o AJAX? Hoje esta tecnologia é utilizada para uma infinidade de processos, mas o que precisamos saber não é o que fazer com ele, mas sim saber como ele trabalha para podermos adequar tal tecnologia ao nosso dia-a-dia. Um exemplo básico da utilização de AJAX, é um refresh de página, sem que o usuário necessite fazê-lo. O programador que cria a página, programa uma requisição AJAX para que busque novos dados no servidor em um limite de tempo e então, também por Javascript, altera a visualização do usuário, talvez inserindo linhas em uma tabela ou algo do gênero, assim dando um aspecto de atualização automática. Veja o exemplo abaixo: <script language="javascript" type="text/javascript"> //variavel ajax var ajax = null; //função que faz a requisição ajax function requisicaoajax() //utilizado para requisições no browser Internet Explorer if (window.xmlhttprequest) ajax = new XMLHttpRequest(); //se a variável ajax for nula, logo o browser não suporta tal tecnologia if (ajax!= null) //abre a requisição ajax, passando o método de acesso, a url solicitada e o parâmetro sobre sincronia ajax.open('get', ' false); //seta a funcao que sera chamada quando o ajax for retornado ajax.onreadystatechange = statusajax; //inicia o tranporte ajax.send(null); //função que trata o retorno ajax function statusajax() //caso o status do ajax esteja ok, então chama a função retornoajax enviando o retorno da requisição como parâmetro if (ajax.readystate == 4 && ajax.status == 200) retornoajax(ajax.responsetext); 1/9

2 //função que é chamada quando o ajax for retornado function retornoajax(response) //dá um alerta no texto de retorno alert("ola o AJAX Retornou"); requisicaoajax(); </script> Sendo que: 1. Criamos um objeto para o transporte do AJAX; 2. Setamos ao objeto as diretivas da solicitação como a url a ser solicitada e o método. O terceiro parâmetro é se deve ser assíncrono ou não, no caso estamos passando false, para o Javascript aguardar o retorno da requisição; 3. Indicamos qual será a função que irá fazer o tratamento de estados da requisição. O status da requisição é retornado pelo browser para tratamento a cada vez que este status muda. Você pode ver a listagem completa de status aqui: Quando dizemos: ajax.onreadystatechange = statusajax; Estamos indicando que toda a vez que este AJAX mudar de status, ele deve chamar esta função. No nosso caso, o único status interessante é o status de requisição ok. Se a requisição retornar um status ok, então a partir daí trabalharemos em nosso refresh, como dito acima, onde trataríamos os dados retornados e aplicaríamos na visualização do usuário. Uma coisa que devemos considerar e que por sua vez é de grande importância, é que não podemos fazer requisições AJAX a outro domínio diferente ao que o site atual roda. Este exemplo é bem simples, mas apenas para podermos ter uma noção de como funciona uma requisição AJAX. Métodos Seguem abaixo alguns dos métodos do objeto de conexão assíncrona. open(mode, url, boolean) mode: Tipo da requisição, GET ou POST; url: Url do objeto solicitado no modo assíncrono, por questões de segurança, os browsers não permitem que a URL esteja em um servidor diferente da página que está fazendo a solicitação; boolean: true (assíncrono) ou false (síncrono). send() É o método SEND que ativa a conexão e faz a requisição de informações ao documento aberto pelo método OPEN. Este método possui somente um parâmetro que serve para enviarmos dados extras ao documento que estamos acessando. Usamos este parâmetro quando, por exemplo, no método OPEN, 2/9

3 acessamos o documento com POST ao invés de GET. Neste caso os dados do POST são passados neste parâmetro de SEND. Carregando um Texto Veja no exemplo abaixo como podemos carregar um arquivo txt do nosso servidor <div id="texto"></div> <input type="button" value="carregar" onclick="carregartextfile()"/> function carregartextfile() if (window.xmlhttprequest) ajax = new XMLHttpRequest(); document.getelementbyid("texto").innerhtml = " Carregando... "; if (ajax) ajax.open('get', ' true); ajax.onreadystatechange = function () if (ajax.readystate == 4) if (ajax.status == 200) document.getelementbyid("texto").innerhtml = ajax.responsetext; ajax.send(null); No exemplo acima criamos um arquivo TEXTO.TXT (' com um conteúdo qualquer e estamos fazendo a chamada deste arquivo com uma requisição de AJAX e logo em seguida estamos mostrando o conteúdo na div que tem o ID= texto. Passando uma URL com parâmetros Nós podemos fazer a chamada de uma URL no método OPEN e passar parâmetros via querystring. Desta forma, o código servidor pode ler estes dados, processar e retornar o resultado. No exemplo a seguir vamos criar uma pagina ASHX(Handler do ASP.NET) que vai pegar dois parâmetros, somar e devolver o resultado via AJAX para a página inicial. Função Javascript Calculadora: function Calculadora() if (window.xmlhttprequest) ajax = new XMLHttpRequest(); if (ajax) document.getelementbyid("resultado").innerhtml = "Calculando..."; ajax.onreadystatechange = resultado var v1 = document.getelementbyid("v1").value; var v2 = document.getelementbyid("v2").value; ajax.open('get', ' true); ajax.send(null); 3/9

4 function resultado() if (ajax.readystate == 4) if (ajax.status == 200) document.getelementbyid("resultado").innerhtml = ajax.responsetext; Código HTML: <input type="button" value="somar" onclick="calculadora()"/> <label id="resultado"></label> Código do arquivo Calculadora.ashx: using System; using System.Collections.Generic; using System.Linq; using System.Web; namespace AjaxSamples /// <summary> /// Summary description for Handler1 /// </summary> public class Handler1 : IHttpHandler public void ProcessRequest(HttpContext context) double v1 = Convert.ToDouble(context.Request.QueryString["v1"]); double v2 = Convert.ToDouble(context.Request.QueryString["v2"]); context.response.write(v1+v2); public bool IsReusable get return false; Note que é aqui que o resultado é processado e escrito na página na linha context.response.write(v1+v2);. Porém como nossa requisição foi via AJAX criada na função calculadora(), o resultado vai aparecer na página que originou a chamada. Os exemplos acima você pode baixar em 4/9

5 AJAX no GASweb Bem como vimos até aqui o AJAX exige um bom conhecimento de JAVASCRIPT, HTML e XML, mas nós facilitamos todo esse processo no GASweb. O GASweb tem um framework para trabalhar com AJAX que facilita muito a vida do desenvolvedor. Este framework é composto basicamente de um controle de servidor que se chama gajaxpanel e de funções JAVASCRIPT prontas para serem usadas nas aplicações. Toda a aplicação gerada com o GASweb faz chamadas de AJAX por padrão. Quando você cria uma página de dados no GASweb todos os controles que fazem requisições ao servidor vão fazer estas requisições com AJAX, sem que você precise usar nenhuma linha de código. Veja no código abaixo gerado pelo GASweb: <GAjax:gAjaxPanel id="mainajaxpanel" runat="server" ClientEvents-OnRequestStart="OnRequestStart" ClientEvents-OnResponseEnd="OnResponseEnd" style="width:100%;height:100%;position:absolute;left:0px;top:0px"> Note que nós temos 2 eventos no gajaxpanel que são responsáveis pelo início e fim da requisição de AJAX. O código destas funções você encontra no arquivo common.js que o GASweb. Calculadora no GASweb Vamos fazer agora no GASweb o mesmo exemplo da calculadora feito acima. Primeiro vamos criar uma página ASPX na nossa solução. Coloque os controle de ajaxpanel TextBox e o botão para fazer o calculo. 5/9

6 Na propriedade text do Label4 faça a fórmula para somar os dois valores: Veja o resultado no browser: Customizando chamadas AJAX no GASweb Podemos fazer chamadas de ajax usando o framework do GASweb. Vamos mostrar agora um exemplo simples de como isso funciona. Imagine que você gostaria de enviar um logo após fazer um cadastro de um cliente ou algo parecido. 6/9

7 E logicamente você quer fazer isso usando AJAX do GASweb, então o que nós precisamos fazer nesta situação: 1. Criar as variáveis de ambiente com as configurações do remetente e servidor do 2. Precisamos de uma classe de envio de s: a. Crie uma pasta dentro de App_Code (figura 1) b. Crie uma Classe c# dentro da pasta criada (figura 2) O Código desta classe você encontra baixando o exemplo desta aplicação em nosso site. 7/9

8 3. Criar uma página de dados no GASweb com algumas características especiais como: a. Somente aceita inclusão de dados b. Não terá visualização 4. Fazer o override da função ExecuteLocalCommandRequest na página. 5. Fazer a chamada AJAX para envio do . 8/9

9 Código do evento Click Aqui esta a chamada de AJAX do GASweb. Como podemos observar, o AJAX é muito rico e bastante extenso, mas o importante de todo esse conteúdo é você conhecer as possibilidades que o GASweb tem pra lhe oferecer. No próximo artigo vamos falar do controle Repeater, que é uma excelente controle ASP.NET para visualização de dados. Você pode baixar esta solução e testar no seu GASweb no link 9/9