Detalhes

Categoria: Webmaster

Atualização: Domingo, 12 Agosto 2007 19:35

Autor: vovó Vicki

Acessos: 7194

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.

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