AJAX - O Objeto XMLHttpRequest - Parte 2

18/01/2006 18:00:00

Autor: Rondinely S. de Almeida

Serviços para Webmasters

Exemplos:dados.html
conteudo_simples.html

Este é o segundo arquivo da série "AJAX - O Objeto XMLHttpRequest", como prometemos no final do primeiro artigo (AJAX - O Objeto XMLHttpRequest - Parte 1), estudaremos agora a propriedade onreadystatechange do objeto XMLHttpRequest.

Já vimos que para nos comunicarmos com um documento web via AJAX devemos criar o objeto XMLHttpRequest:

xmlhttp = new XMLHttpRequest();

Abrir o documento web.

xmlhttp.open("GET", "/dados.html");

Enviar ou não parâmetros para a comunicação.

xmlhttp.send(null);

Capturar a resposta na propriedade responseXML ou responseText

resposta = xmlhttp.responseXML

A dúvida que havia ficado era: se vamos usar o objeto XMLHttpRequest para realizar uma comunicação assíncrona com um documento num servidor qualquer, o script não irá aguardar o retorno da resposta da comunicação, uma vez que isto poderia "congelar" a página indefinidamente, então como saberemos o momento certo de buscar a resposta na propriedade reponseXML ou responseText?

A solução para este problema está na propriedade onreadystatechange. Esta propriedade nos permite associar uma função (ou código Javascript) para ser executado toda vez que o evento de mudança de estado do obejto XMLHttpRequest for alterado. Ou seja, podemos definir o que o script fará quando o objeto XMLHttpRequest confirmar que recebeu um retorno do documento web.

A atribuição de uma função pode ser feita da seguinte maneira.

 xmlhttp.onreadystatechange = processadorMudancaEstado;

Para criarmos uma função que manipule os estados do objeto XMLHttpRequest precisamos conhecê-los.

0 - Não iniciado (Uninitialised)
1 - Carregando (Loading)
2 - Carregado (Loaded)
3 - Interativo (Interactive)
4 - Completado (Completed)

Como podemos notar, temos cinco estados possíveis para o objeto XMLHttpRequest: 0 - não iniciado, que acontece se nenhuma comunicação foi iniciada ainda; 1 - carregando, obtemos enquanto a comunicação está acontecendo, o documento foi encontrado e está sendo carregado; 2 - carregado, o documento foi carregado; 3 - interativo, o objeto XMLHttpRequest está em modo interativo; e 4 - completado, a comunicação foi realizada.

Estes estados podem ser acessados através da propriedade readyState do objeto XMLHttpRequest.

estadoObj = xmlhttp.readyState;

O estado que mais nos interessa é o estado 4 (completado), quando o objeto XMLHttpRequest atinge este estado significa que a comunicação foi realizada, com o resultado esperado ou não. O documento ao qual estamos acessando pode ter sido carregado com sucesso ou pode ter havido uma falha. Temos que fazer mais um teste então, para saber se o carragamento foi realizado como o esperado.

Não deixe de ver também:

Podemos saber se um documento foi carregado com sucesso através da resposta que o servidor web nos dá após a requisição de algum documento, esta resposta fica armazenada no objeto XMLHttpRequest na propriedade status. Dois tipos de repostas são os mais importantes para nós: 404 - não encontrado, ou 200 - ok.

estadoServidor = xmlhttp.status;

Agora podemos criar uma função que irá armazenar a resposta dada pelo servidor ao acessarmos um determinado documento via AJAX.

function processadorMudancaEstado () { 
    if ( xmlhttp.readyState == 4) { // Completo 
        if ( xmlhttp.status == 200) { // resposta do servidor OK
            document.getElementById ( "div_conteudo"). innerHTML = xmlhttp.responseText ; 
        } else { 
            alert( "Problema: " + xmlhttp.statusText ); 
        } 
    }
}

Esta função testará todas as possibilidades que citamos anteriormente, e caso comprove que a comunicação foi realizada com sucesso carrega o resultado em forma de texto (responseText) em uma DIV cuja id é "div_conteudo".

Propriedade ID A propriedade ID de um elemento HTML serve como um nome ou identificação para o elemento. Em um documento HTML deve existir um, e somente um elemento com a mesma identificação.

Caso a comunicação falhe será apresentado um alerta com o estado da falha, estado este acessado na propriedade statusText do objeto XMLHttpRequest.

Um script simples mas completo ficaria assim:

var xmlhttp = null;

function pegaConteudo() {
    try { 
        xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); 
    } catch (e) { 
        try { 
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); 
        } catch (E) { 
            xmlhttp = false; 
        } 
    } 

    if  (!xmlhttp && typeof  XMLHttpRequest != 'undefined' ) { 
        try  { 
            xmlhttp = new  XMLHttpRequest(); 
        } catch  (e) { 
            xmlhttp = false ; 
        } 
    }

    if (xmlhttp) {
        xmlhttp.onreadystatechange = processadorMudancaEstado;
        xmlhttp.open("GET", "/dados.html");
        xmlhttp.setRequestHeader('Content-Type','text/xml');
        xmlhttp.setRequestHeader('encoding','ISO-8859-1');
        xmlhttp.send(null);
    }
}

function processadorMudancaEstado () {
    if ( xmlhttp.readyState == 4) { // Completo 
        if ( xmlhttp.status == 200) { // resposta do servidor OK 
            document.getElementById ( "div_conteudo"). innerHTML = xmlhttp.responseText ; 
        } else { 
            alert( "Problema: " + xmlhttp.statusText );  
        } 
    }
}

Pode-se notar que criamos este exemplo baseado nos outros exemplos de bloco de código que viamos vendo no decorrer destes artigos. Devemos entretando destacar algumas diferenças.

AJAX - O Objeto XMLHttpRequest - Parte 2

18/01/2006 18:00:00

Autor: Rondinely S. de Almeida

Artigos relacionados