AJAX - O Objeto XMLHttpRequest - Parte 3

12/03/2006 16:00:00

Autor: Rondinely S. de Almeida

Serviços para Webmasters

Neste artigo utilizaremos um banco de dados MySQL com nomes dos municípios brasileiro e um formulário de pesquisa para demonstrar como podemos utilizar as técnicas AJAX para, sem ter a necessidade de submeter o formulário, buscar informações em uma base de dados. Estas informações serão exibidas com o auxilio de uma listbox (<select>).

A partir deste ponto estudaremos o código javascript do exemplo do início deste artigo.

O documento pesquisaAJAX.php

var xmlhttp = null; //Objeto XMLHttpRequest.
var settimeId = null; //Controle de tarefas agendadas.

As duas globais declaradas logo no início deste script servirão respectivamente para o controle do objeto XMLHttpRequest e da execução de funções agendadas.

Em seguida definiremos a função que tratará as tecla pressionadas na caixa de texto (<input>) do formulário de pesquisa.

function pesquisar(buscar,e) { 
    var whichCode;
    if (!e) var e = window.event;
    if (e.keyCode) whichCode = e.keyCode;
    else if (e.which) whichCode = e.which;
    var key = ''
    key = String.fromCharCode(whichCode);  // Pega o valor da tecla a partir do seu código.
    if (whichCode == 40) { //Se a tecla pressionada foi seta para baixo.
        if (document.getElementById("listboxresult").style.visibility == "visible") { 
            document.getElementById("listboxresult").focus(); //Passa o foco para a listbox.
            document.getElementById("listboxresult").selectedIndex = 0; 
        }
    } else { //Se outra tecla qualquer foi pressionada
        window.clearTimeout(settimeId); //Limpa qualquer chamada agendada anteriormente.
        if (buscar.length > 0) { //Se tem alguma string para ser procurada.
            settimeId = window.setTimeout("startHttpReq('"+buscar+"')",2000); 
        } else { //Caso contrário esconde a listbox.
            document.getElementById("listboxresult").style.visibility="hidden";
            document.getElementById("listboxresult").disabled = true; //desabilita a listbox.
        }
    }
}

Ressaltamos nesta função o tratamento para a tecla de código 40 (seta para baixo) que, no caso da listbox estar visível, passa o foco para ela e seleciona o primeiro item da lista. Caso qualquer outra tecla seja pressionada verifica-se se existe algo digitado a ser pesquisado e ,caso positivo, agenda uma chamada para a função startHttpReq que executará a busca por meio de técnicas AJAX no prazo de dois segundos. Caso não exista nada para pesquisar escondemos a listbox e a desabilitamos.

Não deixe de ver também:

function startHttpReq(buscar){
    document.getElementById("listboxresult").style.visibility="hidden";
    url = "pesquisaAJAXcidades.php?buscar="+escape(buscar); //Monta a url de pesquisa.
    if (document.getElementById) { //Verifica se o Browser suporta DHTML.
        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 = XMLHttpRequestChange; 
            xmlhttp.open("GET", url, true); //Abre a url.
            xmlhttp.setRequestHeader('Content-Type','text/xml'); 
            xmlhttp.setRequestHeader('encoding','ISO-8859-1'); 
            xmlhttp.send(null); //Envia dados ao documento da url.
        }
    }
}

Esta é uma variante da função pegaConteudo vista nos artigos anteriores. O importante aqui é notarmos que na primeira linha da função escondemos a listbox para o caso da execução da função demorar a retornar um resultado, em seguida preparamos a url com o caminho para o arquivo de pesquisa passando o termo a ser pesquisado como um parametro do tipo GET. Usamos escape para converter caracteres especias para o formato de URL, assim evitarmos perder dados durante o envio das informações. Logo depois fazemos várias tentativas de criação de uma instância do objeto XMLHttpRequest, caso consigamos definimos a função XMLHttpRequestChange como responsável pela manipulação das mudanças de estado do objeto XMLHttpRequest, abrimos a URL, declaramos o tipo de conteúdo do documento e em que conjunto de caracteres está codificado e enviamos null ao documento (como estamos utilizando o método GET, não necessitamos enviar nenhum dado adicional).

function XMLHttpRequestChange() { //Controla as mudanças do objeto XMLHttpRequest.
    //Verifica se o arquivo foi carregado com sucesso.
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200){  
         var result = xmlhttp.responseXML; //Armazena a resposta XML.
        //Captura todas as respostas nas Tags <retorno>
         var pesquisa = result.getElementsByTagName("retorno"); 
        document.getElementById("listboxresult").innerHTML = ""; //Apaga o conteúdo da listbox.
        for (var i = 0; i < pesquisa.length; i++) { //Populariza a listbox
            new_opcao = create_opcao(pesquisa[i]);
            document.getElementById("listboxresult").appendChild(new_opcao);
        }
         if (i>0) { //Caso existam resultados da pesquisa.
            document.getElementById("listboxresult").style.visibility="visible";
            document.getElementById("listboxresult").disabled = false; //habilita a listbox.
        }
    }
}

Esta função é similar a processadorMudancaEstado que vimos nos artigos anteriores, só que aqui usamos uma técnica diferente de tratar o retorno do documento aberto. Os resultados da pesquisa estarão entre TAGs <retorno> no documento que abriremos, por isto pegamos todas as TAGs deste tipo e armazenamos na variável $pesquisa, depois, para cada item desta variável, criamos um novo elemento HTML <OPTION> e adicionamos ele a listbox. Em seguida verificamos se temos algum elemento retornado, caso afirmativo exibimos a listbox.

AJAX - O Objeto XMLHttpRequest - Parte 3

12/03/2006 16:00:00

Autor: Rondinely S. de Almeida

O documento pesquisaAJAX.php

Artigos relacionados