Alimentando uma ComboBox dinamicamente utilizando técnicas AJAX

28/11/2005 12:00:00

Autor: Rondinely S. de Almeida

Serviços para Webmasters

Exemplos:01.php

18:     mysql_close($link);
19: ?>
20: </cidades>

Depois de criadas todas as 'option' possíveis fechamos a conexão com o banco de dados, saimos do código PHP e fechamos o elemento raiz do arquivo XML.

Pronto, agora só falta juntar os dois arquivos, pegando os dados do '01_cidades.php' e alimentando a ComboBox do '01.php'. Quem vai fazer isto são nossas funções que estão no arquivo seguinte:

Arquivo 01.js

01: var HttpReq = null;
02: var dest_combo = null;
03:
04: function ajaxComboBox(url, comboBox){
05:  	 dest_combo = comboBox;
06:    var indice = document.getElementById('estados').selectedIndex;
07:    var sigla = document.getElementById('estados').options[indice].getAttribute('value');
08:    url = url + '?uf=' + sigla;
09:    if (document.getElementById) { //Verifica se o Browser suporta DHTML.
10:        if (window.XMLHttpRequest) {
11:            HttpReq = new XMLHttpRequest();
12:            HttpReq.onreadystatechange = XMLHttpRequestChange;
13:            HttpReq.open("GET", url, true);
14:            HttpReq.send(null);
15:        } else if (window.ActiveXObject) {
16:            HttpReq = new ActiveXObject("Microsoft.XMLHTTP");
17:            if (HttpReq) {
18:                HttpReq.onreadystatechange = XMLHttpRequestChange;
19:                HttpReq.open("GET", url, true);
20:                HttpReq.send();
21:            }
22:        }
23:    }
24: }
25:
26: function XMLHttpRequestChange() {
27:    if (HttpReq.readyState == 4 && HttpReq.status == 200){
28:        var result = HttpReq.responseXML;
29:        var cidades = result.getElementsByTagName("nome");
30:        document.getElementById('dest_combo').innerHTML = "";
31:        for (var i = 0; i < cidades.length; i++) {
32:            new_opcao = create_opcao(cidades[i]);
33:            document.getElementById('dest_combo').appendChild(new_opcao);
34:        }
35:    }
36: }
37:
38: function create_opcao(cidade) { 
39:    var new_opcao = document.createElement("option"); 
40:    var texto = document.createTextNode(cidade.childNodes[0].data); 
41:    new_opcao.setAttribute("value",cidade.getAttribute("id")); 
42:    new_opcao.appendChild(texto); //Adiciona o texto a OPTION.
43:    return new_opcao; // Retorna a nova OPTION.
44: }

Nas primeiras linhas temos a declaração da variável global 'HttpReq' que armazenará o objeto 'XMLHttpRequest' responsável pelo funcionamento da técnica AJAX, e a declaração da global 'dest_combo' que armazenará o nome da ComboBox em que os dados devem ser inseridos.

04: function ajaxComboBox(url, comboBox){
05:  	 dest_combo = comboBox;
06:    var indice = document.getElementById('estados').selectedIndex;
07:    var sigla = document.getElementById('estados').options[indice].getAttribute('value');
08:    url = url + '?uf=' + sigla;

Na quarta linha temos a declaração da função 'ajaxComboBox' que será chamada toda vez que o valor da ComboBox 'estados' for mudado. Ela recebe como parâmetros o nome do arquivo onde buscar dados e a identificação da ComboBox onde os dados devem ser inserido como opções de escolha.

Não deixe de ver também:

Na quinta linha atribuimos a global 'dest_combo' a identificação da ComboBox passada para a função 'ajaxComboBox'.

Na sexta e sétima linha capturamos o valor selecionado na ComboBox 'estados' e atribuimos a variável local 'sigla'.

E finalmente na oitava linha montamos a url com a localização do arquivo e o parâmetro 'uf', que dirá ao arquivo chamado de qual estado queremos receber os nomes das cidades.

09:    if (document.getElementById) { //Verifica se o Browser suporta DHTML.
10:        if (window.XMLHttpRequest) {
11:            HttpReq = new XMLHttpRequest();
12:            HttpReq.onreadystatechange = XMLHttpRequestChange;
13:            HttpReq.open("GET", url, true);
14:            HttpReq.send(null);
15:        } else if (window.ActiveXObject) {
16:            HttpReq = new ActiveXObject("Microsoft.XMLHTTP");
17:            if (HttpReq) {
18:                HttpReq.onreadystatechange = XMLHttpRequestChange;
19:                HttpReq.open("GET", url, true);
20:                HttpReq.send();
21:            }
22:        }
23:    }
24: }

Da linha nove até a vinte e quatro está o coração da técnica AJAX, primeiro é verificado se o navegador que está acessando a página suporta DHTML, o que é indispensável para a continuação do script.

Na décima linha começa uma condição que irá definir se o objeto 'XMLHttpRequest' poderá ser criado diretamente, caso de alguns navegadores como Mozzila/firebird, ou se temos que criar o objeto a partir de um ActiveXObject, caso do Internet Explorer. Uma vez criado o objeto devemos dizer a ele que função irá tratar das suas mudanças de estado, neste caso atribuimos a função 'XMLHttpRequestChange' que iremos descrever mais abaixo. Utilizamos então, o método 'open' para abrir o arquivo de dados passando para isto três parâmetros: 'GET' para dizer que queremos o conteúdo do artigo; 'URL', que é a localização do arquivo, e um parâmetro lógico que diz se o navegador deve carregar os dados de forma não sincronizada.

26: function XMLHttpRequestChange() {
27:    if (HttpReq.readyState == 4 && HttpReq.status == 200){ 
28:        result = HttpReq.responseXML;
29:        var cidades = result.getElementsByTagName("nome");
30:        document.getElementById('dest_combo').innerHTML = "";
31:        for (var i = 0; i < cidades.length; i++) {
32:            new_opcao = create_opcao(cidades[i]);
33:            document.getElementById('dest_combo').appendChild(new_opcao);
34:        }
35:    }
36: }

Uma vez que tratamos da criação do objeto e abertura do arquivo vamos agora dar uma olhada que como capturar os dados do mesmo.

A função 'XMLHttpRequestChange' que definimos para o tratamento das mudanças do objeto 'XMLHttpRequest', receberá dados toda vez que o estado do objeto é alterado durante a abertuda do arquivo de dados. O estado que nos interessa neste artigo é o estado de leitura '4', que ocorre quando o processo é completado, também verificamos se o status é '200' que confirma que o arquivo foi encontrado ao final do processo.

Alimentando uma ComboBox dinamicamente utilizando técnicas AJAX

28/11/2005 12:00:00

Autor: Rondinely S. de Almeida

Artigos relacionados