Simple DropdownList with javascript Ajax

garfield185

Hi everybody. I'm trying to learn Javascript and Ajax, and I'm kind of lost with this thing. The Idea is to have two dropdownlist on the page, the first one loads data from an xml file with, for example, a list of countries, and after selecting a country the second one loads towns of the selected country. The idea is really simple, I'm following a manual but I can't make it work. Can somebody help me please? This is the code I write on an aspx file (VS2005), taken from the manual. I get an error on the line

var provincias = documento_xml.getElementsByTagName("provincias")[0];

it seems that is returns null... I'd appreciate if you could send me a link where I can find a similar idea, that I can study. Thanks.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/
xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Ejercicio 16 - Listas desplegables encadenadas</title>
<script type="text/javascript">
var peticion = null;
function inicializa_xhr()
{
if (window.XMLHttpRequest)
{
return new XMLHttpRequest();
}
else if (window.ActiveXObject)
{
return new ActiveXObject("Microsoft.XMLHTTP");
}
}

        function muestraProvincias() 
        {
            if (peticion.readyState == 4) 
            {
                if (peticion.status == 200) 
                {
                    var lista = document.getElementById("provincia");
                    var documento\_xml = peticion.responseXML;
                    var provincias = documento\_xml.getElementsByTagName("provincias")\[0\];
                    var lasProvincias = provincias.getElementsByTagName("provincia");
                    lista.options\[0\] = new Option("- selecciona -");
                    // Método 1: Crear elementos Option() y añadirlos a la lista
                    for(i=0; i<lasProvincias.length; i++) 
                    {
                        var codigo = lasProvincias\[i\].getElementsByTagName("codigo")\[0\].firstChild.nodeValue;
                        var nombre = lasProvincias\[i\].getElementsByTagNam