pedrohmr

Hoje vou falar um pouco da propriedade readyState e do manipulador de eventos onReadyStateChange.

Ambos são muito comuns nas aplicações AJAX, mas poucas pessoas o conhecem a fundo.

Antes de começar, gostaria de deixar uma observação: eles não estão disponíveis apenas para o elemento OBJECT, mas para todos os elementos HTML (apartir da verão 5 do Internet Explorer), ainda que para a maioria deles a propriedade readyState retorne sempre 4 (completamente carregado). A maior parte dos outros estados (veja tabela no fim do artigo) é usada apenas por elementos como IMG, EMBED e OBJECT.

Agora vejamos o seguinte exemplo de uma aplicação AJAX:

// cria um objeto ajax
function createAjaxObj()
{
    try {
        return new XMLHttpRequest();
    } catch(ee){
        try {
            return new ActiveXObject("Msxml2.XMLHTTP");
        } catch(e){
            try {
                return new ActiveXObject("Microsoft.XMLHTTP");
            } catch(E){
                return false;
            }
        }
    }
}

// funcao ajax de exemplo
function doSomething()
{
    // cria o objeto ajax
    var xmlhttp = createAjaxObj();

    // Abre a url
    xmlhttp.open("GET", "./somePage.php");

    // Executada quando o navegador obtiver o código
    xmlhttp.onreadystatechange = function() {

        if (xmlhttp.readyState == 4){

            // retorno do arquivo PHP
            var rtn = xmlhttp.responseText;

            // mostra o conteudo retornado pelo arquivo PHP
            alert(rtn);
        }
    }
    xmlhttp.send(null);
}

Neste exemplo simplesmente acessamos uma pagina ( somePage.php ) que devolve algum dado qualquer. Mas vamos ao que interessa!

Quando enviamos a chamada ao servidor ( xmlhttp.send(null) ) a propriedade readyState tem valor 0. Quando os dados começam a ser carregados, a propriedade readyState passa a valer 1 e o manipulador de eventos onReadyStateChange é invocado. Ao final do processo, caso os dados tenham sido carregados com sucesso, readyState passa a valer 4, e onReadyStateChange é novamente invocado. Desta vez entramos no condicional if(xmlhttp.readyState == 4) e executamos a instrução programada.

A idéia básica é: toda vez que readyState muda de valor, o manipulador de eventos onReadyStateChange é chamado e executado as instruções dentro dele definidas.

Os possíveis valores para readyState são:

Gostou? Tem Dúvidas? Comenta aí!!

Este Post foi postado por Segunda-feira, Fevereiro 25th, 2008 em 9:17 PM e está arquivado em AJAX. Você pode acompanhar e responder este post através do RSS 2.0 feed. You can leave a response, or trackback from your own site.