Desmistificando o temível AJAX!

O termo AJAX não provém do latim “Acessarium Javascriptum Atloren Xmelum”, não, mas da expressão da língua inglesa “Asynchronous JavaScript And XML” ou Javascript e XML assíncronos.

Um parêntesis teórico:

Esta questão de atividade assíncrona está para Javascript assim com THREAD’S estão para JAVA. Ou seja, a execução assíncrona ocorre em um tempo diferente da execução do script original. De modo que, se no meio de um looping for chamada a execução de uma tarefa assíncrona, o programa não irá aguardar a conclusão desta tarefa para então passar ao próximo passo do looping. Assim ao concluir a execução de um looping de 10 iterações, em que todas executam uma nova tarefa assíncrona, a nona tarefa pode estar sendo aberta e a primeira não ter sido concluída ainda, mas a terceira tarefa já pode ter retornado um resultado.

O que realmente interessa, prática!

Vamos partir de um layour HTML ultra básico:

<div id=“geral”>
<div id=“coluna_menu”></div>
<div id=“coluna_principal”></div>
</div>

Para incluir dados dinamicamente via PHP poderíamos proceder da maneira tradicional:

<div id=“geral”>
<div id=“coluna_menu”>
<a href=“index.php?arquivo=lista.php”>
</div>
<div id=“coluna_principal”>
<!– assim ao clicar no menu recarrega a página incluindo o arquivo que deve ser mostrado –>
<?php include($_GET[‘arquivo’]); ?>
</div>
</div>

Tudo certo até aqui?

Bom, existe uma maneira de se carregar um conteúdo para dentro da div “coluna_principal”, sem usar frames ou recarregar a página utilizando includes.

Trata-se da técnica entitulada de AJAX (Asynchronous JavaScript And XML). Serve basicamente para carregar dados (xml, html, texto) em uma página, abrindo um portal no “espaço tempo” do browser e indo buscar novo conteúdo no servidor, sem desfazer todo o HTML  que já tinha sido previamente carregado no browser, ao acessar a página.

Um parêntesis de programação javascript:

Em primeiro lugar, gostaria de explicar como funciona o atributo innerHTML do javascript. Atenção innerHTML não é AJAX. Serve apenas para alterar dinamicamente o HTML contido dentro de uma tag. É preciso ter em mente que o Javascript vê as tags do browser de uma maneira diferente do PHP. Em Javascript, todas as tags HTML podem ser referenciadas como um objeto (com métodos e atributos), ligado ao objeto principal document. Em PHP, porém, todas as tag’s são tratadas puramente como texto, basta fazer echo de alguma coisa no meio do html e tá realizado. Claro, isto por que o PHP faz a sua parte lá no servidor, e o servidor apenas tem interesse em fornecer TAG’s HTML, e não em interpretá-las. Já o Javascript, é  executado no browser, juntamente com o HTML. Logo, estando o HTML interpretado pelo browser, este HTML fica na memória do computador, e o browser não mais o enxerga como um texto, mas como objetos que tem propriedades e comportamentos. Por exemplo, um botão não pode ser visto como um texto, mas deve ser visto como um programa, um objeto que reage ao click do usuário. Continuando:

var container = document.getElementById(‘coluna_principal’);
//getElementById localiza um objeto no meio do html,
//pelo seu ID, e retorna uma referência para este objeto.

Agora, a variável container se tornou um objeto com referência para a tag “coluna_principal”. E ele tem propriedades que podem ser acessadas a partir desta variável. Tipo, poderíamos descobrir que tag é esta:

alert(container.tagName); //isto mostraria “div” , pois div é o nome da tag

//que é identificada pelo id “coluna_principal”.

Aqui é que entra o innerHTML.

container.innerHTML = “<br> oi <br><br><br><br> bla bla bla”;

//com isto o texto e o HTML entre aspas foram adicionados dentro da tag div com id “coluna_principal”.

Bom esta é a maneira de escrever um HTML novo dentro de uma tag já existente, de forma dinâmica (DHTML – Dynamic HTML).

Então… como o Ajax funciona?

Ajax nada mais é do que a técnica para carregar conteúdo no browser, que utiliza funções javascript para buscar dados de um arquivo presente no servidor. Esta tarefa é executada por um componente do browser (XMLHttpRequest), que pode ser acessado através de funções Javascript para buscar no servidor um novo HTML ou XML.

<script>
//Tenta criar o objeto xmlhttp responsável por buscar os dados no servidor, são necessárias
// 3 tentativas de criação do objeto por conta das discrepâncias de browsers microsoft

try {
xmlhttp = new XMLHttpRequest();
} catch(ee) {
try{
xmlhttp = new ActiveXObject(“Msxml2.XMLHTTP”);
} catch(e) {
try{
xmlhttp = new ActiveXObject(“Microsoft.XMLHTTP”);
} catch(E) {
xmlhttp = false;
}
}
}



//a função de carregamento, recebe como parâmetro
//_idConainer – id da tag onde será escrito o novo HTML que será buscado no servidor
//_endereco – endereço da página que será buscada no servidor

function carrega(_idContainer, _endereco){

xmlhttp.open(“GET”,_endereco,true);
xmlhttp.onreadystatechange=function() {

if (xmlhttp.readyState==4){

//pega o resultado e filtra alguns caracteres absurdos
retorno=xmlhttp.responseText;
//tag_container contem a referencia da tag que vai receber
var tag_container = document.getElementById(_idContainer);
//escreve dentro da tag o novo HTML
tag_container.innerHTML=retorno; //olha o inner html aí

}
}

//Executa
xmlhttp.send(null)
}
</script>

Pronto! Lembra daquele trecho básico de html?

<div id=“geral”>
<div id=“coluna_menu”></div>
<div id=“coluna_principal”></div>
</div>
Para inserir um conteúdo HTML, no div de id “coluna_principal”, basta invocar a função carrega passando como parâmetro o id da div, e o endereço da página que contém os dados que devem ser carregados via AJAX. Ex:

<script>
carrega(‘coluna_principal’, ‘dados.php’);

// ou se for o caso, a url completa:
carrega(‘coluna_principal’, ‘http://www.minhapagina.com/dados.php&#8217;);

</script>

Quando carrega for chamado com os devidos parâmetros é que ocorre a tarefa de carregamento que se dá assincronamente, ou seja, não há como prever o tempo que levará para ela ser concluída, uma vez que este tempo depende de diversos fatores como: a velocidade da conexão de rede naquele momento, a quantidade de dados que serão carregados, a disponibilidade do servidor de atender etc…

E como fazer para um link ativar o carregamento de uma página usando AJAX?

<div id=“geral”>
<div id=“coluna_menu”><a href=“javascript:carrega(‘coluna_principal’, ‘dados.php’);”>acessar dados</a></div>
<div id=“coluna_principal”></div>
</div>
Bom, como podemos ver, AJAX nada mais é do que uma técnica de carregamento de dados. O exemplo acima funciona, porém por tratar-se de um código exemplar de extrema simplicidade, não pode ser utilizado para aplicações sérias. Nele faltam diversos recursos, que talvez em outra análise sobre AJAX possamos aprofundar.

[15/01/2009 – Edição problema grave no wordpress]  – Ao copiar trechos de código, dos posts do Ahã Programando, substitua todas as aspas redigitando-as. Pois o WordPress substitui as aspas originais por algumas que são inúteis em programação. E os testes acabam não funcionando, deixando os entusiastas da programação web frustrados.  Não desista! Tente novamente 🙂

Por hoje é só! E como prometido, quero dedicar este pequeno artigo à minha amiga Web Designer Cristina Otto, abração Cris!!

Advertisements

Tags: , , , , ,

16 Responses to “Desmistificando o temível AJAX!”

  1. Tiago Says:

    Mais um ultra tutorial do master of the masters Leonir!!!!

  2. Júlio Says:

    Excelente!
    Apenas gostaria de uma ajuda/informação: Tenho um layout padrão do Dreamweaver CS3, onde usei alguns recursos do Spry. Na coluna esquerda, que abriga o menu, usei um Spry Accordion de duas abas, que abriga os links de menu, que são oriundos de um arquivo XML. Mas obviamente, quando clica num link do menu, recarrega toda a página.
    Gostaria de saber, como posso aplicar esta técnica, já que os labels e os links do menu vem de um XML?

    Abs.

  3. Marcos Says:

    Tenho uma página que é carregada por este método, no entanto nela contém um script, e este não é carregado. Consegui uma função extraiscript para o método get, no entanto em um formulário (método post) não funciona 😦 any idea?

  4. Darlinton Says:

    Bom artigo, chegou bem perto da minha duvida, vamos ver se vc sabe.

    A diferenca entre PHP e Javascript é que um é executado do lado servidor e outro do lado cliente.

    Digamos que eu queira, via ajax, incluir um arquivo php dentro de minha pagina. O que aconteceria?

    Levando em consideracao que o php é executado no lado servidor, e o ajax gera um jaascript executado no lado cliente, o meu código php iria ou não ser executado?

    Por exemplo se eu incluisse um arquivo x.php, e dentro deste arquivo tive-se , isso iria mostrar a string teste caso eu chamasse este arquivo via ajax?

    Nos meus testes eu fiz um arquivo php misto, duas tags html, e um codigo PHP igual o de cima, os htmls apareceram, e o php não. Vim até aqui perguntar entao pq isso tb pode ser um erro meu na forma de incluir o arquivo. Abraço, bom tutorial.

  5. Leonir Says:

    Muito boa sua pergunta.
    Entenda o ajax como uma forma de buscar algo no servidor. Tudo que for buscado no servidor deve trafegar pelo protocolo HTTP (Hyper Text Transfer Protocol) que é o protocolo perfeito para transferência de HTML. Em sua essência o HTML é texto, só que com marcações denominadas TAG’s.
    Bom, um browser se interessa em pegar interpretar estas tags, e classificar cada uma de acordo com sua serventia em um espaço reservado na memória do computador. Esta classificação se dá em objetos, exatamente como a orientação da programação orientada a objetos. Nesta organização fica bem mais fácil o browser saber o que é um botão, uma caixa de texto, saber dentro de quais tags estes componentes se encontram, monitorar seus eventos e tal.

    Com o fim de que programadores WEB como nós pudéssemos acessar e manipular estes OBJETOS a netscape criou uma linguagem que por fim foi denominada Javascript (nossa amiga). Assim, no mesmo do mesmo texto que compõe o HTML podemos dar comandos Javascript para manipulá-los. Vc já deve ter observado que Javascript não manipula as tags HTML como se fossem simples strings, mas objetos. Com propriedades, métodos e eventos. E por fim óbviamente quem interpreta esta linguagem é o próprio browser.

    Já o PHP como vc mesmo disse é executado no lado servidor. Este geralmente é utilizado para criar ou complementar o HTML que é enviado do servidor para o BROWSER de forma dinâmica. E no caso do PHP, como sua única função é criar o HTML sem monitorar eventos, ele trata o HTML puramente como string. Ou seja, quando vc utiliza um echo, ele está apenas acrescentando algo que será enviado através do protocolo HTTP para o browser. E é isto, quando vc digitar uma url: http://pagina.com.br/lista.php no browser, este receberá apenas texto (seja HTML, Javascript, CSS…). Ninguém jamais viu código PHP no fonte de uma página, pois este apenas é interpretado no servidor, e se não houver echo nada virá do servidor para o browser. Pois bem… e como é tratada uma situação dessas se vc utilizar AJAX para carregar lista.php?
    Nenhuma diferença, a requisição será igual a digitar a url no browser, porém vc dará um destino diferente para o HTML resultante através da propriedade InnerHTML, escrevendo dentro de qualquer outra tag como uma div por exemplo.

    Acho que isto responde sua pergunta.
    Grande abraço.

  6. andreluizrodper Says:

    Outro belo post! Parabéns ae

  7. osiel Says:

    QUAL A FUNCIONALIDADE DA PROPRIEDADE ACTION DA TAG .

  8. osiel Says:

    QUAL A DIFERENÇA DOS METODOS GETS E POST DA TAG.

  9. osiel Says:

    DEZENVOLVA O CÓDIGO DE UMA TABELA 3X3.html.

  10. osiel Says:

    ola! amigos sou novato no pc e estou aprendendo html e preciso responder essa perguntas que coloquei mas procurei na internet mas não obtive resultados concretos, preciso de resposta resumidas e concreta,fando a verdade eu pensava que era só fazer as pergunta e teria tudo simples na inter mas para mim a inter-net e mais dificil do que ir numa biblioteca pois não tem um esclarecimento correto das coisas vou ter de aprender pesquisar nela aceito opinião em forma de ajuda e fico muito grato com tua ajuda amigos.ass:osiel

  11. DuhMummappY Says:

    Por que nao:)

  12. renan leandro de souza Says:

    https://ahaprogramando.wordpress.com/2008/01/27/desmistificando-o-temivel-ajax/

    POR FAVOR, VC TEM COMO ME ENVIAR UM EXEMPLO DESTE ARQUIVO??? EU TENTEI MONTAR COMO VOCE EXPLICOU, MAS NÃO DEU CERTO! ME AJUDA!!!!

    • Leonir Zimmermann Says:

      Vc verificou se está utilizando as aspas normais, ou as que estão no site ? Normalmente se vc copiar o código do site e colar no editor de programas não funcionará, pois as aspas bonitinhas do wordpress não são as mesmas do editor. Por tanto ao colar um código é necessário redigitar as aspas.

  13. Marcus Linares Says:

    Testei aqui e funcionou bem !!! Leonir mandou bem no tutorial.
    Você teria algum exemplo de funcionamento com o uso de envio de informações via form com ajax? Lembro que no passado fiz um teste e as informações eram gravados sem espaços e os caracteres acentuados não eram gravados no banco. Poderia me disponibilizar um código funcional a este respeito?

    Obrigado

  14. roberto caeiro Says:

    Você teria um exemplo de código para abrir uma pagina dentro de uma div sendo chamada por um menu spry?
    div menu (com menu spry)
    div conteudo (onde vai abrir o conteudo chamado pelo menu).
    Voltei a programar e quero fazer um sistema em php para controle de infraestrutura (manutenção, equipamentos, etc).
    Se eu ver um exemplo comentado, fica mais fácil de assimilar e re-aprender.
    Desde já agradeço sua ajuda.

  15. pedro Says:

    Cara, muito obrigado! Ajudou demais!!!!! Parabéns

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s


%d bloggers like this: