Aldeia Numaboa
Um portal diferente em Português do Brasil
Informática da Aldeia

Tutoriais

Na Aldeia

Há 96 visitantes online

3304 registros
0 hoje
9 nesta semana
41 neste mês

Boas vindas: Xico

Estatística

Artigos: 1063
Leituras: 6036442
Arquivados: 21
Downloads: 533
Baixados: 172236
Glossário: 1208
Bibliografia: 25
Links: 90

Visitas de onde

Top 5:
Brasil flag 73%Brasil (47535)
Portugal flag 5%Portugal (3069)
EUA flag 3%EUA (2132)
Rússia flag 0%Rússia (259)
Holanda flag 0%Holanda (239)
65127 visitas de 100 países

Hoje:135
Ontem:2587
No mês:39312
Mês passado:25815
Total:65127
Recorde:3037
No dia:04.03.10
Leituras hoje:19002
Leituras Total:280554
Bots hoje:60
Dados desde:16.02.2010

Login



Kanji da hora




Faça contato






Ter

25

Abr

2006


08:16

AJAX em 30 segundos PDF Imprimir Indique esta página
(12 votos, média 4.2 de 5)
Escrito por vovó Vicki   


Avançado Ultimamente fala-se muito sobre a tecnologia AJAX. Procurando artigos e tutoriais na rede, encontrei o texto do Rasmus Lerdorf, [url=http://rajshekhar.net/blog/archives/85-Rasmus-30-second-AJAX-Tutorial.html]Rasmus' 30 second AJAX Tutorial[/url], um excelente tutorial que desmistifica o AJAX com espantosa simplicidade e clareza. Como este tutorial me ajudou nos primeiros passos, resolvi traduzí-lo na esperança de facilitar o começo de quem se interessar pelo assunto.

Diz o autor

Acho que uma porção de coisas do AJAX são um tanto exageradas. Muita gente tem usado coisas semelhantes muito antes de serem chamadas de "AJAX" e elas realmente não são tão complicadas como uma porção de gente faz parecer. Eis aqui um exemplo simples de uma das minhas aplicações. Primeiro o JavaScript:

function createRequestObject() {
    var ro;
    var browser = navigator.appName;
    if(browser == "Microsoft Internet Explorer"){
        ro = new ActiveXObject("Microsoft.XMLHTTP");
    }else{
        ro = new XMLHttpRequest();
    }
    return ro;
}

var http = createRequestObject();

function sndReq(action) {
    http.open('get', 'rpc.php?action='+action);
    http.onreadystatechange = handleResponse;
    http.send(null);
}

function handleResponse() {
    if(http.readyState == 4){
        var response = http.responseText;
        var update = new Array();

        if(response.indexOf('|' != -1)) {
            update = response.split('|');
            document.getElementById(update[0]).innerHTML = update[1];
        }
    }
}

Isto cria um objeto de requisição juntamente com uma função de requisição de envio e uma que manipula as respostas. Para usá-las, é só incluir este JS na sua página. Depois, para fazer uma destas requisições de backend, basta amarrr o objeto a alguma coisa como um evento onclick ou um simples href como este:

<a href = "javascript:sndReq('foo')">[foo]</a>

Isto significa que, quando alguém clicar neste link, será enviada uma requisição backend para rpc.php?action=foo.

No rpc.php você pode ter algo como:
switch($_REQUEST['action']) {
    case 'foo':
      / fazer alguma coisa /
      echo "foo|foo feito";
      break;
    ...
}

Agora, dê uma olhada na handleResponse. Ela analisa a string "foo|foo feito" quebrando-a no '|'. Depois usa o que estiver antes do '|' como um elemento id do DOM da sua página e a parte depois do '|' como o novo innerHTML (conteúdo) deste elemento. Isto significa que, se você tiver uma tag div como esta na sua página:

<div id="foo">
</div>

assim que o link for clicado, isto será dinamicamente mudado para:

<div id="foo">
foo feito
</div>

E isto é tudo. Todo o resto é apenas construído sobre esta base. Você pode substituir minha sintaxe simples de resposta "id|texto" por um formato XML mais elaborado, como também pode transformar a requisição numa muito mais complicada. Antes de você instalar grandes bibliotecas "AJAX", teste as suas funções para saber exatamente como funcionam e as torne mais complicadas apenas na medida da sua necessidade. Com frequência você não vai precisar mais do que eu mostrei aqui.

Por exemplo, seria realmente muito simples expandir um pouco mais este modelo para poder enviar múltiplos parâmetros na requisição. Seria algo como:

function sndReqArg(action,arg) {
    http.open('get', 'rpc.php?action='+action+'&arg='+arg);
    http.onreadystatechange = handleResponse;
    http.send(null);
}

E sua handleResponse pode ser facilmente expandida para coisas muito mais interessantes do que simplesmente substituir o conteúdo de um div.

- Rasmus

Tradução: vovó Vicki

Última atualização ( Dom, 12.08.2007 19:35 )
 

Topo

Topo

Exceto onde especificamente citado, todo material deste site está sob Licença Creative Commons