Olá à todos, vamos dar nossos primeiros passos ao desenvolvimento em
AJAX (
pt-br,
en).
Antes de mais nada, como qualquer outro desenvolvimento Web, nossa vida poderia ser muito mais simples caso alguns navegadores, simplesmente não existissem
Mas, estão aí, então, um dos nossos trabalhos junto ao desenvolvimento
AJAX, será identificar cada navegador, e a maneira e trabalhar com cada um deles.
Nossa primeira missão, já está na criação do objeto
AJAX, Navegadores Gecko (
pt-br,
en), a criação do objeto é nativa, basta apenas, definirmos a sua nova instância, já navegadores como o IE (
pt-br,
en), fazem uso de controles ActiveX para a criação do objeto. Que por sua vez, se dividem entre alguns identificadores diferentes, os chamados
ProgID's.
Há também, maneiras "independentes" para trabalhar com AJAX, mas que não iremos abordar. Sua utlização é, basicamente, a criação de um IFRAME escondido, que carrega as páginas e passa seu conteúdo para a função JavaScript.
Voltando ao nosso código para criação do
Objeto AJAX, teremos o seguinte script:
<script type="text/javascript">
function getHTTPObject()
{
if(window.XMLHttpRequest)
{
return new XMLHttpRequest();
} else
if(window.ActiveXObject)
{
var prefixes = ["MSXML2", "Microsoft", "MSXML", "MSXML3"];
for(var i = 0; i < prefixes.length; i++)
{
try
{
return new ActiveXObject(prefixes[i] + ".XMLHTTP");
} catch (e) {}
}
}
}
</script>
Entendendo a função:
if(window.XMLHttpRequest)
{
return new XMLHttpRequest();
}
Conforme já comentado, navegadores Gecko, possuem a definição do objeto nativamente, bastando apenas, criar uma nova instância. O que fazemos neste trecho do código é, simplesmente, verificar se existe a definição nativa do objeto, caso possua, já retornamos sua nova instâncialização.
if(window.ActiveXObject)
{
var prefixes = ["MSXML2", "Microsoft", "MSXML", "MSXML3"];
for(var i = 0; i < prefixes.length; i++)
{
try
{
return new ActiveXObject(prefixes[i] + ".XMLHTTP");
} catch (e) {}
}
}
No restante do código, tratamos a criação do objeto por ActiveX, e suas diferenças de identificação. Nossos diferentes identificadores estão agrupados na matriz
prefixes, sendo eles:
MSXML2,
Microsoft,
MSXML,
MSXML3.
Dessa forma, se concluí nossa função para criação do
XMLHTTPOBJECT. Para sua utilização, veja o exemplo abaixo:
ajax = getHTTPObject();
Agora que já podemos criar nosso objeto, vamos dar vida e utilidade à ele. Neste primeiro passo, vamos apenas ler as tags de um arquivo
XML (
pt-br,
en), e apresentá-las dentro de uma
DIV.
Segue abaixo, nosso arquivo XML:
<?xml version="1.0" encoding="iso-8859-1" ?>
<ajax>
<registro>Registro Teste</registro>
<registro>Com acentuação</registro>
<registro>José Maria João</registro>
</ajax>
Lembrando quê:
A codificação, deve ser a mesma que você vem utilizando em suas páginas, a mais comum utilizada entre sites no idioma
PT-BR é a
ISO-8859-1. O padrão utilizado nos arquivos
SWF para leitura de
XML é a
UTF-8, por isso, preste atenção ao trabalhar com
XML e sempre respeite sua codificação, caso contrário, a acentuação pode sair completamente errônea.
Vamos criar agora a função que irá realizar a chamada
AJAX em nossa página:
function consultar()
{
ajax = getHTTPObject();
ajax.onreadystatechange = processChange;
ajax.open("GET", "dados.xml", true);
ajax.setRequestHeader("Cache-Control", "no-store, no-cache, must-revalidate");
ajax.setRequestHeader("Cache-Control", "post-check=0, pre-check=0");
ajax.setRequestHeader("Pragma", "no-cache");
ajax.send(null);
}
Entendendo a função:
ajax = getHTTPObject();
Criamos a nova instância do
Objeto AJAX, todo o nosso trabalho, agora, passa a ser nesta variável.
ajax.onreadystatechange = processChange;
Definimos a função que irá ser chamada a cada alteração no processo
AJAX. Os diferentes
states são:
0 Uninitialized = Valor inicial
1 Open = Ao executar o comando
open() com sucesso.
2 Sent = O Objeto completou com sucesso a requisição, mas nenhum dado foi recebeido ainda.
3 Receiving = Imediatamente após receber o corpo da resposta. Todos os headers HTTP já foram recebidos.
3 Receivind = Imediatamente antes de receber o corpo da resposta, todo o cabeçalho já foi recebido. (Valeu Marcelo)
4 Loaded = A transferência dos dados foi concluída.
ajax.open("GET", "dados.xml", true);
Definimos o método utilizado para o envio dos parâmetros (não utilizamos nenhum neste exemplo), em seguida, passamos o arquivo a ser aberto, e por fim, se desejamos trabalhar de maneira assíncrona (uma requisação não espera a conclusão de outra).
ajax.setRequestHeader("Cache-Control", "no-store, no-cache, must-revalidate");
ajax.setRequestHeader("Cache-Control", "post-check=0, pre-check=0");
ajax.setRequestHeader("Pragma", "no-cache");
Todos esses
headers são para evitar o
cache do
XML. Caso você possua interesse em
cachear o arquivo, remova esses comandos.
ajax.send(null);
Envia realmente os dados atribuidos para requisição
AJAX.
Com essa função definida, podemos chamá-la a qualquer momento em nossa página. Neste exemplo, vamos atribuí-la em um link:
<a href="javascript:consultar();">Consultar Dados do XML</a>
Tudo que nos resta à fazer agora é, criar a função que é chamada a cada alteração no estado da aplicação. Como já atribuimos seu nome,
processChange, deveremos utilizá-lo.
function processChange()
{
if(ajax.readyState == 4)
{
if(!ajax.responseXML.documentElement && ajax.responseStream)
{
ajax.responseXML.load(ajax.responseStream);
}
var output = document.getElementById("output");
output.innerHTML = "";
var xmlobj = ajax.responseXML;
var registros = xmlobj.getElementsByTagName("registro");
for(i = 0; i < registros.length; i++)
{
output.innerHTML += registros[i].firstChild.nodeValue + "<br />";
}
}
}
Entendendo a função:
if(ajax.readyState == 4)
Conforme os
states possíveis, verificamos se os dados já foram carregados completamente.
if(!ajax.responseXML.documentElement && ajax.responseStream)
{
ajax.responseXML.load(ajax.responseStream);
}
IE Fix
O atributo
responseXML não é populado com os dados carregados automaticamente no IE. Para evitar problemas, verificamos se o atributo possui algum valor, caso não possua, carregamos com os dados que vieram do
AJAX.
var output = document.getElementById("output");
Referência ao objeto que receberá a saída do script.
output.innerHTML = "";
Limpamos o atual conteúdo do objeto.
var xmlobj = ajax.responseXML;
Referência ao objeto
XML que foi carregado pelo
AJAX.
var registros = xmlobj.getElementsByTagName("registro");
Capturamos todas as tags
<registro> do
XML. Para saber mais em relação à
DOM em
JavaScript veja
Wikipedia DOM - pt-br,
Wikipedia DOM - en.
for(i = 0; i < registros.length; i++)
{
output.innerHTML += registros[i].firstChild.nodeValue + "<br />";
}
Para cada uma das tags capturadas pela ação anterior, é realizada a concatenação à propriedade
innerHTML do objeto referenciado.
Com isso, concluímos nosso primeiro passo ao
AJAX. Veremos nos próximos posts como trabalhar com arquivos dinâmicos e atribuindo o conteúdo de maneira mais útil.
Em anexo, os arquivos finais para esse exemplo de utilização do AJAX.
ajax_passos_iniciais.zip
Até a próxima
My Opera
