9 - Recuperando datos mediante la propiedad responseXML del objeto XMLHttpRequest


Simulador (Cuando presiona el botón "ejecutar el programa" se graban todos los cuadros de texto y se ejecuta el primero de la lista mostrando en una página el resultado)

Problema:

<html>
<head>
<title>Problema</title>
<script src="funciones.js" language="JavaScript"></script>
</head>
<body>
<h1>Datos de paises.</h1>
<p>Seleccione el pais
<select id="pais">
<option value="0" selected>seleccione</option>
<option value="Argentina">Argentina</option>
<option value="Brasil">Brasil</option>
<option value="Chile">Chile</option>
</select>
</p>
<div id="resultados"></div>
</body>
</html>
addEvent(window,'load',inicializarEventos,false);

function inicializarEventos()
{
  var ob=document.getElementById('pais');
  addEvent(ob,'change',cambioEnSelect,false);
}

function cambioEnSelect(e)
{
  var ob1=document.getElementById('pais');
  recuperarDatos(ob1.value);
}

var conexion1;
function recuperarDatos(pais) 
{
  conexion1=crearXMLHttpRequest();
  conexion1.onreadystatechange = procesarEventos;
  conexion1.open('GET','pagina1.php?pa='+pais, true);
  conexion1.send(null);
}

function procesarEventos()
{
  var resultados = document.getElementById("resultados");

  if(conexion1.readyState == 4)
  {
    var xml = conexion1.responseXML;
    var capital=xml.getElementsByTagName('capital');
    var superficie=xml.getElementsByTagName('superficie');
    var idioma=xml.getElementsByTagName('idioma');
    var poblacion=xml.getElementsByTagName('poblacion');
    resultados.innerHTML='Capital='+capital[0].firstChild.nodeValue + '<br>' +
                         'Superficie='+superficie[0].firstChild.nodeValue + '<br>' +
                         'Idioma='+idioma[0].firstChild.nodeValue + '<br>' +
                         'Poblacion='+poblacion[0].firstChild.nodeValue ;                       
  } 
  else 
  {
    resultados.innerHTML = 'Cargando...';
  }
}

//***************************************
//Funciones comunes a todos los problemas
//***************************************
function addEvent(elemento,nomevento,funcion,captura)
{
  if (elemento.attachEvent)
  {
    elemento.attachEvent('on'+nomevento,funcion);
    return true;
  }
  else  
    if (elemento.addEventListener)
    {
      elemento.addEventListener(nomevento,funcion,captura);
      return true;
    }
    else
      return false;
}

function crearXMLHttpRequest() 
{
  var xmlHttp=null;
  if (window.ActiveXObject) 
    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
  else 
    if (window.XMLHttpRequest) 
      xmlHttp = new XMLHttpRequest();
  return xmlHttp;
}
<?php
if ($_REQUEST['pa']=='Argentina')
{
  $superficie=2700000;
  $capital="Buenos Aires";
  $idioma="Castellano";
  $poblacion=38000000;
}
if ($_REQUEST['pa']=='Brasil')
{
  $superficie=8500000;
  $capital="Brasilia";
  $idioma="Portugues";
  $poblacion=163000000;
}
if ($_REQUEST['pa']=='Chile')
{
  $superficie=750000;
  $capital="Santiago";
  $idioma="Castellano";
  $poblacion=15000000;
}

$xml="<?xml version=\"1.0\"?>\n";
$xml.="<pais>\n";
$xml.="<superficie>$superficie</superficie>\n";
$xml.="<capital>$capital</capital>\n";
$xml.="<idioma>$idioma</idioma>\n";
$xml.="<poblacion>$poblacion</poblacion>\n";
$xml.="</pais>\n";
header('Content-Type: text/xml');
echo $xml;

?>

Modificar el problema resuelto de tal manera que no requiera un botón para actualizar los datos del pais. Se deben recuperar los datos inmediatamente seleccionado un item del control select.


Ver solución

pagina.html







funciones.js




pagina1.php