Pesquisa por: dom
Introdução ao Ajax
ajax, dom, select, server.htmlencode, unicode, xml
12 de dezembro de 2008 23:29263 visitas
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> </td>
<td><a href="javascript:ajax_carrega_estados();">Clique AQUI para carregar os estados </a></td>
</tr>
</table>
</body>
</html>
Este é o arquivo XML
<estados>
<estado>
<codigo>1</codigo>
<nome>Acre</nome>
</estado>
<estado>
<codigo>2</codigo> <nome>Alagoas</nome>
</estado>
<estado>
<codigo>3</codigo>
<nome>Amapá</nome>
</estado>
<estado> <codigo>4</codigo>
<nome>Amazonas</nome>
</estado>
<estado>
<codigo>5</codigo>
<nome>Bahia</nome>
</estado> <estado>
<codigo>6</codigo>
<nome>Ceará</nome>
</estado>
<estado>
<codigo>7</codigo>
<nome>Distrito Federal</nome> </estado>
<estado>
<codigo>8</codigo>
<nome>Espírito Santo</nome>
</estado>
<estado>
<codigo>9</codigo> <nome>Goiás</nome>
</estado>
<estado>
<codigo>10</codigo>
<nome>Maranhã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á</nome>
</estado>
<estado>
<codigo>15</codigo>
<nome>Paraíba</nome>
</estado>
<estado> <codigo>16</codigo>
<nome>Paraná</nome>
</estado>
<estado>
<codigo>17</codigo>
<nome>Pernambuco</nome>
</estado> <estado>
<codigo>18</codigo>
<nome>Piauí</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ô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ã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á...