Leobreda.net

Web, .Net,
SQL, Cloud...

Introdução ao Ajax

Aprenda a trabalhar com Ajax, sem saber a sua história

Criei este tutorial como referência a dificuldade que tive em aprender o funcionamento do Ajax, em razão da necessidade, e o escasso material disponível na Internet sobre Ajax.

É verdade! Basta entrar no Google, pesquisar o termo e um monte de site fala o que é Ajax, sua história,  como faz a requisição, como monta um XML (e não explica por que precisa de XML), e não dá um único exemplo simples de código-fonte (acho que o Page Rank de visitas vale mais do que pretende ensinar). Tente contar aqueles tutoriais em PDF de 10 páginas, 8 citando a história, funcionamento, mas nenhum exemplo. Aí, fica difícil, não é mesmo?

Este aqui é meu exemplo, e espero que lhe sirva:

1. Esta é a minha página:

2. Ao clicar no Select, nada aparece:

3. Ao clicar no link para carregar os estados, automaticamente o tamanho do Select é aumentado:

4. Ao clicar no Select...

 

Vamos ao que interessa agora.

Este é o código da página:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Leobreda.NET</title>
<style type="text/css">
*{font-size:12px;font-family:Verdana, Arial, Helvetica, sans-serif}

</style>

</head>

<body>

<script type="text/javascript">
 
 function getXmlHttp()
 {
  var xmlhttp;
  try
  {
   xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  }
  catch(e)
  {
   try
   {
    xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
   }
   catch(ex)
   {
    try
    {
     xmlhttp = new XMLHttpRequest();
    }
    catch(exc)
    {
     alert("Esse browser não tem recursos para uso do Ajax");
     xmlhttp = null;
    }
   }
  } 
  return xmlhttp;
 }
 
 function processXML(obj,combo,xmlPai,xmlFilhoCod,xmlFilhoNome)
 {
  
  var dataArray   = obj.getElementsByTagName(xmlPai); //Coleta o que está dentro da tag <estados> do XML
      
  
  for(var i = 0 ; i < dataArray.length ; i++) //percorre o arquivo XML para extrair os dados
  {
   var item = dataArray[i];
   
   //contéudo dos campos no arquivo XML
   var codigo   =  item.getElementsByTagName(xmlFilhoCod)[0].firstChild.nodeValue;
   var nome =  item.getElementsByTagName(xmlFilhoNome)[0].firstChild.nodeValue;
  
   //cria um novo option dinamicamente 
   var novo = document.createElement("option");
   novo.value = codigo;
   novo.text  = nome;
   document.getElementById(combo).options.add(novo);
  }
 }

 function ajax_monta_select(combo,pagina,xmlPai,xmlFilhoCod,xmlFilhoNome)
 {
  var xmlhttp = getXmlHttp();
  if(xmlhttp)
  { 
   document.getElementById(combo).options.length = 1;  //Deixa apenas o primeiro OPTION
   xmlhttp.open("GET", pagina, true);
   xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
   xmlhttp.setRequestHeader("Cache-Control", "no-store, no-cache, must-revalidate");
   xmlhttp.setRequestHeader("Cache-Control", "post-check=0, pre-check=0");
   xmlhttp.setRequestHeader("Pragma", "no-cache");
   
   xmlhttp.onreadystatechange = function()
   {
    if(xmlhttp.readyState == 4 )// Status 4 - Após ser processado, chama função processXML que vai varrer os dados
    {
     if(xmlhttp.responseXML)
     {
      processXML(xmlhttp.responseXML,combo,xmlPai,xmlFilhoCod,xmlFilhoNome);
     }
    }
   }
   xmlhttp.send(null);
  }
 
 }

 function ajax_carrega_estados()
 {
 ajax_monta_select('COMBO_ESTADO','estados.xml','estado','codigo','nome');
 
 }


</script>


<table width="30%" border="0" cellspacing="2" cellpadding="2" style="border:1px solid #eaeaea;">
  <tr>
    <td width="8%">Estado</td>
    <td width="92%">
 <select name="COMBO_ESTADO" id="COMBO_ESTADO">
  <option value="0"></option>
    </select>
    </td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td><a href="javascript:ajax_carrega_estados();">Clique AQUI para carregar os estados </a></td>
  </tr>
</table>

</body>

</html>

 

Este é o arquivo XML

<?xml version="1.0" encoding="iso-8859-1"?>
 <estados>
 <estado>
  <codigo>1</codigo>
  <nome>Acre</nome>
 </estado>
 <estado>
  <codigo>2</codigo>   <nome>Alagoas</nome>
 </estado>
 <estado>
  <codigo>3</codigo>
  <nome>Amap&#225;</nome>
 </estado>
 <estado>   <codigo>4</codigo>
  <nome>Amazonas</nome>
 </estado>
 <estado>
  <codigo>5</codigo>
  <nome>Bahia</nome>
 </estado>  <estado>
  <codigo>6</codigo>
  <nome>Cear&#225;</nome>
 </estado>
 <estado>
  <codigo>7</codigo>
  <nome>Distrito Federal</nome>  </estado>
 <estado>
  <codigo>8</codigo>
  <nome>Esp&#237;rito Santo</nome>
 </estado>
 <estado>
  <codigo>9</codigo>   <nome>Goi&#225;s</nome>
 </estado>
 <estado>
  <codigo>10</codigo>
  <nome>Maranh&#227;o</nome>
 </estado>  <estado>
  <codigo>11</codigo>
  <nome>Mato Grosso</nome>
 </estado>
 <estado>
  <codigo>12</codigo>
  <nome>Mato Grosso do Sul</nome>  </estado>
 <estado>
  <codigo>13</codigo>
  <nome>Minas Gerais</nome>
 </estado>
 <estado>
  <codigo>14</codigo>   <nome>Par&#225;</nome>
 </estado>
 <estado>
  <codigo>15</codigo>
  <nome>Para&#237;ba</nome>
 </estado>
 <estado>   <codigo>16</codigo>
  <nome>Paran&#225;</nome>
 </estado>
 <estado>
  <codigo>17</codigo>
  <nome>Pernambuco</nome>
 </estado>  <estado>
  <codigo>18</codigo>
  <nome>Piau&#237;</nome>
 </estado>
 <estado>
  <codigo>19</codigo>
  <nome>Rio de Janeiro</nome>  </estado>
 <estado>
  <codigo>20</codigo>
  <nome>Rio Grande do Norte</nome>
 </estado>
 <estado>
  <codigo>21</codigo>   <nome>Rio Grande do Sul</nome>
 </estado>
 <estado>
  <codigo>22</codigo>
  <nome>Rond&#244;nia</nome>
 </estado>
 <estado>
  <codigo>23</codigo>
  <nome>Roraima</nome>
 </estado>
 <estado>
  <codigo>24</codigo>
  <nome>Santa Catarina</nome>
 </estado>  <estado>
  <codigo>25</codigo>
  <nome>S&#227;o Paulo</nome>
 </estado>
 <estado>
  <codigo>26</codigo>
  <nome>Sergipe</nome>  </estado>
 <estado>
  <codigo>27</codigo>
  <nome>Tocantins</nome>
 </estado>
 </estados>

 

Pra quê um arquivo XML?
Um arquivo XML, é utilizado em várias aplicações: WebServices, Aplicações rodando em plataformas distintas (Linux, Windows, ...), Aplicativos Win32, etc. Sua estrutura básica é um arquivo texto estruturado, de forma que os dados são separados uns dos outros por meta tags (o tal de <metatag>informação</metatag>). E só.

Com um arquivo XML, eu faço minha aplicação realizar sua leitura, coletando os dados que eu preciso.

NOTA: o XML é um documento que deve ter cuidado em declarar caracteres não alfanuméricos e letras com acento. Verifique no código-fonte do XML que no lugar de letras com acento, foram substituídos por caracteres UNICODE. Consulte a linguagem de programação e tente utilizar a função server.HtmlEncode

Um arquivo XML pode ser gerado dinamicamente EM QUALQUER LINGUAGEM DE PROGRAMAÇÃO.
Posso fazer com que o endereço  www.abc.net/estados.aspx?PAIS=Brasil gere uma relação de estados do Brasil (o que acabei de citar), do mesmo jeito que o endereço www.abc.net/estados.aspx?PAIS=Argentina gere uma relação de estados da Argentina.

 

 

Ah, mas e aí? os endereços citados estão com extensão ASPX, e não XML. Calma! Um XML não necessita ter a extensão XML; basta a estrutura da página sair em modo texto (o próprio XML). E isso é que é legal em criar um XML: a saída de dados é variável se a página for gerada dinamicamente utilizando determinada linguagem de Programação

Continuando...

O link CLIQUE AQUI para carregar os estados, chama a função ajax_carrega_estados()

A função ajax_carrega_estados(), chama outra função, desta vez com 4 parâmetros:

'COMBO_ESTADO' = nome da ID do SELECT (veja o código-fonte da página)
'estados.xml' = nome do arquivo XML
'estado'= É o <metadado></metadado> que armazena o estado (veja o código-fonte do arquivo XML)
'codigo'=É o <metadado></metadado> que armazena o código do estado, na qual irá gerar o valor do Option (<option value="100">Estado</option>)
'nome'=É o <metadado></metadado> que armazena o nome do estado, na qual irá gerar o nome do Option (<option value="100">Estado</option>)'

A função ajax_monta_select(), temos as seguintes características:

CINZA: armazena na variável xmlhttp o valor da  função getXmlHttp() (ver código-fonte).
VERMELHO: faça com que o SELECT com relação dos estados seja APAGADO, deixando apenas o primeiro registro. Imagine o caso de selecionar o país ARGENTINA, tendo que remover os registros já existentes do BRASIL.
AZUL: faz com que conecte ao arquivo XML (variável página) estados.xml, estabelecendo que o tal arquivo é um arquivo texto, além de desativar o cache da página

VERDE: quando a página é lida pelo AJAX, executa a função processXML (vou falar mais adiante), na qual irá manipular o SELECT de estados e aí se encerra. Observe que o parâmetro readyState retorna 4. Este valor significa que a página foi lida com sucesso. Há diversos Status, entre eles um que enquanto o AJAX estiver processando o resultado, pode-se colocar aqueles círculos de imagem girando ou até mesmo uma mensagem do tipo AGUARDE...

 

Agora vamos para a função processXML().

VERMELHO: aponto para a variável dataArray que: no XML , coletar o que está dentro do metatag <estados></estados>
AZUL: armazeno nas variáveis codigo e nome, os valores encontrados nos campos  <codigo></codigo> e <nome></none> (referenciados por xmlFilhoCod e xmlFilhoNome da função) , respectivamente.
VERDE: a cada passo do laço for, adiciona no objeto combo (que foi referenciado pela id do SELECT) um <option value="88">Estado</option>

Espero que este artigo lhe ajude o desenvolvimento. É disso que precisamos: um exemplo de código e funcionamento, e não histórias de quem criou, quem descobriu e blábláblá...

 



Acessar todos os artigos »