Tutorial básico sobre Ajax
Asynchronous Javascript and XML, mais conhecido como AJAX.
O que é Ajax?
Ajax foi criado com o principio 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 encima 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 HTML’s.
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 encima 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 em nosso dia-a-dia.
Um Exemplo Básico da utilização de ajax, é um refresh de página, sem que o usuário necessite faze-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.
Como Utilizar?
Hoje, o ajax é suportado pelos principais browsers disponÃveis no mercado, e utilizados pela comunidade WEB.
Para isso utilizados objetos javascript, que rodam encima do browser do usuário e transitam dados por estas requisições.
Assim sendo, podemos fazer interações com processos de servidor, sem que seja necessário por exemplo recarregar a página do usuário, ou mesmo se quer visualize tal iteração.
Vejamos um exemplo básico.
//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.ActiveXObject) ajax = new ActiveXObject('Microsoft.XMLHTTP');
//utilizado como o padrão javascript para requisições AJAX.
else 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','http://gujs.com.br/',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);
}
}
//função que é chamada quando o ajax for retornado
function retornoAjax(response){
//dá um alerta no texto de retorno
alert(response);
}
requisicaoAjax();
1º) Criamos um objeto para o transporte do ajax;
2º) Setamos ao objeto as diretivas da solicitação como a url a ser solicitado 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 ira 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: http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html
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.
Por exemplo:
Sendo que minha página exemplo_ajax.htm estivesse dentro de http://www.gujs.com.br/, só poderei fazer requisições ajax para arquivos que fiquem dentro de http://www.gujs.com.br/.
Este exemplo é bem simples, mas apenas para podermos ter uma noção de como funciona uma requisição ajax.
Existem hoje, várias bibliotecas javascript para formalizar tais requisições, bibliotecas que fazem o controle de estados inválidos da requisição, ou mesmo que facilitam o transporte de requisições via método POST.
O intuito deste artigo é simplesmente desmistificar este fênomeno chamado ajax.
Fique a vontade para deixarem comentários, ou entrar em contato ok?
Até a próxima pessoal;
Março 27th, 2007 at 11:48
O código não funcionou no Firefox 2.0.0.3, só no IE.
A partir da linha
ajax.open(’GET’,'http://gujs.com.br/’,false);
não acontece mais nada no Firefox.
Março 27th, 2007 at 11:56
Olá Paulo, obrigado pelo comentário;
O seu problema é que o firefox não autoriza requisições ajax, quando rodamos o código em máquina local, rodando em arquivos locais.
Se quiseres testar no firefox, você pode hospedar o código em algum servidor http e acessar via servidor.
ok?
Até mais…
Março 27th, 2007 at 12:03
Continua não funcionando:
http://paulodeleo.googlepages.com/ajax.htm
Março 27th, 2007 at 13:08
Oi Paulo;
O caso é que de acordo com a especificação do Ajax, não é possÃvel fazermos requisições ajax para fora do domÃnio atual. Ou seja, se tu requisitares uma pagina dentro de http://paulodeleo.googlepages.com/ funcionará normalmente.
OK?
Estarei colocando uma observação do POST para que não fique tal questão em aberto.
Muito obrigado pelo auxilio.
Abril 22nd, 2007 at 00:21
Aqui funciona perfeitamente.
Parabéns pelo tutorial.
Maio 22nd, 2007 at 19:48
Parabens pelo artigo, mto bom
Executa perfeitamente !
So tenho uma dúvida, no metodo:
function retornoAjax(response){
}
Quando eu tento recuperar um valor do meu arquivo xml gerado via codigo java, apresenta um erro, eu fiz isso.
//arquivo.js
var data = response.getElementsByTagName(”dados”);
Sendo que o dados que eu estou querendo recuperar seguindo essa arvore.
TESTE
O erro que apresenta é que o nao é suportado pelo metodo ou propriedade.
Como eu posso resolver isso ??
Valew
Maio 29th, 2007 at 16:54
Respondido no fórum do GUJS.
http://gujs.com.br/forum/viewtopic.php?t=463
Até mais.
Julho 26th, 2007 at 14:12
Oi pessoal,
só gostaria de dizer que esxistem algumas maneiras de burlar a segurança do Firefox para fazer requisição AJAX fora do domÃnio. Uma delas é criar uma página no seu servidor que busque a página na web para você.
Criei um texto sobre isso, mostrando como fazê-lo usando JSP. Se ainda precisarem, dêem uma olhada lá:
http://javaescript.blogspot.com/2007/07/como-realizar-requisies-ajax-fora-do.html
Espero que isso ajude. Funciona bem pra mim.
Agosto 28th, 2007 at 19:18
O erro neste scritp está na linha
var ajax = null;
retirem que funciona.
e também no
ajax.open(’GET’,'http://gujs.com.br/’,false);
retirem o false, usem: ajax.open(’GET’,'URL’); no lugar da URL coloquem o endereço que querem abrir, no caso http://gujs.com.br/.
Até mais…
Hide2System
Setembro 11th, 2007 at 19:55
Eu entendi o código, mas não sei porque não funcionou.
eu copiei o código, modificando apenas o endereço
ajax.open(’GET’,'http://gujs.com.br/’,false);
por
ajax.open(’GET’,'http://localhost/teste’,false);
no entanto, no ie6 funciona, porém no firefox não.
Outubro 11th, 2007 at 21:38
No meu firefox 2.0.0.6 deu certo, mas tive que mudar para
ajax.open(’GET’.'URL’,true) ou ajax.open(’GET’.'URL’)
Novembro 5th, 2007 at 19:38
Muito bom esse tutorial, gostei mesmo… Alan
Novembro 20th, 2007 at 10:44
Olá !
Já tentei de várias formas mas não funciona a requisição no IE 6.0, simplesmente não acontece nada.
var Ajax = openAjax();
Ajax.open(”GET”,”pagina02.php”,true);
Ajax.onreadystatechange = function
e esta tudo no mesmo domÃnio.
Novembro 20th, 2007 at 10:53
Oi Alfredo.
Poste no fórum do GUJS sua dúvida e seu código para podermos analisa-lo.
Obrigado.
Março 13th, 2008 at 17:39
Parabens …
Obrigado por dividir com nosco seu conhecimento…. ATé
Março 25th, 2008 at 11:19
Bom parabens pelo tuto ficou legal.
Galera quanto ao problema que está acontecendo é que open(”GET”,url,false); passando isso estamos passando um metodo sincrono , o que realmente da pau no firefox , trocando o false para true esta passando para um metodo assincrono . o que podemos tentar fazer é , open(”GET”,url,’false’); colocar aspas no false.
Espero ter ajudado XD.
Abril 7th, 2008 at 01:20
Queria saber de ajax somente o seguinte:
por um certo tempo(5 segundos) aparecer alguma coisa, e dps desse tempo desaparecer.
Se alguem souber como fazê-lo. favor comentar aqui ou entrar no meu blog em contato ;D
Abril 7th, 2008 at 09:02
Oi Daniel;
Neste caso não seria propriamente o AJAX que iria resolver seu problema.
Você precisa é agendar um evento para fazer o conteúdo desaparecer.
Utilize a funcao setTimeout para agendar um evento, ou setInterval no caso de repetidos eventos a cada intervalo.
Segue uma referência: http://www.w3schools.com/js/js_timing.asp
Para dúvidas, poste no fórum que poderemos te dar melhor apoio.
Até mais;
Abril 24th, 2008 at 10:49
Estou tendo problemas com AJAX na função ’status’ quando utilizo o Firefox.
A instrução ‘if (ajax.status == 200)’ não é identificada.
Já tentei ‘if (ajax.responseXML)’, mas não funciona também.
No IE funciona corretamente.
Alguém sabe uma solução para isso?
Abril 24th, 2008 at 10:57
O problema ai não deve ser status nem responseXML, talvez o objeto ajax esteja nulo.
Você seguiu o exemplo acima para a criação do port Ajax ?
Se notar, ali existe um IF para verificar se utiliza ActiveXObject (para IE) ou XmlHTTPRequest(code compliant).
Se tiver mais dúvidas, poste no fórum do GUJS para podermos discutir melhor.
http://gujs.com.br/forum/
Até mais.