/*
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.
*/
 var HttpReq = null;
 var dest_combo = null;

 /*
 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.
 */
 function ajaxComboBox(url, comboBox){
  	document.getElementById('selecione').innerHTML = "Carregando...!";
	dest_combo = comboBox;
    var indice = document.getElementById('estados').selectedIndex;
    var sigla = document.getElementById('estados').options[indice].getAttribute('value');
    url = url + '?uf=' + sigla;
    /*
	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.
	*/
	if (document.getElementById) { //Verifica se o Browser suporta DHTML.
        if (window.XMLHttpRequest) {
            HttpReq = new XMLHttpRequest();
            HttpReq.onreadystatechange = XMLHttpRequestChange;
            HttpReq.open("GET", url, true);
            HttpReq.send(null);
        } else if (window.ActiveXObject) {
            HttpReq = new ActiveXObject("Microsoft.XMLHTTP");
            if (HttpReq) {
                HttpReq.onreadystatechange = XMLHttpRequestChange;
                HttpReq.open("GET", url, true);
                HttpReq.send();
            }
        }
    }
 }
 
 /*
 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.
 */

 function XMLHttpRequestChange() {
    if (HttpReq.readyState == 4 && HttpReq.status == 200){
        var result = HttpReq.responseXML;
        var cidades = result.getElementsByTagName("nome");
        document.getElementById('cidades').innerHTML = "";
        
        var new_opcao = document.createElement("option"); 
	    var texto = document.createTextNode("Selecione..."); 
	    new_opcao.setAttribute("id","selecione"); 
	    new_opcao.appendChild(texto); //Adiciona o texto a OPTION.
        document.getElementById('cidades').appendChild(new_opcao);
		
       
        for (var i = 0; i < cidades.length; i++) {
            new_opcao = create_opcao(cidades[i]);
            document.getElementById('cidades').appendChild(new_opcao);
        }
    }
 }
 
 /*
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.
Na linha vinte e oito armazenamos o conteúdo do arquivo na variável local 'result', para isto utilizamos a propriedade 'responseXML' do objeto 'XMLHttpRequest', desta forma armazenamos os dados como um objeto XML que poderemos manipular como um objeto DHTML.

Na linha vinte e nove criamos uma array 'cidades' com todos as tags 'nome' encontradas no arquivo de dados. Na linha seguinte apagamos o todo o conteúdo da ComboBox de destino com o auxílio da propriedade 'innerHTML'.

A seguir criamos um laço 'for' que tratará todas a opções que estavam no arquivo de dados criando um objeto DHTML 'option' para cada uma delas e adicionando este novo objeto a ComboBox de destino. Para isto será utilizada a função 'create_opcao'.
 */

 function create_opcao(cidade) { 
    var new_opcao = document.createElement("option"); 
    var texto = document.createTextNode(cidade.childNodes[0].data); 
    new_opcao.setAttribute("value",cidade.getAttribute("id")); 
    new_opcao.appendChild(texto); //Adiciona o texto a OPTION.
    return new_opcao; // Retorna a nova OPTION.
	
 }
 
 /*
 Esta função recebe como argumento o objeto XML que possui o nome das cidades a serem incluídas na ComboBox de destino, cria um novo elemento 'option' (linha 39), cria um novo nó de texto com o conteúdo do objeto XML (linha 40), cria o atributo 'value' para a nova opção de acordo com o atributo do objeto passado como argumento (linha 41), adiciona o texto criado anteriormente a nova opção (linha 42) e finalmente retorna o novo objeto DHTML para ser agregado a ComboBox de destino.

Pronto, agora já sabemos como alimentar dinamicamente uma ComboBox de acordo com uma interação do usuário, mas as técnicas AJAX servem para muito mais coisas, continue pesquisando sobre o assunto e melhorando seus conhecimento.
*/